ネットで見かけた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にはツイートボタンや「いいね！」ボタンも付いているほか，引用された各ツイートに対してリプライ／リツイートができるようになっています。