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

1. Building A Better Responsive Website | Smashing Mobilehttp://mobile.smashingmagazine.com/2013/03/05/building-a-better-responsive-website/

サイトをレスポンシブWebデザインにリニューアルしたレポートです。

1つのWebサイトで各デバイスに適用でき、将来登場する様々なデバイスのディスプレイサイズにも対応することを目指してデザインしたようです。

ナビゲーション部分は、上部の水平メニューがモバイル時にはページ一番下の垂直メニューに変わるというアプローチです。その際、上部にメニューへのボタンが表示され、ページ内スクロールで下部のメニューへと移動します。

ExpressionEngineという海外では結構メジャーというCMSで構築されており、モバイル時には1ページに表示されるニュースの件数を減らすなどの作り込みがされているそうです。

2. Start Up Guide to Responsive Web Designhttp://www.theartimes.com/start-up-guide-to-design-responsive-websites/

レスポンシブWebデザインを始める人へのガイド的な記事です。紹介されている実例が、どれもデザイン性が高く興味深いですね。

3. 10 Metro WordPress Themes Inspired by Windows 8http://designrshub.com/2013/03/metro-wordpress-themes.html

Windows 8のメトロデザインに影響を受けたWordPressテーマをいろいろ紹介しています。フラットデザインのサンプル集とも言えますね。

4. Uniqlo Stripe Hovers | CSS-Trickshttp://css-tricks.com/uniqlo-stripe-hovers/

画像にロールオーバーしたときに、アニメーションするストライプの枠を付けるテクニックを実現するチュートリアル記事です。

ユニクロのUSサイトで使われている効果を再現したものですが、ユニクロではアニメーションGIFを使っているのに対し、ここでは画像を使わずCSSだけで実現しています。ストライプは、CSS3のグラデーションで描いています。

5. 25 Illustrator Tutorials Every Graphic Designer Should Learn | Tutorials | Design Magazinehttp://urdu-mag.com/blog/2013/03/25-illustrator-tutorials-every-graphic-designer-should-learn/

Adobe Illustratorを使ったイラスト作成のチュートリアルを25個紹介しています。

難しそうなところが意外と簡単なテクニックで実現できていたり、逆に単純そうなところに手がかかっていたりと、いろいろな発見がありますね。

そのほか、最近の記事の中から、Facebookのニュースフィードリニューアルに関する記事を紹介します。

• 話題のFacebookリニューアル。さらなる利便性を目指すデザイン方針は「Mobile-Inspired」
  キーワードは「Mobile-Inspired」とのことです
• Facebookの新ニュースフィードに企業ユーザーが備えるべきこと - ITmedia ニュース
  これまでもそうでしたが、とにかく写真・画像が重要ということですね
• SNSと企業の一歩進んだ付き合い方講座 - Facebookの大幅な仕様変更で管理者が気をつけるべきこと：ITpro
  Pinterestと連携しての画像も大きく表示されるようです

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

Am I Responsive?http://ami.responsivedesign.is/

複数デバイスの画面サイズで、サイトがどう見えるかをチェックできるWebサービスです。

モニタ、ラップトップ、タブレット、スマートフォンが格好良く配置された画像に、はめ込み合成のようにサイトが表示されるところが、同様のサービスとの差別化ポイントでしょう。

サイト部分は画像ではなくiframeで表示しているので、スクロールなども行えます。このサービスの仕組みについて解説してある記事も興味深いです。

レスポンシブなサイトを作ったときに、クライアントにプレゼンするときに使うとインパクトがありそうですね。