週刊Webテク通信

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

ネットで見かけた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つの数値を指定してダウンロードボタンを押すだけです

おすすめ記事

記事・ニュース一覧