目的・ターゲット・サイトマップを設計しよう【ホームページ制作入門 第2回】

シリーズ第2回は、コードを書く前の「設計」です。ここを飛ばすと、作ってから「何のためのサイトだっけ？」と迷います。紙とペンだけでできるので、気軽に進めましょう。

この連載では、練習用の題材として「小さな美容室のサイト」を例に進めます。自分で作りたいサイトがある方は、そちらに置き換えて読んでください。第4〜7回の作例も、この美容室サイトの一部として作っていきます。

ステップ1：サイトの目的を一文で決める

「このサイトで、誰に、何をしてほしいか」を一文にします。

• 例：地域の方に、美容室の予約をしてもらう
• 例：自分の制作実績を見せて、仕事の依頼をもらう
• 例：趣味の知識を発信して、読者に役立ててもらう

目的が決まると、載せる情報としばる情報の判断基準ができます。

ステップ2：ターゲット（想定する読者）を具体的にする

「みんな」に向けたサイトは、誰にも刺さりません。年齢・職業・困りごと・使う端末をざっくり書き出し、1人の人物像（ペルソナ）にします。

ステップ3：必要なページを洗い出す

ターゲットが知りたい情報を付せんに書き出し、ページ単位にまとめます。最初は次のような小さな構成で十分です。

• トップページ
• サービス・商品紹介
• プロフィール（会社概要）
• お問い合わせ

ステップ4：サイトマップを作る

洗い出したページを、階層の図にします。

トップ
├ サービス紹介
│  ├ メニュー・料金
│  └ よくある質問
├ プロフィール
└ お問い合わせ

階層は深くしすぎないのがコツです。あくまで目安ですが、トップから3クリック以内にすべてのページへたどり着けると使いやすくなります。ページ数が少ないうちは、あまり気にしすぎなくて大丈夫です。

なお、ここで作るサイトマップは「設計図」です。第9回で出てくる検索エンジン向けの sitemap.xml とは別のものです。

ステップ5：ワイヤーフレームを手書きする

ワイヤーフレームとは、ページの骨組みを描いた設計図のことです。色や写真は入れず、「ここに見出し」「ここに画像」「ここにボタン」と四角で描きます。手書きで十分です。

まとめと次回予告

目的・ターゲット・サイトマップ・ワイヤーフレームがそろえば、設計は完了です。次回は、サイトを公開するための土台である「ドメイン」と「サーバー」を準備します。