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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

決定者への外観確認

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

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

5. プリントアウト貼り出し（全体像の参加者確認）

ここまでがワイヤーフレーム作成の主になります。完成したら、いよいよチームでお披露目です。チームへの共有方法の一例として、各ページをエクスポートして出力し、ホワイトボード等にサイトマップと同じ構成で貼り付け、全体と詳細を見れるようにしましょう。

参加者が集まったら、まずは担当者がプレゼンをします。その後、ポストイットなどを渡して、コメントしたい箇所にそれを貼っていってもらう時間を作ります。この時間は、話が散らからないコツです。

サイトマップのトップから、貼られたメモにしたがって議論を進めてクリアにしていきます。クリアにしたらホワイトボードにToDoをメモ書きしておき、最後に全体の写真を撮り、議事録とします。

必要な場合は、その会の参加者を揃えて写真を撮ることで、そこで議論されたこと、その場にいた人たちとのエビデンスとして残しておきましょう。

6. デザイン・コーディングへ

あとはコーディングへと移ります。コーディング担当の方へ、その議論で調整された内容を踏まえて指示出しをします（できればコーディング担当の方も、先のブレストの場から参加してもらった方が当事者意識や、リソース把握ができて、後々良いです）。

まとめ

今回はワイヤーフレームの一例として、Cacooを使ったWeb制作の進め方をご紹介しました。

今回紹介しきれていない機能もCaccoにはありますが、無料版をまずは使ってみて、ご自分のチームの運用に合うかをご検討ください。導入コストはCacooに限らず、いずれのツールでもかかってきますので、チーム運用に適うかの観点でまずは検討されることをオススメいたします。

このニュースを読んだあなたにオススメ

改めて知っておきたい、一般的なWebサイトのレイアウト6種類を解説
Webデザインに役立つ無料のツール・デザイン集まとめ
これだけ読めば大丈夫！デザインの基礎が学べる厳選5記事

このニュースに関連するカリキュラム

LPOとは

ランディングページとはユーザーが最初に見るホームページのことです。そのページは第一印象であり、その後のユーザーの行動にも大きく影響することは必至です。そのランディングページを最適化し、成果の最大化を目指すこと、それをランディングページ最適化＝LPO(Landing page optimization)といいます。