Main menu

Column コラム

伸び盛りのWebディレクターに勧めたい「ワイヤーフレーム模写」

Satoshi Iritani

クリエイティブディレクター / ファシリテーションエヴァンジェリスト
入谷 聡

ロフトワークに入社して5ヶ月…本格的に仕事でワイヤーを引いたり、デザインディレクションをしたりすることが増えてきたので、いいデザインリファラー(※)がないかなーと思っていたところ、ホットエントリに『シンプルで上質なウェブデザインの国内サイトまとめ』なる記事を発見!

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

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

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

手順1)ノートを取り出す
手順2)トップページのレイアウトを手描きで写しとる
手順3)下層ページを1ページ選んで、レイアウトを手描きで写しとる
手順4)手順1〜3をひたすら繰り返す(100本ノック)

以上!

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

FrancfrancのWebサイト

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

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

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

* * *

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

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

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

執筆者

Satoshi Iritani

クリエイティブディレクター / ファシリテーションエヴァンジェリスト入谷 聡

ロフトワーク京都でWebサイト制作プロジェクトを主導するクリエイティブディレクター。堅実なプロジェクトマネジメントを得意とする、ロフトワークきっての理論派。優れた情報整理能力と洞察力・言語化スキルで数々のクリエイティブを飛躍させてきた。PMI認定PMP(*)。1児の父。

最近執筆した記事

コメント

blog comments powered by Disqus