週刊Webテク通信

2012年3月第4週号1位は、Bootstrapを補完するツールや素材、気になるネタは、アマゾン、実際に商品を購入した人のレビューに「証明マーク」表示

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

1. 20+ Beautiful Resources That Complement Twitter Bootstraphttp://www.webresourcesdepot.com/20-beautiful-resources-that-complement-twitter-bootstrap/

Bootstrapを補完するツールや素材を多数紹介しています。

この連載でも何度も取り上げていますが、BootstrapはTwitterが提供するWebデザインキットで、汎用的なUIコンポーネント、グリッドシステム、JavaScriptプラグインが用意されています。

この記事では、よりBootstrapを活用するための、以下のものが紹介されています。

  • オンラインでBootstrapをカスタマイズできるサービス
  • デザインをカスタマイズしたテーマ
  • UIイメージのベクトル素材(モックアップを画像で作る際に使用するのでしょう)
  • WordPressのテーマ
図1 Bootstrapを補完するツールや素材
図1 Bootstrapを補完するツールや素材

2. Free download psd Facebook new fan page GUI ≪ misz michal galubinski designhttp://misz.com/index.php/free-download-psd-facebook-new-fan-page-gui/

FacebookページのタイムラインレイアウトのテンプレートとなるPSDファイルを提供しています。

カバー画像を作成する際、ユーザーアイコンや全体のレイアウトを含めて、どう見えるかを確認しながら作業できるので便利ですね。

なお、ユーザーアイコンは、データ自体は180×180ピクセルなのですが、125×125ピクセルに縮小されて配置されるので注意が必要です。

サイズが分かればいいだけなら、Dimensions for Facebook Timeline For Pagesというインフォグラフィックスが分かりやすくて便利です。

図2 Facebookページのタイムラインレイアウトのテンプレートファイル
図2 Facebookページのタイムラインレイアウトのテンプレートファイル

3. 57+ Contact & Web Form Designs for Inspiration - Bloom Design BlogBloom Design Blog | Bloom Design Bloghttp://bloomwebdesign.net/myblog/2012/03/22/contact-web-form-designs-for-inspiration/

Webフォームのデザインギャラリーです。

コンタクトフォーム、ログインフォーム、サインアップフォーム、メルマガ登録フォーム、検索窓などのデザインが、大量に紹介されています。

図3 Webフォームのデザインギャラリー
図3 Webフォームのデザインギャラリー

4. 25 New Examples of Single Page Websites - DesignModohttp://designmodo.com/single-page-websites/

単ページ完結のWebサイトの実例を集めた記事です。

この手のまとめ記事でこれまで紹介されていないサイトが、数多く掲載されています。

図4 単ページWebサイトのギャラリー
図4 単ページWebサイトのギャラリー

5. Land-of-web ? All about web design ≫ 30+ Wonderful Blue Website Designshttp://www.land-of-web.com/inspiration/web-design/30-wonderful-blue-website-designs.html

青色がベースカラーとなっているWebデザインのギャラリーです。

TwitterやFacebookを連想してしまう色でもありますが、知性や安定を連想させることもあり、企業サイトには人気の色となっているようです。

図5 青色ベースのWebデザインのギャラリー
図5 青色ベースのWebデザインのギャラリー

そのほか、先週の記事の中から、ベータ公開されたPhotoshop CS6に関する記事を紹介します。

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

10+ Testing Tools for Responsive Web Design | gonzoblog.nlhttp://www.gonzoblog.nl/2012/03/10-testing-tools-for-responsive-web-design/

今回は、レスポンシブWebデザインの表示チェックのためのツールを複数紹介した記事を取り上げます。

レスポンシブWebデザインでのサイト作成時に、複数画面サイズでの表示チェックや動作チェックを簡単に行えるようにするこういったツールも、かなり充実してきました。

この記事では、Webサービス6種と、ブラウザの拡張機能4種、ブックマークレット3種が紹介されています。

なお、実機でテストする場合には、Adobe Labsで公開されているAdobe Shadowが役に立ちそうです。

図6 レスポンシブWebデザインの表示チェックツールいろいろ
図6 レスポンシブWebデザインの表示チェックツールいろいろ

おすすめ記事

記事・ニュース一覧