Web サイトのレイアウトを考えたり写真や画像をトリミングする時、意識して縦横比を統一すると全体のバランスがよくなります。そんな時に、覚えておくとちょっと便利なバランスのよい「縦横比」と「国際標準バナーサイズ」を紹介します。

960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。

960 Grid System
デモページ

960pxを基準にする理由としては、下記の2つが挙げられています。

最近のモニターは1024×768の解像度をサポートしており、960pxを表示するには十分である。
960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。
デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることができます。

またサイトでは、資料としてHTML+CSSをはじめ、PDFファイル、PSD・PNG・VSDファイルが一式でダウンロードできます。

グリッドシステムの機能
情報の反復
グリッドシステムを用いて、一定の場所に一定の情報・機能・サービスの要素を繰り返し配置することにより、反復機能を生み出します。

情報の構造
グリッドシステムを用いて、さまざまな情報・機能・サービスの要素を一定の間隔・空間で配置することで、情報の構造を明確にします。

情報の伝達
グリッドシステムは、情報の受け手である利用者に、意味のある情報を気軽に取得できるよう伝達します。
配置する情報同士の空間を適度に設定することにより、視覚的な誘導効果を生み出し、情報の分類・区別、見出しや図版・テキストの可読性を確保します。

グリッドシステムをサイトに導入するメリット
アイデンティティの確立
ブランドロゴなどのCI（コーポレートアイデンティティ）の要素は、一定の場所に繰り返し配置します。
こうしたレイアウトの統一をはじめとする反復を利用したデザインは、サイトの全ページを通じて一貫したビジュアルアイデンティティを確保することができます。

また、この反復の存在自体がサイトのアイデンティティとなり、サイトの全体感・信頼感を利用者に対して感じさせる基盤となります。

利用者の学習効果
上記のようなスタイルガイドを設けることにより、利用者はサイトのどのページへ移動した場合でも、どの場所にどういった情報・機能・サービスが配置されているかを無意識のうちに認知・学習できます。
一度、サイトの配置ルールを認知・学習してしまえば、利用者はサイトでの行動において迷いを持たなくなります。

制作者の思考支援
グリッドシステムは、制作者にとって場所ごとにあらかじめ決められた情報・機能・サービスを考慮したデザインをするため、自由に配置する場合と比べ短時間で行うことができます。
グリッドシステムは、制作者の体系的な情報の整理思考を補助する効果を持っています。

制作品質の維持
グリッドシステムを採用すると、複数の異なる制作者がかかわる場合でもサイトのデザインに一貫性を保たせることができ、デザインクオリティが維持されやすくなります。
また、異なるコンテンツ同士のデザインクオリティのばらつきをなくし、新たなコンテンツの制作に要するデザイン作業を軽減し、サイト管理の省力化にもなります。

All Recipes
http://allrecipes.com/
さじ加減 :
All Recipesをシェフに例えるなら: お母さん
美味い！
ポストカードサイズにプリントアウトでき、メモを見ながら料理という習慣が考慮されている - Chris
大切な隠し味のコリアンダーを買うのを忘れた！ってことがなくなる「買い物リスト機能」- Paul
「今週のコック」はユーザの参加価値を高めてくれる - Christophe
各レシピの評価が明快で比較しやすい - Eiko
国によって違う計量単位の切り替えができる - Chris
冷蔵庫の中身と相談できる優れた材料検索 - Paul
レシピごとに栄養情報を自動的計算できる - Christophe
やや塩不足
ユーザー発生型のレシピはレパートリーに限界がある - Chris
リンクが随所にありすぎて、食欲をなくす - Paul
サイト全体のオレンジ系統色は食べ物の色と近すぎる - Chris
トップエリアのデザインが寂しく、ページが持ちこたえられていない - Christophe

Cook Pad
http://www.cookpad.com
さじ加減 :
CookPadをシェフに例えるなら: 近所の奥さん（庶民的で親しみやすく、手作り感があるけどあか抜けない。）
美味い！
写真を多用した手順説明がわかりやすい - Eiko
お気に入りのユーザーのレシピが購読できる - Christophe
レシピを使って報告をする「つくれぽ」は、ユーザー間でのコミュニケーションとレシピの補足ヒントになっている - Eiko
やや塩不足
あか抜けない雰囲気がレシピの足を引っ張る場合も - Eiko
検索の絞り込み項目が少ない - Christophe
評価の高いレシピの検索にお金がかかる - Eiko
ユーザー発生型のレシピはオリジナル性に不透明さがつきまとう - Eiko

Food Network
http://www.foodnetwork.com/
さじ加減 :
Food Networkをシェフに例えるなら: Rachael Ray（アメリカのTVタレントシェフ、親しみやすいが味がない）
美味い！
材料や分野、または料理の種類で徐々に絞り込んでいく検索 - Chris
よく検索されるキーワードが表示されて便利 - Eiko
やや塩不足:
太ったjavascriptとFlashは、ブラウザーが心不全を起こしそう - Christophe
レシピページのヒエラルキーがなく、読みづらい - Chris
退屈な写真 - Chris

Open Source Food
http://www.opensourcefood.com/
さじ加減 :
Open Source Foodをシェフに例えるなら: ティーンエイジャーの弟（お母さんより実験的だけど、大勢にはできないし、火事になっちゃいそう）
美味い！
料理上手な異性と出会えるかも - Paul
個人ページに人柄が感じられるのがいい - Christophe
クリエイティブコモンズの設定があって、レシピを共有できる - Chris
使いやすいコメント機能 - Christophe
大きい写真 - Paul
レシピ以外でTipsの場で意見交換ができる - Chris
整頓されたインターフェースがレシピを際立たせている - Paul
やや塩不足
黒色が料理をおいしそうに見せてない - Eiko
シンプルなキーワードとジャンルの検索しかできない - Chris
「西洋料理」だけでも39ページもある。もっと内容を絞り込めるといい。「Sexyレシピ」「調子が良くなるレシピ」「子供を眠たくさせるレシピ」とか。 - Paul
レシピの新旧がわからない - Paul
おいしそうなデータなのにサーチエンジンで切られていない - Christophe

Epicurious
http://www.epicurious.com/
さじ加減 :
Epicuriousをシェフに例えるなら: Gordon Ramsay（ロンドンのカリスマシェフ、洗練されていてパワフルだがちょっとテンションが高すぎ）
美味い！
魅力的で鮮やかなページごとにローテーションする色彩計画 - Christophe
携帯に転送できるので、レシピを八百屋さんに持っていける - Chris
アイコンが美しい - Eiko
メモが書けるので、自分のアレンジを残していける - Chris
ビデオはコンテンツが豊富で、広告がそれに合っている - Christophe
やや塩不足
「My recipe box」のような大切なリンクが、面倒なドロップダウンメニューにしまい込まれている - Chris
スクロールしないと、材料と手順が確認できないのが不便 - Eiko
トップページに機能を詰め込みすぎて、何から食べていいかわからない感じ - Christophe
ユーザー評価が微妙、何人が評価したのかが分かりにくい - Eiko

式会社セカンドファクトリーのエクスペリエンス・デザイナー、井原亮二さん。明治大学理工学部電気工学科出身で「とにかく電化製品が好き」という彼は、派遣スタッフとして電機メーカーのデザイナーを5年間経験したのち、29歳のときにセカンドファクトリーに入社する。アプリケーション開発で注目を浴びる「エクスペリエンス・デザイナー」とは……？　自分の目指す方向につねに前向きな井原さんに、今までの軌跡や現在の仕事についてお伺いしました。

Quoted: Searchme's category suggest and visual presentation technology provides users with a rewarding search experience, delivering relevant results tailored specifically to their unique areas of interest

（売れるオンラインショップのポイント）
・商品写真やキャッチコピーは巨大化してアピールする。
・文字を多くして商品特長を極限までアプローチする。
・購入者の体験談をこれでもかと掲載する。
・スクロールは限りなく長くする。
・メルマガは“迷惑メール”フォルダ行きを恐れず毎日配信する。
・メルマガの文字量も気にせず、書きたいことはすべて書きまくる。

（売れないオンラインショップ）
・クオリティの高い洗練されたデザインを採用する。
・メインイメージは、FLASH で目を引くトップイメージにする。
・書きたいことは簡潔にし、スクロールを避ける。
・文字サイズはバランスよく配置する。
・段組みを行い簡潔な表現で情報を無駄なく配置する。
・メルマガは週1回もしくは隔週で配信する。
・メルマガのスクロールを避けるためキャッチコピー程度の紹介にとどめる。