はじめに
図解で伝える価値
ホームページの全体像を図で示すと、言葉だけよりもずっと早く伝わります。視覚で理解できるため、関係者の認識合わせや作業の優先順位付けが楽になります。例えば、誰がどのページを担当するかを決めるとき、図があると判断が速くなります。
サイトマップとワイヤーフレームの役割
サイトマップはサイト全体の構造図です。ページ同士の関係やナビゲーションの流れを示します。ワイヤーフレームは各ページのレイアウト図で、見出しや主要なコンテンツの配置を図で表します。この二つを押さえると、設計と制作が効率的になります。
具体例：小さなオンラインショップ
例として、トップ→商品一覧→商品詳細→カート→購入完了、という流れをサイトマップにします。ワイヤーフレームでは、商品一覧ページに「商品画像」「価格」「絞り込みの欄」「カートへボタン」を配置するといった具合です。図にすると抜けや重複に気付きやすくなります。
誰が使うと良いか
企画者、デザイナー、開発者、社内の意思決定者など、関係者全員に役立ちます。特に関係者が複数いるプロジェクトでは、言葉の行き違いを防げます。
本シリーズの進め方
この章では概念を説明しました。次章以降で、図解に向いた考え方、サイトマップの作り方、ワイヤーフレームの作り方、ツール例、図解を「らしく」見せるコツを順に解説します。実務で使える手順を中心に進めます。
図解に向いたホームページの考え方
はじめに
まず「誰に何をしてほしいサイトか」を一言で決めます。例：「新規見込み客に資料請求してほしい」「商品を購入してほしい」など。目的が明確になると設計がぐっと楽になります。
1．ゴールを一言で決める
・ターゲット（誰に）と行動（何をしてほしいか）を短く書きます。
・具体例：法人向けに無料相談を申し込ませる、個人向けに初回購入を促す。
2．ユーザーの起点を想定する
・検索、広告、SNS、既存顧客など入口を想定します。
・入口ごとに期待するユーザーの温度（情報量の許容）を考えます。
3．トップからゴールまでを矢印でつなぐ
・トップ→導線（CTAや目立つ案内）→詳細ページ→申込フォーム→完了、という流れを矢印で描きます。
・分岐（FAQへ、比較表へ）や戻る動作も矢印で表現します。
・各矢印にユーザーの行動を短い動詞で書くと分かりやすいです（例：詳細を見る、申し込む）。
4．実務的なポイント
・ステップは3〜5に絞ると離脱が減ります。
・CTAは明確で目立たせる。文言は具体的に。
・モバイルでの動線を先に考える。
・計測ポイント（クリック、遷移）を図に入れて効果測定をしやすくします。
5．よくある落とし穴と対処法
・情報を詰め込みすぎてゴールが分かりにくい→優先度の低い要素は削る。
・導線が複雑→主要な行動だけ残して矢印を整理する。
図解は設計の共通言語になります。まずはシンプルな一枚図から始め、実際のデータで改善していってください。
サイトマップ（構成図）の作り方
はじめに
サイトマップはページの設計図です。トップページを一番上に置き、主要メニューをその下にツリー状で並べると全体像が伝わりやすくなります。例として「会社概要」「サービス」「料金」「お問い合わせ」を並べ、必要に応じて「サービス」→「サービスA」「サービスB」と枝分かれさせます。
基本構造
- 第1階層：トップページ
- 第2階層：会社概要、サービス、料金、お問い合わせなど主要メニュー
- 第3階層：サービスA、サービスB、よくある質問、導入事例など
作り方（ステップ）
- 目的を明確にする（例：資料請求を増やす）
- 主要メニューを洗い出す
- ユーザーの行動を想像して階層化する（優先度の高いページを上に）
- 子ページを必要最小限に分ける（3階層以内が目安）
- 関係者と確認して調整する
作るときのポイント
- ラベルは短く具体的に（「サービス一覧」より「サービスA・B」）
- URL設計を意識する（/services/a のように階層と一致させる）
- 同じ内容を重複させない
よくあるミスと対処
- ページが深くなりすぎる：主要コンテンツを上に上げる
- メニュー名が抽象的すぎる：具体例を入れて分かりやすくする
以上の流れでサイトマップを作ると、設計や制作がスムーズになります。
ワイヤーフレーム（ページ図解）の作り方
概要
1ページ分を長方形で描き、上から「ヘッダー」「メインビジュアル」「サービス紹介」「実績・お客様の声」「フッター」のようにブロックで分けます。文字や写真は入れず、「何を伝えるか」だけを書き込む設計図にします。
作り方ステップ
- キャンバスを用意：A4や画面比率の矩形を描きます。手描きでもOKです。
- ブロック分け：上から順に主要な領域を大まかに分けます。視線の流れを意識してください。
- 目的を書く：各ブロックに「伝えたいこと」を短く書きます（例：「主サービスの強み」「申し込み導線」）。
- 優先順位と導線：ボタンやリンクの位置と主な導線を矢印で示します。
- 注釈をつける：想定する写真の種類や文字量の目安をメモします。
ブロック別の書き方（具体例）
- ヘッダー：ロゴ、主要メニュー、問い合わせボタンの有無を書きます。
- メインビジュアル：キャッチコピーと主要CTA（例：申し込み）を明記します。
- サービス紹介：3つ前後の見出しと短い要点を書きます。
- 実績・声：写真の有無、短い引用例、件数表示をメモします。
- フッター：連絡先、SNSリンク、著作表記を記します。
注意点とコツ
- 文字や画像の細部にこだわらず、情報の優先順位を明確にします。
- モバイルを先に考えると無駄が減ります。
- 手描きでスピード重視→デジタルで清書の流れをおすすめします。
図解を作るときのツール例
図解を作るときは目的と工程に合わせて道具を使い分けると効率が上がります。ここでは代表的なツールと使いどころを分かりやすく紹介します。
紙＋ペン
ラフを素早く描くときに最適です。線や矢印で思考を整理し、付箋で要素を動かすと構成を検討しやすくなります。スマホで撮影すれば共有も簡単です。
スライドソフト（PowerPoint / Keynote / Googleスライド）
図形とテキストで木構造やレイアウト図を簡単に作れます。配置やサイズ調整が直感的で、PDFや画像で出力しやすい点が便利です。
オンラインのマインドマップ・フローチャート（例：MindMeister、XMind、diagrams.net、Lucidchart、Miro）
サイトマップの清書や共同編集に向きます。自動レイアウトで見た目を整えやすく、リンクやノートを付けられるものが多いです。
デザイン系ツール（Figma、Canva、Adobe XD）
仕上げや画面単位の図解に向きます。コンポーネント再利用や細かいビジュアル調整が可能ですが、学習がやや必要です。
アイコン・画像素材
統一感のあるアイコンは図解の見やすさを高めます。Noun Project、unDraw、Unsplashなどの素材を活用しましょう。
選び方のポイント
スピード重視は紙＋スライド、共同作業や清書はオンラインツール、最終ビジュアルはデザインツールを使うと効果的です。普通はラフ→清書→仕上げの流れで進めると作業がスムーズです。
「図解」らしく見せるコツ
1. 視覚の優先順位をはっきりさせる
重要な要素ほど大きく、色も目立たせます。例：CTAは大きめのボタンでアクセントカラー、補助情報は小さくグレーで表現します。
2. 色数を絞る
全体は1〜2色＋グレーに抑えます。色を絞ると情報が整理され、見る人が迷いません。アクセントは1色に限定すると効果的です。
3. 余白をたっぷり取る
要素同士の間に十分な余白を確保します。余白があるとつながりが分かりやすくなり、読みやすさが向上します。
4. 線や矢印はシンプルに
線は細め、矢印は先を小さくしてシンプルにします。太さや矢印の有無で優先度を表現できます。直線や滑らかな曲線を基本にします。
5. 一貫した形と配置
同じ種類の要素は同じ形とサイズに揃えます。整列とグループ化で関連性を示します。
6. 読みやすいラベルとアイコン
短い言葉で要点を示し、必要ならアイコンで補助します。フォントは読みやすさ重視で、見出しと本文はサイズ差を付けます。
7. コントラストと焦点作り
背景と文字のコントラストを確保し、視線を誘導するために一箇所だけ強い色や大きさを使います。
8. 小さな例
・重要な流れは太い矢印とアクセント色で表示
・補助情報は薄いグレーの枠でまとめる
チェックリスト：色は2色＋グレー、余白十分、線はシンプル、重要度を大きさで表現。これらを守ると「図解」らしさが自然に出ます。
