ワイヤーフレームとは
ワイヤー（線）によるフレーム（枠）。画面設計の把握に使います。サイトマップが情報の設計図なら、ワイヤーフレームは情報の配置図、見た目の設計図に相当します。
ワイヤーフレームを作る目的
- ページごとの情報配置を決めるため
- ユーザーがスムーズに目的情報にたどりつけるか確認するため
- デザインやサイト実装の指針を共有するため（制作者同士の共通言語）
制作手順
①対象ページを決める
- トップページ、次に主要下層ページなど
- WordPressなら、トップページ（フロント）、主要固定ページ、単一投稿ページなど
- サイトマップから主要コンテンツを抽出
②掲載する情報（要素）を洗い出す
- ページの目的から必要な要素をリスト化する
- 「トップページ」なら：メインビジュアル／お知らせ／○○紹介／アクセス…など
③情報の優先順位を決める
- 基本は、上から順に重要度の高いものが並ぶように
④レイアウトを考える
- FigmaやAdobeXDなどを使い構成図を描く
- 四角とテキストブロックを中心にする
- 共通ヘッダー・フッターの要素も入れる
- 「この配置にした理由」を欄外などにメモしておく
- WordPressであれば、どのブロックを使う予定なのかメモしておくと構築しやすい（カバー、ギャラリー、最新の投稿…など）
⑤ナビゲーションとリンクを考える
- 各ページへの遷移方法を考える
- FigmaやAdobeXDなら「プロトタイプ」モードで実際の画面遷移設定を行う
ワイヤーフレーム制作でよくある問題
- スマートフォン表示（もしくはデスクトップ表示）どちらしか想定されていない
- スマートフォン版、デスクトップ版、両方の案を作成しておく
- 見た目の装飾を重視してしまう
- 最初は色や装飾を使わず構造のみで描く
- 四角だけが並び、どんな内容が含まれているのかわからない
- 必要なテキスト情報は入力しておく
- サイトタイトルやナビゲーションなど決まっている情報を入れる
- 文章の文字数などが想定されていない
- ダミーテキストを挿入し、何文字程度の文章が入る想定のブロックなのかわかるようにしておく