週刊Webテク通信

2011年10月第1週号 1位は,レスポンシブWebデザインのショーケース,気になるネタは,アマゾン,タブレット「Kindle Fire」を発表

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2011年9月26日~10月2日の間に見つけた記事のベスト5です。

1. 40 Inspiring Responsive Websites | Onextrapixel - Showcasing Web Treats Without A Hitchhttp://www.onextrapixel.com/2011/09/30/40-inspiring-responsive-websites/

レスポンシブWebデザインのショーケースです。

画面サイズに合わせて段組が変わるもの,段組は変わらず画像も含め縮小/拡大するものなど,興味深い可変デザインのサイトが多数紹介されています。

最後にまとめ的なことが書いてあるのですが,IE6対策などブラウザの互換性を調整するために使われていた時間を,これからはデバイスの違いに合わせて調整する時間にあてるべき時代が来ているという言葉が印象的でした。

17 Free Responsive WordPress Themesという,レスポンシブWebデザインのWordPressテーマを集めた記事も参考になりそうです。

図1 レスポンシブWebデザインのショーケース

図1 レスポンシブWebデザインのショーケース

2. インストールせずに,好きなWeb Fontsを使おう ─ @IThttp://www.atmarkit.co.jp/fwcr/design/tool/webfonts01/01.html

Web Fontsの概要と,実際の使い方を解説しています。

記事本文にもありますが,フォントワークス,モトヤ,白舟書体が使えるWebフォントサービス「フォントプラス」が始まり,モリサワも同様のサービスを発表しています。今後は日本語でもWeb Fontsを使うケースが増えていくことが期待できそうです。

図2 Web Fontsの概要と使い方

図2 Web Fontsの概要と使い方

3. 19 CSS3 and jQuery Tutorials for Perfect UI Design | SpyreStudioshttp://spyrestudios.com/19-css3-and-jquery-tutorials-for-perfect-ui-design/

UIデザインに関連したCSS3とjQueryのチュートリアルを集めて紹介した記事です。

JavaScriptとCSS3をうまく組み合わせることで,従来よりも簡単に高度なことが実現できるようになっています。

図3 CSS3&jQueryのチュートリアルいろいろ

図3 CSS3&jQueryのチュートリアルいろいろ

4. 20+ Enhancing CSS3 tools and generators | Webdesigner Depothttp://www.webdesignerdepot.com/2011/09/20-enhancing-css3-tools-and-generators/

CSS3の設定を手助けするツールやジェネレーターを紹介しています。

角丸やグラデーションなど手書きでは面倒なコーディングをしてくれるツールのほか,メニューやボタンを生成するためのツールもあります。

図4 CSS3のためのツールとジェネレーター

図4 CSS3のためのツールとジェネレーター

5. 12 Best iPad Applications for Designershttp://www.1stwebdesigner.com/design/twelve-ipad-applications-designers/

デザイナーのためのiPad用アプリケーションを紹介しています。

ドロー/ベクターのペイントツールや,アクセス解析,モックアップ作成ツールなどが掲載されていました。

図5 デザイナーのための各種iPadアプリ

図5 デザイナーのための各種iPadアプリ

そのほか,先週の記事の中から,気になるニュース記事を紹介します。

先週の気になるWebサービス

Ripple Emulator Communityhttp://ripple.tinyhippos.com/

Rippleはモバイル環境のエミュレーターです。HTML5で作られたモバイルアプリの開発支援のためのツールで,Chromeの拡張機能として動作します。

PhoneGapやWebWorks,WACなどのモバイル用プラットフォームをエミュレートすることが可能です。位置情報やコンパスの向きなどもテストすることができるようです。

また,単純に画面サイズのエミュレーションをするためにも使えそうです。

iPhoneやiPad,Xperiaなどの端末名があらかじめ登録されており,選択するだけでその端末の画面解像度でページを表示できます。縦画面/横画面を切り替えることも可能です。レスポンシブWebデザインの表示チェックに役立つでしょう。

なお,画面サイズのエミュレーションに使う場合,プラットフォームは「Mobile Web」を選べばいいようです。

図6 モバイル環境のエミュレーター

図6 モバイル環境のエミュレーター

今週の気になるWebネタ

アマゾン,タブレット「Kindle Fire」を発表--価格は199ドル - CNET Japanhttp://japan.cnet.com/news/service/35008240/

Amazonから,Android OSを搭載したカラー電子書籍端末のKindle Fireが発表されました。カメラ,マイク,3G通信はありませんが,199ドルという価格は魅力的です。

Kindle FireにはSilkという専用ブラウザが搭載されており,非力なマシンでも快適にブラウズできるよう,端末とクラウドが協力して処理を行うそうです。

また,従来と同じモノクロeインク版のKindleも,新機種が登場しています。タッチパネル搭載のKindle Touch(3G/WiFiモデルが149ドル,WiFiモデルが99ドル)⁠わずか79ドルの廉価版Kindleが発売されました。

カラー版はBarnes & NobleのNOOK Colorに,モノクロ版はソニーのReaderに対抗する製品ということのようです。どちらもライバル製品よりかなり安い値段で提供されます。

日本ではAmazonの電子書籍サービス自体がスタートしていませんし,今回発表の端末の,日本での発売も未定のようです。なので,いまひとつ人ごとのような感じもありますが,アメリカではかなりインパクトのある発表だったようです。アメリカの電子書籍業界ではAmazonの一人勝ち状態がより強まるんじゃないでしょうか。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入