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

1. Twitter bootstrap入門 #twtr_hackhttp://www.slideshare.net/makingx/twitter-bootstrap

Twitterが提供するCSSフレームワーク「bootstrap」の入門用スライドです。

bootstrapはグリッド、ボタン、タブ、ナビゲーションバーなどがあらかじめデザインされたフレームワークで、jQueryプラグインを利用したモーダルウィンドウ、ツールチップ、アコーディオン、カルーセルなども簡単に実装できるようになっています。LESSを使ってのカスタマイズもでき、バージョン2でレスポンシブWebデザインにも対応しました。

このスライドでは、bootstrapとはどういうものかの説明から始まり、用意されているUIコンポーネントの説明や、便利な関連ツールなどが掲載されています。

プログラマやエンジニアなど、デザインが苦手な人がWebサービスを立ち上げるときに使うと便利という紹介のされ方の多いbootstrapですが、Webデザインのプロもこの手のフレームワークを使うのが当たり前になっていくと思います。jQueryを使うのが当たり前になったのと同じような感じですね。

カスタマイズでデザインのオリジナリティは出せるでしょうし、画像を適切に使用すれば、見た目がほかのサイトと同じようになってしまうこともないと思います。フレームワークを使うことで、ブラウザ間の互換性やCSSハックなどに時間を取られず、デザインの作り込みに注力できるようになるというのが理想だと思います。

2. CSS3を使ってできる画像まわりのエフェクトやスタイリング18 | Webロケッツマガジンhttp://webrocketsmagazine.com/entry/20120224/css3-image-effects.html

CSS3を使って画像にシャドウを付けたり角丸にしたりするテクニックが18種類紹介されています。

影を傾けて写真がめくれたような効果や、紙の切れ込みに写真を差し込んだような処理など、写真の見せ方にバリエーションが付けられるコーディング例が揃っています。

Pinterestの値段表示に使われているような、写真の隅にリボンを載せたような効果も紹介されていました。

3. 40 New Tools and Services for Web Designers and Developers | Splashnologyhttp://www.splashnology.com/article/40-new-tools-and-services-for-web-designers-and-developers/4619/

Webサイトのレイアウトを素早く作るためのツールやサービスを紹介しています。

以下の3つに分けて掲載されています。

• HTML／CSSのツール、サービス、情報源
• グリッドとフレームワーク
• その他

4. 30 Sets of Social Media/Bookmarking Iconshttp://www.ispsd.com/02/30-sets-of-social-mediabookmarking-icons/

ソーシャルメディアへのリンクボタンなどに使える各種アイコン画像を紹介しています。

後発なのでしかたないのですが、Google+のアイコンが入っていないものが多いですね。代わりにGoogle+アイコンだけのセットも紹介されていました。

5. February Sweet And Creative Pink Websiteshttp://littleboxofdesign.com/?p=2460

ピンク色を使ったWebサイトのデザインギャラリーです。ピンクといっても日本人の連想するピンクとは違うんだろうなと思って見てみると、やっぱりちょっと違った感じですね。

日本の子供服通販サイトも紹介されています。「⁠SAKURA SELECTION」というのも日本のサイトですね。

そのほか、先週の記事の中から、気になるニュース記事を紹介します。

• モリサワ、クラウドフォントサービス「TypeSquare」開始 表示のシミュレーションも可能 - はてなブックマークニュース
  モリサワのWebフォントサービスがついにスタートしました
• Apple、日本でも「iTunes in the Cloud」開始 - ITmedia ニュース
  iTunesストアで購入した楽曲は複数端末で自動同期したりできるそうです
• “⁠ZumoDrive⁠”が5月1日でサービス終了、ファイルのダウンロードツールが公開中
  オンラインストレージサービスZumoDriveがサービス終了とのこと
• アドビ、個人デザイナー向けにも「Digital Publishing Suite」を提供へ - CNET Japan
  小規模デザイン事務所や個人デザイナー向けの「Single Edition」が登場です

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

Mentimeter | Interact with your audiencehttp://mentimeter.com/

Mentimeterはスマートフォン向けの簡単なアンケートを作成できるサービスです。

アンケート結果はリアルタイムに確認できます。グラフがリアルタイムでアニメーションしながら伸びていく様子は見ていて面白いです。

アンケートを作成するのにユーザー登録などは不要です。日本語もOKでした。

質問文と選択肢を入力し、グラフのデザインを黒バックか白バックか選択するだけで、アンケートは作成できます。

投票用のページはスマートフォン向けにレイアウトされており、もちろんパソコンからもアクセスできます。投票用ページと結果発表ページは分かれており、投票後すぐに結果を見るような設計にはなっていません。

わたしが試してみたところ、アンケート結果ページはiPhoneでは見られませんでした。アンケートの回答はスマートフォンで行ってもらい、結果を閲覧するのはパソコンというサービスのようです。