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

1. Pros And Cons Of 6 CSS Layout Patterns | Van SEO Designhttp://www.vanseodesign.com/css/css-layout-patterns-part-1/
www.vanseodesign.com/css/css-layout-patterns-part-2/">http://www.vanseodesign.com/css/css-layout-patterns-part-2/

CSSによるWebページのレイアウトパターンを6つに分類し、それぞれの長所と短所を解説した記事です。パート1と2に分かれています。

Fixed（横幅固定、横幅をピクセルで指定⁠）⁠、Fluid/Liquid（横幅可変、横幅を%で指定⁠）⁠、Elastic（横幅伸縮、横幅をemで指定）の従来からの定番以外に、さらに3つのレイアウト形式が紹介されています。

Hybridは、Fixed、Fluid/Liquid、Elasticを組み合わせたものです。コンテンツ幅は固定で背景がブラウザの幅に合わせて伸縮、ヘッダとフッタだけが横幅可変、などのパターンがあります。

Responsiveは、デバイスや解像度などによって複数のCSSを切り替えるというもの。スマートフォンなどへの対応ができますが、その分複数のレイアウトを用意するのに手間がかかります。このレイアウトパターンは、Conditional Layoutという呼び方もあるようです。

Fluid/Elastic Gridsは、グリッドを使った横幅可変のレイアウト。グリッドシステムを使った横幅可変のCSSフレームワークが最近多いですが、それらはこのレイアウトパターンに当てはまるのでしょう。

スマートフォンやタブレットの台頭により、見る側の環境に合わせてレイアウトが最適化されるResponsiveのような作り方が、今後ますます必要となってくるんでしょうね。

2. Laker compendium ? Designing digital publications in HTML5http://www.lakercompendium.com/

HTML5を使って、iPhone／iPad向けの電子書籍アプリを作るためのソリューションです。

Baker Ebook Framework、Less FrameworkなどのフレームワークとjQueryなどのスクリプト、CSSなどのファイル群とを組み合わせたパッケージとして提供されています。

HTMLとCSSの知識がありMacとXcodeを持っていれば、プログラミングの知識はなくてもiPhone／iPad向け電子書籍アプリが作れるとのことです。

写真をスライドショーとして見せたり、ムービーや音声を埋め込んだりできます。電子マガジンを作るのに向いているようですね。

3. Mega Web Buttons Pack #1 | Codropshttp://tympanus.net/codrops/2011/04/17/mega-web-buttons-pack-1/

アイコン付きのCSSボタンを簡単に作れるソリューションです。42種類のボタンが作れます。

HTMLコードを煩雑にしないためにjQueryを使っていますが、ボタン自体はCSSだけでデザインされています。

4. 25 ECommerce Web Designshttp://slodive.com/inspiration/showcase/ecommerce-web-designs/

ECサイトのデザインショーケースです。部分的にトリミングして掲載されているので、迫力がありますね。

ECサイトはメインのビジュアルの入れ替えが激しいのか、サイトに行ってみるとキャプチャー画像とはもう違っているものが多いようです。

5. 未来を考えるために、これだけは押さえておきたい海外ソーシャル系サービス50個 | little_shotaro's bloghttp://www.littleshotaro.com/archives/595

ソーシャル系のサービスを大量に紹介しています。ちょっとした解説と関連リンクもついている便利なリストです。

個人的にはこの中では、位置情報系と写真共有のサービスに注目しています。この記事を参考に、いろいろと試してみたいですね。

そのほか、先週の記事の中から、気になるWebサービスに関する記事を3つ紹介します。

• HTML5 Snippets
  HTML5やCSS3の便利なコードを共有できるサービス。ページ上でコードを実行できるようになっています。
• 期待のグループ写真共有サービスZangZing、非公開ベータテスト開始
  機能は少ないけどシンプルで分かりやすい写真共有サービスです。
• ページ上の無駄な画像や情報を排除して文章を読みやすくするサービス「Rdd.me⁠」⁠ : ライフハッカー［日本版］
  Webページをスマートフォンなどで読みやすく整形し直すReadabilityを、短縮URLで使えるようにしたサービスです。

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

Create stories using social media - storify.comhttp://storify.com/

Storifyは、最近はやりのキュレーションサービスの一種です。

情報を取捨選択してまとめる行為のことをキュレーションと呼ぶのが最近はやっているようで、そのためのWebサービスをキュレーションサービスと呼びます。TogetterやNAVERまとめのようなサービスといった方がわかりやすいかもしれません。

StorifyもTogetterやNAVERまとめと似たようなツールで、ソーシャルメディアのコンテンツを引用して並べ、自分なりの文脈を持たせた「まとめ」を作ることができます。TwitterやYoutube、Flickrやブログなどから、簡単にコンテンツを取り出すことが可能です。

操作も簡単でデザインも洗練されています。ツイート内にTwitpicやyfrogなどへのリンクがあると、写真がインラインで表示されるのも便利ですね。

作ったまとめをstoryと呼ぶのですが、このstoryを自分のサイトやブログに埋め込むためのコードも用意されています。

storyにはツイートボタンや「いいね！」ボタンも付いているほか、引用された各ツイートに対してリプライ／リツイートができるようになっています。