今回はワイヤーフレームの作り方について解説していきます。
ワイヤーフレームは今後の制作がスムーズに進行するかが決定する非常に重要な工程です。
順番としては、「サイトマップ」→「TOPページ」→「下層ページ」に移っていきます。
順番に見ていきましょう！
サイトマップ
まずは必要なページを洗い出す工程になります。
とは言ったものの、必要なページを洗い出すことすら最初は難しいと思うので、参考サイトをいくつか見つけておくようにしましょう。
参考サイトもただ似たようなサイトを探してくるのではなく、
- 事業年数
- 市場規模
- 従業員数
- 店舗数
- 地域
- ターゲット層(ペルソナ含む)
- 企業理念
- 強み・セールスポイント
など、どこに共通点があって相違点があるのかなども踏まえた上で比較できるようになると、サイト設計の上で必要な情報を集められるようになるので、意識してサイトを見てみるといいと思います。
とは言ったものの、サイトの目的によっては変わりますが、おおまかな型自体は決まっています。
サイトマップを作る際に「どうしてこのような構成にしてあるのか」を意識できると、レベルアップができるかと思います。
TOPページ
サイトマップが決まったら、TOPページのワイヤーフレームを作成していきます。
その際、最も皆さんが悩むのが「キービジュアル(以下KVと表記)」の部分になるかと思います。
今回はKVにスポットを当てて、ワイヤーの制作の言及をしていこうと思います。
KVの作りかた
KVは主に以下の項目で構成されることが多いです。
- キャッチコピー
- サブコピー
- KV用画像素材
- CTA(必要であれば)
最低限以上の項目を必要とします。
特にキャッチコピーはサイトを訪れたターゲットに対し、瞬時に「自分のことだ」と感じてもらう必要があるため非常に重要な項目と言えます。
また、自分ごと貸してもらいつつも「ベネフィット」を感じてもらえる文言につする必要性があります。
KVはサイトに訪れた際に一番最初に目にする画面です。
ここが固まることで、それ以降のセクションがスムーズに決まる要因にもなりますので、時間をしっかりかけて作っていくようにしましょう！
下層ページ
TOPが定ったら下層ページの構成に入ります。
基本的にはTOPページで配置したセクションで、詳細が必要な項目などを設置していきます。
下層ページを作る際も、必要なページは全て洗い出し要件定義しましょう。
どこまで作り込めばいいのか
結論：色以外の要素は基本的に作り込むのが理想
私はワイヤーフレームを製作する際には、基本的にすべての要件が固まった状態でデザイナーさんに依頼するように心がけています。
理由は、修正が発生することで余計なリソースと時間が割かれ、結果的に効率が落ちるのを防ぐためです。
そのためには、テキストはもちろんコンセプトやフォント、どのような画像を入れ込むのかといった細かい要素まである程度イメージが湧いた状態まで持っていくことが重要になります。
突き詰めればキリがないと言えばそうなのですが、原則として現場がスムーズに回ることが非常に重要ですし、クライアントとクリエイターがどれだけ楽に作業できるかを意識することでコミュニケーションコストの削減にも繋がります。
より質の高いコミュニケーションを行うためにも、ワイヤーフレームの完成度は高いに越したことはありません。
ワイヤーといえど、なるべく作り込んでいくことを意識していきましょう！
