はじめに
目的
本書は、WebサイトやWebサービスの設計・改善で役立つ「図」の種類と使い方をわかりやすくまとめたガイドです。構成図、サイトマップ、キーワードマップ、ワイヤーフレーム、システム構成図などを取り上げ、実務で使える具体例と作成のコツを紹介します。
誰のために
・サイト制作やリニューアルを行うディレクター、マーケター
・コンテンツづくりやSEOに関わる編集者
・開発や運用を担当するエンジニア
図を使えば、情報共有が早くなり、ミスや手戻りを減らせます。
本書の読み方
各章は図の目的、作り方、活用例とおすすめツールを順に解説します。まずは自分の課題（例：ページ構成の見直し、検索流入の改善、システム要件の整理）を決め、その課題に合う図から読み進めてください。
図が役立つ場面（例）
・関係者へ仕様を伝えるとき（ワイヤーフレーム、構成図）
・SEO施策の設計（キーワードマップ、サイトマップ）
・開発の範囲を明確にする（システム構成図）
本書で期待できること
実践的なテンプレートと作成手順を通して、設計の効率化とチーム内の共有を助けます。読み終えるころには、どの図をいつ使えばよいかが明確になります。
Web図（構成図）とは？基本の役割とメリット
1. Web図とは
Web図は、Webサイトやサービスの構成や設計、情報の流れを視覚化した図の総称です。言葉だけで説明するより早く全体像を共有できます。たとえば、サイトのページ構成を箱で示したり、サーバー同士の接続を線で表したりします。
2. 主な種類と具体例
- サイトマップ：サイト全体の“地図”です。トップ→カテゴリ→個別ページの階層を示します。制作前の設計やリニューアルで使います。
- ワイヤーフレーム：ページごとのレイアウト設計図です。見出しやボタンの配置を簡単な枠で表し、実装前の共有に便利です。
- キーワードマップ：狙うキーワードとページの関係を整理します。SEOやコンテンツ設計に役立ちます。
- システム構成図：サーバーやDB、APIのつながりを示します。開発や障害対応で重宝します。
3. 基本の役割とメリット
- 導線設計が明確になる：ユーザーの動きを予測しやすくなります。
- 作業効率が上がる：担当間で認識齟齬が減り、無駄な手戻りを減らせます。
- 情報の重複を防げる：どのページが何を担うか整理できます。
- 資料として残せる：リニューアル時や引継ぎで役立ちます。
4. 作成のポイント
まずは粗い図から作り、関係者と一緒にブラッシュアップします。ツールは紙でもOK、後で図を更新しやすい形式にすると便利です。
サイトマップ・Web構成図の種類と作り方
概要
サイトマップはサイト全体の地図です。訪問者向けのHTMLサイトマップと、検索エンジン向けのXMLサイトマップの二種類が基本です。設計段階で作るとページ構成や導線の抜けを防げます。
サイトマップの種類
- HTMLサイトマップ：ユーザーが目的のページを探すための一覧です。例）カテゴリ一覧、重要ページへのリンク。見やすさを優先します。
- XMLサイトマップ：検索エンジンにページの存在や更新頻度を伝えるファイルです。URL、更新日、優先度などを記述します。
作り方（手順）
- 目的とターゲットを明確にする（例：商品を売りたい、情報を集めたい）。
- 大カテゴリ→中カテゴリ→個別ページの階層を紙やツールで整理する。
- 各ページの役割（例：商品詳細、問い合わせ）を決める。
- 重複ページをまとめ、同じ情報が複数ないか確認する。
- ユーザー導線をチェックして、重要ページまでのクリック回数を減らす。
- HTMLは見やすく、XMLは自動生成ツールで正確に作る。
実践のコツ
- 初回は手書きでも構いません。関係者と早めに共有して認識を合わせましょう。
- リニューアル時は旧サイトのアクセスデータを参考に不要ページを整理します。
- 更新頻度に応じてXMLの情報を更新すると検索に有利です。
注意点
ユーザー向けと検索エンジン向けで目的が異なる点を意識して作成してください。
キーワードマップとは？SEO・コンテンツ設計に役立つ図
キーワードマップの説明
キーワードマップは、狙うべきキーワードを地図のように可視化した図です。中央にメインキーワードを置き、関連するサブキーワードや詳細キーワードを線でつなぎます。関係性が一目で分かり、コンテンツ設計に使いやすいのが特徴です。
利点（何に役立つか）
- 情報整理：どのキーワードをどのページで扱うか明確になります。
- 専門性の強化：関連する語をまとめることでテーマの深掘りができます。
- 内部施策の最適化：内部リンクや見出しの設計に役立ちます。
- 重複回避：同じキーワードで複数ページが競合するのを防げます。
作成手順（簡単なステップ）
- メインキーワードを決める（例：「コーヒー豆」）。
- 関連キーワードを集める（サジェスト、関連検索、ツールを活用）。
- 意図やテーマごとにグループ化する（種類、保存、レシピ等）。
- 図に配置する：中心→サブ→詳細の順で枝分かれさせる。
- ページ設計へ落とし込む：各グループを1ページまたはセクションに割り当てます。
実例（短く）
メイン「コーヒー豆」→ サブ「焙煎」「保存」「レシピ」→ 詳細「浅煎りの特徴」「保存方法 真空」「フレンチプレス レシピ」など。
注意点と活用のコツ
- キーワードを詰め込みすぎないこと。読者の理解を優先します。
- グループが大きすぎると混乱します。必要に応じてサブマップを作成してください。
- 作成後も検索傾向や自社サイトの成果に合わせて更新しましょう。
ツール例（軽く紹介）
- マインドマップツール（XMind、MindMeister）やホワイトボードツール（Miro）。
- スプレッドシートで一覧化してから図にする方法も実用的です。
ワイヤーフレームとWebページ設計図
ワイヤーフレームとは
ワイヤーフレームは、Webページやアプリの設計図です。画像やテキスト、ボタンの位置を枠で示し、見た目ではなく構成と操作を可視化します。紙でもデジタルでも作成できます。
なぜ必要か（役割）
目的や優先情報を明確にします。デザイナーや開発者、クライアントの認識を揃え、実装の指針になります。ユーザーフローやサイトマップと連携すると使いやすさが高まります。
基本的な作り方（ステップ）
- 目的と主要ゴールを決めます。例：問い合わせを増やす、商品を売る。
- 表示すべき要素をリスト化します（見出し、本文、画像、CTAなど）。
- 台割り（レイアウト）を描き、優先度の高い要素を上位に配置します。
- クリックや遷移の動きを注釈で書き込みます。
- 関係者に見せてフィードバックを反映します。
具体例（簡単な例）
- トップページ：ロゴ、主要ナビ、ヒーロー画像、サービス紹介、CTA。
- 商品ページ：商品画像、価格、説明、カートボタン、関連商品。
- 問い合わせページ：入力フォーム、連絡先、送信ボタン。
作成時のポイント
- 優先順位を明確にして情報量を絞ります。
- スマホとPCの両方で表示を考えます（レスポンシブ）。
- インタラクションは注釈で補足し、誤解を減らします。
- 紙で手早く試作してからツールで整えると効率的です。
注意点
ワイヤーフレームは最終デザインではありません。見た目に迷わされず、使いやすさと目的達成を優先して作成してください。
Webシステム構成図とは？開発・運用に不可欠な図解
概要
Webシステム構成図は、サービスを支えるサーバーやネットワーク、データベース、外部連携などを一枚の図で表したものです。チームで共通認識を作り、障害対応や設計変更を速く正確にします。
主な構成要素（具体例つき）
- クラウド／オンプレ環境：AWSやGCPの仮想ネットワーク、データセンター
- Web層：ロードバランサー＋Webサーバー（例：Nginx）
- アプリ層：アプリケーションサーバーやコンテナ（例：Docker、Kubernetes）
- データ層：リレーショナルDBやNoSQL、レプリケーション構成
- キャッシュ／CDN：レスポンス高速化のためのRedisやCDN
- ネットワーク機器とセキュリティ：ファイアウォール、VPN、WAF
- 監視・ログ：監視ツール、ログ収集、アラート経路
開発・運用での使いどころ
- 新規設計の方針決定や要件定義で全体像を提示します
- 障害時は通信経路や依存関係をたどり、原因切り分けを早めます
- スケール計画やコスト見積もりの根拠資料として使えます
作成時のポイント
- レイヤー（ネットワーク／アプリ／データ）で整理する
- 重要な依存関係とデータフローを矢印で明示する
- ポート番号やプロトコル、冗長構成は簡潔に注記する
- 誰が見ても分かる命名と凡例を付ける
図の運用と更新のコツ
- バージョン管理を行い変更履歴を残す
- 設計レビューや運用手順に図を組み込む
- 定期的に実環境と突合して差分を修正する
こうした図を用いると、設計の精度が上がり運用負荷が下がります。初期作成は簡潔に始め、実運用で少しずつ精度を高めるのがお勧めです。
画像検索やWeb用画像フォーマットに関する図
画像検索とは
画像検索は、キーワードで画像を探す方法と、画像そのもので類似画像を探す「リバース画像検索」があります。例：キーワードで風景写真を探す／撮影した写真から類似の出典を調べる。
活用のポイント
- キーワード検索：検索ワードやフィルタ（色・サイズ・ライセンス）を使うと効率的です。
- リバース検索：画像の出所や類似デザイン、盗用チェックに役立ちます。
- 著作権：商用利用時は必ずライセンスを確認してください。
Web用画像フォーマット（簡単な使い分け）
- JPEG：写真向け。高圧縮で画質と容量のバランスが良い。
- PNG：透過が必要な画像やロゴに最適。ただしファイルサイズは大きめ。
- GIF：短いアニメに向くが色数が少ない。
- WebP：JPEG・PNGより高圧縮で画質を保ちやすく、Web表示が速くなります。
- AVIF：さらに高圧縮だが対応状況を確認する必要があります。
- SVG：アイコンやロゴに最適。拡大しても劣化しません。
図にするときの要素（設計図の例）
- フォーマットごとの用途と長所・短所を並べる
- 推奨使用箇所（サムネ・アイコン・背景など）を示す
- 容量の比較例（同じ画像での圧縮率）を数値で入れる
- ブラウザ対応や代替フォーマット（フォールバック）を明示する
図にすれば、デザイナーや開発者が使い分けをすぐに理解できます。丁寧に注記をつけると運用で迷いにくくなります。
Web図作成におすすめのツール・サービス
構成図・サイトマップ
- XMind：直感的なマインドマップで階層を整理できます。例：サイトのページ構成を俯瞰する時に便利です。
- MindMeister：オンラインで共同編集できます。チームでのブレストに向いています。
キーワードマップ・SEO分析
- Keywordmap：検索ボリュームや関連語を可視化できます。コンテンツ設計の骨組みに使えます。
- ラッコキーワード：関連キーワードの抽出が簡単です。短時間で候補を増やせます。
ワイヤーフレーム
- Adobe XD：デザインとプロトタイプ制作に強みがあります。実際の画面遷移も試せます。
- Figma：ブラウザで共同編集が可能です。デザインと開発の連携がスムーズになります。
- Balsamiq：手書き風の簡単ワイヤーフレームが作れます。初期設計に向いています。
システム構成図
- draw.io（diagrams.net）：無料で豊富な図形を使えます。システム構成やネットワーク図に便利です。
- Lucidchart：チーム向けの高機能ツールで、複雑な図も整理しやすいです。
共通の使い方のコツ
- テンプレートを活用して作業を速めます。
- 共有設定とエクスポート形式（PNG/PDF/SVG）を確認しておきます。
- 目的に合ったツールを選び、小さな図から始めて徐々に詳細化してください。
まとめ：Web図を活用して設計・改善を効率化しよう
要点の振り返り
- Web図は目的別に使い分けることで有効に機能します。サイト設計はサイトマップやワイヤーフレーム、SEOにはキーワードマップ、開発にはシステム構成図が役立ちます。
実践チェックリスト
- 目的を明確にする：何を伝えたいか決める
- 関係者と共有する：認識をそろえる
- 版管理をする：更新履歴を残す
- 小さく作って試す：段階的に改善する
ツールと運用のコツ
- 図は簡潔にする：重要な情報だけ載せる
- テンプレートを用意する：再利用で工数を減らす
- フィードバックを早く回す：実務での齟齬を減らす
継続的改善のすすめ
図は一度作って終わりではありません。運用中に得たデータや声を元に更新し、設計やコンテンツを改善してください。定期的な見直しが、品質と成果の向上につながります。
