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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アマゾンのカスタマーレビューに、実際に商品を購入したユーザーの投稿を見分けられる仕組みが導入されました。Amazonでその商品を購入したユーザーは、レビュー作成時にチェックを入れると認証購入者のマークが表示されます。過去に投稿したレビューにもマークを付けられるそうです。

これが、いわゆる「荒らし」の対策になるかどうかは置いておいて、気になったのはこのマークについてです。マークといってもテキストのみで、「⁠Amazonが確認した購入（詳細⁠）⁠」と書いてあり、「⁠詳細」の部分がリンクになっていて、別ウィンドウで解説を読むことができます。

この「Amazonが確認した購入」というのは、ずいぶん分かりにくい表現だなと思ったのですが、英語版の「Amazon Verified Purchase」を直訳したようですね。なお、アメリカ版のアマゾンには、この機能は以前からあったとのことです。