この章では、ワイヤーフレームの考え方を学びます。
ワイヤーフレームは、色や細かな装飾を入れる前に、情報の配置を整理するためのものです。
いきなり完成デザインを作るのではなく、まずページの骨組みを作ることで、情報の流れや導線を確認しやすくなります。
ワイヤーフレームとは
ワイヤーフレームとは、Webページの配置を簡単に示した設計図です。
見出し、本文、画像、ボタン、ナビゲーションなどを、どこに置くかを整理します。
この段階では、次のような細かい装飾はまだ決めません。
- 正確な色
- 細かな影
- イラストの雰囲気
- アイコンの形
- アニメーション
- 装飾的な背景
まずは、ページの構成と情報の優先順位を確認します。
なぜワイヤーフレームを作るのか
ワイヤーフレームを作る理由は、見た目を作る前に情報の流れを確認するためです。
いきなりデザインを作ると、色や画像に意識が向きすぎて、情報の順番や導線の問題に気づきにくくなります。
ワイヤーフレームでは、次のことを確認します。
- 必要な情報が入っているか
- 情報の順番が自然か
- セクションの役割が明確か
- ボタンやリンクの位置が自然か
- 重要な情報が埋もれていないか
- PCとスマホで見せ方に無理がないか
装飾前に確認することで、後から大きく作り直すリスクを減らせます。
ワイヤーフレームに入れるもの
ワイヤーフレームには、ページに必要な要素を配置します。
たとえば、次のようなものです。
- ヘッダー
- ナビゲーション
- メインビジュアル
- 見出し
- 本文
- 画像
- ボタン
- カード
- フォーム
- フッター
実際の文章をすべて入れる必要はありません。
ただし、見出しやボタン文言など、重要なテキストは仮でも入れておくと確認しやすくなります。
テキスト量を想定する
ワイヤーフレームでは、テキスト量もある程度想定します。
本文が1行なのか、3行なのか、10行なのかで、レイアウトは変わります。
仮テキストだけで作ると、実際の文章を入れた時に崩れることがあります。
次のような点を確認します。
- 見出しが長くなっても入るか
- カードの本文量が増えても崩れないか
- ボタン文言が長くなっても問題ないか
- スマホで文章が詰まりすぎないか
- 画像とテキストの高さが不自然にならないか
テキスト量は、デザインと実装の両方に影響します。
PCとスマホを分けて考える
ワイヤーフレームでは、PCだけでなくスマホも考えます。
PCで横並びにしている要素は、スマホでは縦に並ぶことが多いです。
ただし、単純に左から右の順番を縦にするだけでよいとは限りません。
スマホでは、次のことを確認します。
- 重要な情報が上に来ているか
- ボタンが押しやすいか
- 画像が大きすぎないか
- セクション間の余白が広すぎないか
- ナビゲーションが使いやすいか
- フォーム入力がしやすいか
スマホで見た時に、読み進める流れが自然かを確認します。
ラフで十分
ワイヤーフレームは、最初からきれいに作る必要はありません。
手書きでも、Figmaでも、テキストだけでも構いません。
大切なのは、情報の配置と流れを確認できることです。
たとえば、次のような簡単なメモでも始められます。
ヘッダー
- ロゴ
- ナビ
- 予約ボタン
ファーストビュー
- キャッチコピー
- 説明文
- メイン画像
- 予約ボタン
特徴
- 見出し
- 3つのカード
メニュー
- 料金表
- 詳細ページへのリンク
アクセス
- 地図
- 営業時間
- 住所最初は、ざっくりした配置で問題ありません。
目的に合っているか確認する
ワイヤーフレームを作ったら、ページの目的に合っているか確認します。
たとえば、予約してもらうことが目的なら、予約導線が見つけやすいかを確認します。
サービス内容を理解してもらうことが目的なら、説明の順番が自然かを確認します。
確認したい項目は次の通りです。
- 最初に何のページかわかるか
- 重要な情報が上にあるか
- セクションの順番が自然か
- ボタンの位置が自然か
- 不安を減らす情報が入っているか
- 読み終わった後の行動が明確か
よくある失敗
ワイヤーフレームでよくある失敗は、次の通りです。
- いきなり色や画像にこだわりすぎる
- PCだけ作ってスマホを考えていない
- ボタンの位置が目的と合っていない
- 情報が多すぎて優先順位がない
- 実際のテキスト量を想定していない
- セクションごとの役割が曖昧
ワイヤーフレームは、完成デザインではありません。
情報を整理するための途中段階として使います。
この章のまとめ
- ワイヤーフレームは、装飾前に情報の配置を整理する設計図
- 見出し、本文、画像、ボタン、フォームなどの位置を確認する
- PCだけでなくスマホでの流れも考える
- テキスト量やボタン文言の長さも想定する
- 次の章では、配置を整えるためのレイアウトの基本を学ぶ