海外の WEB2.0 系サイトのデザインを見ていると、どこかしら似ていると感じることが多いと思います。「カドが丸い」「ロゴが反射している」などなど、これまでも様々な点が指摘されてきましたが、最近のトレンドは「クリーンな水平分割」なんだとか：
■ Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided (StyleIgnite.com)
「クリーンな水平分割」とは、StyleIgnite による造語。しかしこの表現がピッタリだということは、例に挙げられているサイトを見れば一目瞭然です：
上の画像は、現時点でのキャプチャ。画面全体が大胆に水平分割されていて、余白スペースも大きく開けられていますね。まさしく「クリーンな水平分割」。
念のため、他に例として挙げられているサイトをリンクしておきます：
- Wishlistr.com
- Blogadda.com
- ChurchPlantMedia.com
- Corking Design
- Dibusoft
- Enrichment
- HyperPixel Design
- NetNova
- Studio3K
- YikeSite
- Oak Tree Creative
- Revolver
そうそう、最近こういうイメージのサイトって見るよねという感じ。確かにこうして見ると、「最近の企業」らしく感じます。
で、「クリーンな水平分割」を構成する要素として、
1. 最上部
暗めな色を背景にして、シンプルな（主にテキストベースの）ロゴが表示されることが多い。
2. 2段目
キャッチコピーが大きな文字で表示されていることが多い。同時に目を引くグラフィックが掲載されているのもこのスペースですよね。
3. 3段目以降
より詳細な情報のまとめ。なぜか3列になっていることが多い、というのも共通しています。
4. アイコンやキャラクター
マンガ風のキャラクターを使い、使いやすさ等をアピールしているサイトも多い。またアイコンやバッジを追加して、サイトの彩りを増したり、商品/サービスのセールスポイントに気を引く効果を狙っているところも。
5. ナビゲーション
シンプルでクリーンなメニューを置くというのがトレンド。StyleIgnite が調査したところでは、「クリーンな水平分割」系でナビゲーションに掲載されているメニューは最大7個だったそうです。"HOME" "LOGIN" "SIGN UP"の3つのメニューしか置いていないところもあった、とのこと。
*****
ということで、以上5つのポイントを網羅して作ったダミーがこちら。WEB2.0企業っぽく……見えないこともないかも（中身はテキトーですよ）：
好評であれば、来週から Polar Bear Blog のトップページはこのようなデザインになります（うそです）。
ウェブで、さあはじめようって意思を感じるデザインですよね。
さらに登録後は、すぐにソーシャル系のアカウントをいれてもらってみんなで一緒にやりましょう！
ってのが流行ですよね。
百式さんとこで紹介されてた登録後、twitterヘコメントいれてもらうとかってのもおもしろいですし。
ＡＩＳＡＳの最後のＳのやり方ってのがいよいよ確立されてきた感じがありますね。
投稿情報: furoku | 2008/05/12 09:28