新人Webディレクターの基礎、制作の現場で使うワイヤーフレームの作り方

ワイヤーフレームのツールをご紹介する記事はいくつもありますが、今回は実際にWeb制作のプロジェクトの中でワイヤーフレームを作って進めていく様子を、『Cacoo』というツールを使ってご紹介していきます。Webディレクターの方、プロダクトオーナーの方は必見です。

1. マインドマップの作成（要件出し）

アイディアを絞り出すには、マインドマップが便利です。Caccoにはマインドマップのテンプレートも用意されているので、うまく使ってブレスト（ブレインストーミング）をしましょう。初めは個人で出し尽くすことをオススメします。

なぜなら、初めからチームでやると、話がいろんな方面へ向いてしまうので、まとめ難くなってしまうからです。まずは、一人でアイディアを出し尽くし、その後チームで集まって、細かな部分に対してブレストを膨らませていくことをオススメします。

参考図書：ザ・マインドマップ

これを読まずにマインドマップを使っている人の方が多いと思いますが、言わずと知れた名著です。

2. サイトマップの作成（要件整理）

サイトマップの構成に沿って、ロジックツリーのようにマインドマップを整理してまとめます。その際、カテゴリーは類似サイト・競合サイトを見ながら進めていくと効率的。カテゴライズしやすくなります。Caccoにはサイトマップのテンプレートもあるのでこれも便利です。

3. スマホ版ワイヤーフレームの作成（機能表現）

サイトマップの構成に沿って作成します。CaccoではiPhoneやAndroidのテンプレートがあって便利です。シンプルにしていく作業を先にやった方が良いと思うので、スマホ版から始めることをオススメします。

同類のサイトや、狙っているUIや別ジャンルでも似たようなサイトがあれば、参考にしながら作成しましょう。ここでうまくビジュアル化できれば、全体のデザインもほぼ決まってくることになります。

4. PC版の作成（機能表現）

PC版のワイヤーフレームも、Cacooにブラウザのテンプレートがあります。スマホ版を作った後にPC版を作ろうとなると、意外にコンテンツが足りなくてスカスカになることが多々あります。

レスポンシブで対応するのが最近の流れですが、ワイヤーフレームでは別物という心構えで新たに作成して、後ほどスマホ版との統合を考えて機能やデザインを統一し、レスポンシブ化していくという流れが良いと思います。

決定者への外観確認

これぐらいのタイミングで決裁者などへ、あらかじめワイヤーフレームの確認をしてもらいましょう。その際に必要なのが「一言添える」こと。Cacooにはファイル共有機能と合わせてチャット機能も実装されているので、決裁者に早めにフィードバックを頼んでおきましょう。

編集ができるプラットフォーム内でフィードバックできることがCacooの良いところで、具体的に指示をそのまま得ることもできます。