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

1. 5 Patterns To Rearrange Responsive Layouts | Van SEO Designhttp://www.vanseodesign.com/web-design/responsive-layout-patterns/

レスポンシブWebデザインの5つのパターンを紹介し、より高度なレスポンシブなデザインについて解説しています。

挙げられている5つのパターンは以下の通りです。

Mostly fluid

• モバイルサイズではカラムが縦に並ぶ
• ブラウザサイズによって複数カラムの段組になる
• エレメントとコンテナは可変し、ブレイクポイントによって拡大されたり縮小されたりする
• センター揃えの固定幅レイアウトに見える

Column drop

• Mostly fluidと似ているが、コンテナが可変しない
• ブレイクポイントによってサイズを変えるので、ブレイクポイントが多く必要

Layout shifter

• サイズに合わせて単にカラムが落ちるだけでなく、高度にレイアウトが調整される

Tiny tweaks

• シングルカラムでデバイスによって横幅が変わるなど、ちょっとだけ変化するもの

Off canvas

• ブラウザサイズによって、サイドバーなど一部の情報が隠れる
• 隠れた情報はクリックすると現れるなど、別の手段でアクセスできる

2. 50 jQuery Function Demos for Aspiring Web Developers - Smashing Coding | Smashing Codinghttp://coding.smashingmagazine.com/2012/05/31/50-jquery-function-demos-for-aspiring-web-developers/

jQueryのデモコードを50個紹介しています。その場でデモを確認し、コードを見ることができます。

プラグインを使うまでもないようなケースで、ちょっとしたコードは自分で書きたいという人のリファレンスとして役に立ちそうです。

3. Animated Logo Design Process Showcase - Inspirationhttp://favbulous.com/post/1004/animated-logo-design-process-showcase

アニメーションGIFで紹介したロゴデザインの過程が、多数掲載されています。

あえてムービーでなく、アニメーションGIFという見せ方も面白いですね。

ソーシャルメディアに貼り付けたときに目立つということで、アニメーションGIFが今さらながら流行っているようにも感じます。

4. New And Awesome Designs Of Websites For Inspiration - X Siteshttp://www.designyourway.net/blog/inspiration/new-and-awesome-designs-of-websites-for-inspiration-40-sites/

最近公開された、デザインが優れたサイトのギャラリーです。

こういうところで紹介される気合いの入ったデザインのサイトは、1ページ完結型のものが多いですね。

5. WordPress vs MovableType という疑問 : Web Design KOJIKA17http://kojika17.com/2012/05/wordpress-and-movabletype.php

WordPressとMovable Typeとを比較した記事です。ニュートラルな視点でそれぞれを比べて、双方の良い点が分かるようにまとめてあります。どちらが優れているかという議論にはあまり意味がなく、ケースバイケースで使って欲しい（今やマイナーとなってしまったMovable Typeのことも忘れないでね）ということを訴えたいようです。

ちなみに、有名ブログの「ネタフル」はずっとMovable Typeを使っていますね。やはり静的生成というところがポイントのようです。

そのほか、先週の記事の中から、Adobeサービス関連の話題を紹介します。

• ページデザインの各エレメントのスペックを1クリックで表示するFireworksの機能拡張 -Specctr | コリス
  作成した図形のピクセル数やフォントサイズ、色などを表示するFireworks機能拡張の紹介です
• 初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6含む) | Design Color
  Photoshopのいろいろな設定の解説です
• 22 Years of Adobe Photoshop 1.0 to CS6
  Photoshopの歴史を振り返っています

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

Clipboardhttp://clipboard.com/

ClipboardはWebページ内の任意の場所をクリッピングできるWebサービスです。

クリッピング版Pinterestといった感じのサービスで、フォロー／Like／コメントといった、お決まりのソーシャル要素も用意されています。

クリップしたもの（以下クリップ）は、画像になるわけではなくHTMLのままのようで、テキストや画像を選択してコピーすることもできます。Webデザインのパーツギャラリーのようなものも作れそうです。

Pinterestのようなボードを作ることができ、クリップに付けたタグがボード名となります。タグは複数付けられるので、一つのクリップが複数のボードに入る場合もあるわけです。

クリップは公開か非公開かも選ぶことができます。

Pinterestを使い慣れている人にはすんなり理解できて、なかなか面白いサービスです。しかし、Pinterestと同様に、メジャーになったときには著作権的にどうなのかといった議論になりそうですね。