はじめに
本資料の目的
本資料は、Webサイト制作の初期段階で重要な「ワイヤーフレーム」について、基礎知識から実践的な作成手順、具体的なレイアウト例までを分かりやすくまとめたガイドです。制作の効率化と意思決定を助けることを目的としています。
対象読者
- Web制作の初心者や担当者
- デザイナーやディレクターと連携する開発者
- サイト構成を整理したいクライアント
具体例を交えて説明しますので、専門知識がなくても理解できます。
ワイヤーフレームの位置づけ
ワイヤーフレームは画面の骨組みです。色や細かいデザインではなく、要素の配置や優先順位を決めます。たとえば、ECサイトで「購入ボタンを目立たせる」「重要な情報を上部に置く」といった判断を行います。モックアップよりも簡素で早く作れるため、複数案を比較しやすい利点があります。
本資料で扱う範囲
- ワイヤーフレームの基本的な考え方
- 実際の作成手順（手順ごとのポイント）
- 代表的なレイアウトパターンと具体例
この章以降で順に解説します。
Webサイト制作におけるワイヤーフレームの基礎知識
ワイヤーフレームとは
ワイヤーフレームはWebページの設計図です。色や装飾を省き、要素の配置と情報の優先順位だけを示します。視覚デザインの前段階で、関係者の認識をそろえる目的で使います。
主な目的と役割
- ページ構造を可視化して理解を共有する
- ユーザーの導線（どこを見て、どこを押すか）を検討する
- 開発の見積もりや工数を決めるための素材にする
含めるべき要素（具体例付き）
- ヘッダー：ロゴと主なナビゲーション
- メインコンテンツ：見出し、本文、画像の位置
- サイドバー：関連リンクや補足情報
- フッター：連絡先や利用規約へのリンク
- CTA（行動喚起ボタン）：購入や問い合わせボタンの位置
特徴とメリット
色やフォントに迷わず、構造に集中できます。早い段階で問題点が見つかり、修正コストを下げられます。チーム間で合意を取りやすくなります。
注意点
あまり詳細にしすぎるとデザインの自由度を奪います。目的に応じて粗さ（低～高）を調整してください。ユーザー視点で情報の優先順位を常に確認することが重要です。
誰がいつ使うか
企画担当、デザイナー、開発者、クライアントが参照します。アイデア出し直後からデザイン作業に入る前までに作成すると効果的です。
ワイヤーフレームの作成手順（実践的なステップ）
1) プロジェクトの目的整理
まず「何を伝えるか」「どこに配置するか」「どのように表現するか（2W1H）」を明確にします。例：新商品の訴求なら、トップにビジュアルとCTA、詳細は下部に配置と決めます。目的を短い文でまとめ、優先順位を付けます。
2) ツール選定
初心者は紙やGoogleスプレッドシートから始めても問題ありません。Cacooはテンプレートとリアルタイム編集で協働に向き、Figmaは細かいデザイン移行がしやすいです。まずは使いやすさで選び、後で移行しても大丈夫です。
3) 構造設計（サイトマップ作成）
ページ一覧を作り、階層と動線を図式化します。トップ→カテゴリ→詳細の流れを線でつなぎ、ユーザーがどこから来てどこへ行くかを視覚化します。重要ページは何回クリックで到達するかも確認します。
4) コンテンツ配置（ワイヤーフレーム作成）
ページをヘッダー・メイン・サイドバー・フッターに分け、見出し・本文・画像・CTAの位置を決めます。スマホとPCの表示を想定し、レスポンシブの優先順（例：スマホ優先で縦積み）を設定します。プレースホルダを使い、実際の文字量も想定します。
5) 確認と修正
チェックリストで確認します：ナビの分かりやすさ、CTAの視認性、主要情報の優先度、レスポンシブ動作。関係者のフィードバックを取り、バージョン管理して修正を重ねます。小さなテスト（ユーザーにワイヤーを見せる）で気づきを得ると効果的です。
ワイヤーフレームのレイアウトパターンと具体例
シングルカラムレイアウト（例）
- 概要：縦にコンテンツを並べ、ファーストビューで注目を集めます。スマホ中心の設計で見やすさを重視します。
- 具体例：トップに大きなビジュアル、続いてサービス紹介、特徴、導入事例、CTA（問い合わせボタン）を縦に配置します。画面幅が広い場合は、下部を2カラムに切り替えて情報量を増やします。
- ポイント：閲覧の流れをコントロールしやすく、導線がシンプルです。
グリッドレイアウト（例）
- 概要：等間隔の枠でカードを並べるレイアウトです。商品一覧やギャラリーに向きます。
- 具体例：商品カードを3列グリッドで配置。カードにホバーで拡大や影のアニメーションを入れ、注目を促します。
- ポイント：視線を整えやすく、並び替えやフィルターUIと相性が良いです。
フルスクリーンレイアウト（例）
- 概要：画面全体を使いインパクトを出すレイアウトです。ビジュアルやメッセージを強く伝えます。
- 具体例：ファーストビューでフルスクリーン画像と大きなキャッチ、1つの明確なCTAを配置します。スクロールでセクションが切り替わる演出も有効です。
- ポイント：印象付けに強く、一つの行動に誘導したいランディングページに向きます。
ページタイプ別の選び方
- ホーム：シングルカラムを基調に重要情報を上にまとめます。
- ランディング：フルスクリーンで一つの訴求に集中します。
- カタログ・ギャラリー：グリッドで一覧性を優先します。
- ブログ：読みやすさ重視でシングルカラムを推奨します。
- ポートフォリオ：グリッドとフルスクリーンを組み合わせて作品を魅せます。
レイアウト決定のチェックリスト
- 目的は明確か（情報提供／販売／紹介）
- ユーザーの主要行動は何か（閲覧／購入／問い合わせ）
- 端末ごとの閲覧順は想定できているか
これらを基にワイヤーフレームに落とし込み、目的に合ったレイアウトを選んでください。
