Webサイト制作などでワイヤーフレームを作成するにはベースとなる情報が重要です。
しかし、UI・UXデザイナーの多くは、情報を十分に収集しないまま作成に取り掛かってしまいます。これではせっかくワイヤーフレームを作っても、その効果を存分に得られません。
そこで本記事では、効果的なワイヤーフレームを作成するために必要な「情報の集め方」をステップ別にご紹介します。
目次
効果的なワイヤーフレームの作成方法
ワイヤーフレームとは、ウェブサイトや、サービス、アプリケーションの骨格となるフレームワークを指します。以下のような、プロジェクトの方向性を担う重要な役割を担います。
ワイヤーフレームとは成果品の基本構造や目的を確立するために、開発の初期段階でつくられます。完成したワイヤーフレームは、プロジェクトのビジュアルデザインと開発の基礎となります。（ワイヤーフレームガイドより）
効果的なワイヤーフレームを作成するためには「まずは重要なデータ収集から始め、詳細な分析をしてから初めてデザインに取り掛かる」という工程が初期段階に組み込まれている必要があります。
以下の3つのステップを参考にして、ワイヤーフレームを作るための「情報の集め方」と「分析の仕方」を学びましょう。
ステップ1.ステークホルダーから情報を集める
ステップ1.ステークホルダーから情報を集める
ワイヤーフレームを作成する前に、まずは顧客や社内のメンバーなどのステークホルダーから情報を集めましょう。このとき、ステークホルダーのニーズを熟知することを最優先の目的にします。
ステークホルダーを調査することで、定性的/定量的なデータを収集できます。これらのデータは誰に・何を伝えたいのかを明確にし、ワイヤーフレームの作成に役立ちます。
最初の調査がおろそかになってしまうと、あとから修正や手戻りが頻発して、時間の浪費につながります。これではワイヤーフレームの効果を得られません。正しい情報に基づいたワイヤーフレームを作ることは、プロジェクトを成功させるための一番の近道なのです。
効率的な調査方法はアンケートの実施ですが、他にも以下のような方法があります：
- 直接会ってインタビューをする
- 電話でインタビューをする
- Skype、Googleチャットで質問をする
- Eメールで質問をする
どの方法を選んでも、メモはしっかり取っておき、必要に応じて参照できるよう整理しましょう。詳細なメモを後から取りたい場合はボイスレコーダーを使うと便利です。
ヒント：情報収集に便利な方法
ステークホルダーにインタビューをする時は、相手のことを十分にリサーチして臨みましょう。以下のような情報源は相手をよく知るのに役立つかもしれません。
- 企業やブランド資料
- ソーシャルメディア
- マスメディア
- プレスリリース
- 利用者のレビューやコメント
- 競合他社（コンテンツ、検索ランキングなど）
集めた情報は、エクセルなどのシートにまとめましょう。引用文、ニュース、興味をそそるコンテンツなど、詳細情報はワード文書にリストアップします。このまとめ方は「コンテンツインベントリ」と呼ばれ、ステップ3で詳述します。
「情報収集にここまで時間をかけたくない」と思うかもしれませんが、インタビューの前にできる限りの調査と分析をすることで、より密度の濃い情報を得ることができます。
ヒント：インタビューの時の質問
十分な情報収集ができたら、いよいよインタビューです。インタビューをするときは、ワイヤーフレームを作る上で重要な以下の基本事項を尋ねましょう。
- SEOの目標設定
- ターゲット層
- ブランディングについて
- マーケティングについて
- デザインのトーン
- CTA（コールトゥアクション）
ステップ2.Webサイトを構成するツールをまとめる
ステップ2.Webサイトを構成するツールをまとめる
ステップ1は、ニーズや情報を獲得するためのアクションでしたが、ステップ2では、Webサイトの管理に必要なツールをご紹介します。
ステップ2とステップ3の一部は、ステップ1のステークホルダー調査と同時並行で実施できます。最終的にすべての情報がそろえば順序が入れ替わっても問題ありません。
ステップ2では、Webサイトを構成するために必要なデータを取得します。次に取得したデータをエクセルシートに反映します。大きなシート1枚にするか、シートごとに分けるかは問いませんが、具体的には以下のような見出しを作ります。
- ソーシャルメディア
- マーケティングツール
- CRM
- ドメイン情報
- アクセス解析ツール
このリストはステップ1でも作り始められます。完成したシートのリンクをフォローアップメールとしてステークホルダーに送ると、ミーティング後でも情報を追加しやすくなります。
万が一、プロパティの追加やプラットフォームへの移行が予定されている場合は、プランニングを確定させる前に確認しましょう。追加業務が発生することも考慮に入れた上で計画を立てます。
ヒント：獲得した検索キーワードを決める
もし余裕があれば、Googleアナリティクスを使って、ステップ1で集めたステークホルダーのニーズや情報を広げましょう。
例えば、Webサイトで獲得したい検索キーワードの分析や、ターゲット層が頻繁に利用しているキーワードの検索順位などが挙げられます。
ステップ3.コンテンツインベントリを作る
ステップ3.コンテンツインベントリを作る
他のWebページなどの既存コンテンツがあれば、コンテンツインベントリ（Webサイト内ページ一覧表）を作成しましょう。
ステップ3は時間がかかりますが、長期的なマーケティング、ブランディングで効力を発揮します。既存のWebページやブログ記事などを詳細にまとめることで、ブランドの方向性が確立され、新しいデザインを創造できます。
コンテンツインベントリは、エクセルを使って作成しましょう。以下のステップで作ってみましょう。
- 既存ページ（コンテンツ）をリストアップする
- ブログ記事や画像素材を分析・収集する
- ハイパーリンクの有無（※ある場合はリンクを記載）
- 見出しタグの記入（h1/h2/h3など）
- アンカーテキストの記入
以上の情報をまとめたコンテンツインベントリができたら、じっくり目を通し、改訂が必要な箇所を探します。現行のインベントリに変更を加えていく方法もあれば、1から作り直す方法もあります。
コンテンツインベントリが完成したら、ブランディングガイドの1つとして活用しましょう。表面的なデザインだけでなく、コンテンツの配置まで踏まえた階層構造が明示できたので、これを使ってデザインとレイアウトを調整します。
まとめ
本記事でご紹介した3つのステップに時間を割くことで、ステークホルダーのニーズを網羅したワイヤーフレームを作成できます。
準備に時間がかかりますが、結果としてプロジェクトの手戻りが減り、ステークホルダーの要求を現実的に満たすことができます。より良いブランディングにつなげるためにも、まずはデザインに必要なあらゆる情報を収集しましょう。
