週刊Webテク通信

2009年6月第4週号　1位は，Webデザイナーのためのスターターキット／気になるネタは，もっともダウンロード数が多いのは"緑色" - Firefox分析

Webテク, Webデザイン, Web広告, Webカラー, Photoshop, CSS, Firefox

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2009年6月22日～6月28日の間に見つけた記事のベスト5です。

1. 27 Must-Have Starter Kits For Web Designers | Graphicshttp://www.hongkiat.com/blog/27-must-have-starter-kits-for-web-designers/

Webデザイナーのためのスターターキットが紹介されています。デザインを始めるときに，テンプレートや素材集があると効率アップにつながりますが，そういったものをここではスターターキットと呼んでいます。

ブラウザで表示されるフォームやボタンのエレメント，アイコン，カーソルなど，Webページのモックアップやワイヤーフレームを作るときに役立ちそうなパーツが盛りだくさんです。

ブラウザとディスプレイサイズごとのセーフエリアのテンプレートや，各ブラウザのツールバーが画像として入っているテンプレートも便利そうですね。

iPhoneのインターフェイスのパーツもあれば，本，紙袋，Tシャツの素材なんかもあります。

図1　Webデザイナーや開発者に役立ちそうなパーツばかりです

図1　Webデザイナーや開発者に役立ちそうなパーツばかりです

2. The Ultimate List Of Online Color Tools For Web Developershttp://www.webdesignbooth.com/the-ultimate-list-of-online-color-tools-for-web-developers/

色を選ぶツールや配色を決める手助けとなるページなど，オンラインのカラー関連ツールの膨大なリンク集です。

  • カラーホイール
  • カラースキーム
  • カラーパレット
  • いろいろなカラーツール

といったツールが多数紹介されています。

図2　キャプチャー画像でどんなツールか想像がつきますね

図2　キャプチャー画像でどんなツールか想像がつきますね

3. Module Tabs in Web Design: Best Practices and Solutions | Design Showcase | Smashing Magazinehttp://www.smashingmagazine.com/2009/06/24/module-tabs-in-web-design-best-practices-and-solutions/

Webデザインにおけるタブインターフェイスについてのまとめ記事です。タブのモジュールの各パーツの名称の紹介から始まり，使い方の注意点，実例，作るためのチュートリアルやスクリプトの紹介まで網羅されています。

タブは素早く切り替わらなくてはいけない，コンテンツのエリア（Pane）はスクロールしてはならないなど，タブモジュールのルールがまとまっていて参考になります。スクリーンリーダーでもちゃんと読めるように，キーボードでもナビゲーションできるように，といった高度な要求もありますね。

タブを実現するフレームワークにどれを使うかを検討するときにも，これらのルールは参考になりそうです。

図3　タブの実例，スクリプトも豊富に紹介されています

図3　タブの実例，スクリプトも豊富に紹介されています

4. 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites | Dzine Bloghttp://dzineblog.com/2009/06/best-photoshop-web-layout-design-tutorials.html

Adobe PhotoshopでWebページのレイアウトデザインを行うチュートリアルが多数紹介されています。凝ったデザインのものが目立ちますが，シンプルで上質なものも多いです。Webレイアウトの参考にもなるでしょう。

編集可能なPSDファイルをダウンロードできるチュートリアルもありますね。

図4　いろんなパターンのデザインが揃っています

図4　いろんなパターンのデザインが揃っています

5. CSS3 Unleashed -- Tips, Tricks and Techniques | W3Avenuehttp://www.w3avenue.com/2009/06/22/css3-unleashed-tips-tricks-and-techniques/

CSS3に関するTipsやテクニックなどのリンク集です。

CSS3でのセレクタや背景とボーダー，マルチカラムなどの機能の紹介のほか，CSS3の機能をJavaScriptを使って実現する方法なども紹介されています。

図5　CSS3関連の膨大なリンク集です

図5　CSS3関連の膨大なリンク集です

以上，メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

そのほか先週の記事から，デザインのインスピレーションになりそうなギャラリーページを紹介します。

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

The 1KB CSS Grid by Tyler Tate :: A simple, lightweight approachhttp://www.1kbgrid.com/

グリッドシステムのCSSフレームワークを作ることができるジェネレーターです。

カラム数，カラムの幅，カラムの間隔を指定すると，指定したサイズのHTMLとCSSのセットがダウンロードできます。

プレビューなどの機能がないので，実際にダウンロードするまでどういったものが生成されるのか分からないのが残念ですが，シンプルながらよくできたツールだと思います。

図6　3つの数値を指定してダウンロードボタンを押すだけです

図6　3つの数値を指定してダウンロードボタンを押すだけです

今週の気になるWebネタ

もっともダウンロード数が多いのは"緑色" - Firefox分析 | エンタープライズ | マイコミジャーナルhttp://journal.mycom.co.jp/news/2009/06/22/053/index.html

ネタ元の「Firefox is Green - Blog of Metrics」によると，訪問者数とダウンロード数で求めたコンバージョンレートは，一番低かったオレンジ色よりも緑色の方が1%近く多かったということです。1日に50万ダウンロードくらいあるそうなので，たしかに1%でも結構な数字になりますよね。

とはいえ，統計学的にこの場合の誤差がどのくらいなのかが気になるところです。実は1%くらいは誤差の範囲だったりして。また，通常は緑色のボタンを違う色に変えてテストしてみたけどやっぱり緑がよかったというのは，慣れている緑のボタンのほうがユーザーの抵抗が少なかったという結果かもしれません。

とはいえ，ちょっとでもコンバージョンレートを上げるように調査・検証を行っていく姿勢は見習いたいと思います。これからも，ボタンのサイズを大きくしたり，形を八角形にしたり，位置をセンター揃えにしたりなどのテストを続けていくそうなので，それらの結果発表にも期待したいですね。

Webテク, Webデザイン, Web広告, Webカラー, Photoshop, CSS, Firefox

著者プロフィール

芦之由（あしのよし）

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

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

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