シンプルで上質なウェブデザインの国内サイトまとめ

（※「リファラー」というと、Web解析業界では通常「参照元URL（どのサイトから訪問したのか）」を指しますが、制作会社では「デザインの参考になるサイト」を指すそうです。）

普段であれば「いつか参考にしよう」とブックマークして終わり、となりがちですが、一段深く理解して勉強するため、「ワイヤーフレーム模写」をしてみたところ、これが非常に面白いことに気が付きました。

手順１）ノートを取り出す
手順２）トップページのレイアウトを手描きで写しとる
手順３）下層ページを１ページ選んで、レイアウトを手描きで写しとる
手順４）手順１〜３をひたすら繰り返す（100本ノック）

以上！

ワイヤーを書き写すには、まずページ全体の構造を把握し、パーツごとの役割を意識することが必要になります。その過程では、いろいろなことに気が付くと思います。初めにFrancfrancのワイヤーを書いてみた時は…

FrancfrancのWebサイト

「キービジュアルの写真を上下に動かすアニメーションのFlash綺麗だな…ってFlashじゃない！？（このjs使いたいです）」とか、キービジュアルの下のバナー群が実に綺麗なグリッド配置になっていること(960 Grid Systemの12カラムってやつですかね）とか、実装のアイデアにつながる驚きの連続でした。

トップページだけではなく、下層を含めることも必須だと思います。印象的なトップの要素の中で、どこをサイト全体で共通化し、どこをナビゲーションと本体エリアにしていくのか。より「お手本度」が高いサイトであれば、下層1枚と言わず、カテゴリトップ、汎用詳細、特定タイプの記事テンプレートなど、何種類のレイアウトパターンでサイトが構成されているかを追ってみると面白いはず。

さらにもう一歩実制作に近づけるなら、ワイヤーフレーム作成ツールで清書（？）してみてもいいと思います。下図は会社でみんなが使っている”WireframeSketcher”で2分ぐらいで作ったもの。これは適当ですが、例えばグリッドを意識すればレイアウトデザインのトレーニングに、各ブロックに載せる内容を吟味すれば情報設計のトレーニングになるはず。

＊　＊　＊

ワイヤー模写を一定量重ねていくと、EC型、ブログ型など、サイトの種類によってある種スタンダードなデザインがあることを、文字通り「体で（手で）」覚えることができると思います。冒頭のサイトのように、ある視点でデザインがよいものを集めてくれているサイトは助かりますね。こういった「教科書ガイド」的なサイトを使ってワイヤーを書くことは、情報設計やデザインに携わるプロフェッショナルにとって「素振り」のような位置づけかもしれません。

（知識労働は「稽古」が難しくて困っていたので、これが続くとかなりスキルが上がりそうです。レスポンシブ縛りとか、業種縛りとか、ルールを変えながら楽しくやっても面白い）

何より実践が一番のトレーニングであることは疑いないですが、手のあいた時間は、良質なデザインに学ぶ楽しいトレーニングを重ねるようにしたいと思います。