週刊Webテク通信

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

Webテク, Webデザイン, Web広告, Bootstrap, Facebook, レスポンシブWebデザイン, amazon

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

ネットで見かけた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デザインの表示チェックツールいろいろ

今週の気になるWebネタ

アマゾン，実際に商品を購入した人のレビューに「証明マーク」表示 - CNET Japanhttp://japan.cnet.com/news/service/35015443/

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

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

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

Webテク, Webデザイン, Web広告, Bootstrap, Facebook, レスポンシブWebデザイン, amazon

著者プロフィール

芦之由（あしのよし）

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

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

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