目次
はじめに
本書の目的
本ドキュメントは、Webサイト制作の初期段階で迷わないための道しるべです。サイトマップやワイヤーフレームの作り方、各ページの役割や設計ポイント、そして具体例としてのAboutページの作り方をやさしく解説します。実務で使える実例を交え、手を動かしながら理解できる内容を目指します。
想定読者
- これからサイトを作る個人事業主や中小企業の担当者
- デザインや構成に悩むWeb制作者の初学者
- 既存サイトを改善したいコンテンツ担当者
専門用語は最小限にし、具体例で補足しますので初めての方にも読みやすい構成です。
本書の進め方
まず第2章で全体設計（サイトマップ・ワイヤーフレーム）の作り方を学びます。次に第3章で具体的なAboutページの設計と文章・デザイン例を示します。実際に紙やツールで描きながら進めると効果的です。
この章で得られること
本章を読むと、サイト制作の全体像と各章の学びどころがわかります。目的を明確にして計画的に進めることで、制作時間を短縮し、訪問者に伝わるサイトを作れます。
ホームページ構成図の作り方：サイトマップ・ワイヤーフレームの重要性
はじめに
ホームページ制作は構成を決めるところから始めます。サイトマップで全体像をつかみ、ワイヤーフレームで各ページの中身を整理します。手戻りを減らし、関係者の合意形成が早まります。
サイトマップ作成の4ステップ
- 必要なページを洗い出す
- 目的に沿って必要な情報や機能を箇条書きにします（例：トップ、サービス、料金、お問い合わせ）。
- グループ分け
- 関連するページをまとまりで分けます。ユーザーが探しやすくなります。
- 配置決定
- トップからの導線を意識してページを並べます。重要なページは目立つ位置にします。
- 階層決定
- メニュー構造を決めます。深すぎる階層は避け、2〜3階層に収めると親切です。
ワイヤーフレーム作成の4ステップ
- 必要情報を書き出す
- 各ページに載せる要素（見出し、本文、画像、CTAなど）を列挙します。
- 優先度付け
- 何を一番見せたいか決め、視線の流れを想定します。
- レイアウト決定
- 要素を上から下、左から右の順で配置し、スマホ表示も考えます。
- デザイン要素の配置
- 色や装飾は後回しにし、ボタンやリンクの位置を確定します。
実務的なポイント
- 紙とペンでのスケッチでも十分です。簡単な方が修正しやすいです。
- 関係者に早めに見せて意見を集めます。
- ページ数や階層はユーザー視点で判断します。
- 最初から完璧を目指さず、何度も改善してください。
魅せるAboutページの作り方：デザイン・書き方例とテンプレート
なぜAboutページが大切か
Aboutページは信頼を作る場所です。会社の目的や人となりを伝え、訪問者が次の行動を取りたくなるように導きます。
5つのストーリー要素（場面設定から始める）
- 場面設定（問題・背景）: 誰の何を解決するかを最初に示します。例：「忙しい人が短時間で栄養を摂れる食事を作るために」
- ミッション（目的）: なぜ存在するかを明確にします。例：「毎日の食事を楽に、美味しくすること」
- 解決策（ビジネスモデル）: 具体的なサービスや商品を説明します。具体例を添えると分かりやすいです。
- 実績・証拠: 数字や導入事例、受賞歴を載せます。信頼性が高まります。
- 人（創業者・チーム）: 写真と短いプロフィールで親近感を出します。
デザインのポイント
- ヒーロー写真で場面設定を見せる
- 見出しを短く、要点を箇条書きで示す
- 余白を十分に取り、読みやすくする
- CTAはページ上部と下部に配置する
書き方例とテンプレート
見出し: 私たちの使命
リード文: 「〇〇で困る人へ、△△を届けます」
本文: 問題→解決→実績→人→行動喚起
CTA: 「お問い合わせ」「導入事例を見る」
この流れをテンプレートに当てはめると、訪問者に分かりやすく伝わります。ぜひ実践してみてください。
