WordPress｜10章：サイト設計の考え方

前の章に戻る次の章に進む

10章：サイト設計の考え方

この章の目安学習時間：60分

この章で到達できるゴール

本章は、次の11章で見本サイトなしのゼロからのサイト制作に挑む前に、「何を・どの順番で考えるか」という設計の型を身につける準備パートです。
以下の状態になれば、この章はクリアとなります。

「誰のためのサイトか」「何のためのサイトか」を、思いつきではなく順番に沿って考えられ
サイトに必要なページと機能を、多すぎず少なすぎない形で選び出せる

【10-1】この章について

目安の学習時間：10分

8章・9章では、見本サイトと詳細な手順に沿ってサイトを完成させてきました。
11章では、この手順書がなくなります。

「何を作ればいいかわからない」となる原因は、操作方法を忘れたことではなく、サイトを作る前に考えるべきことを、順番ごと教わっていないことにあります。
この章では、実際のWeb制作の現場で使われている「考える順番」を、架空の「パン屋のサイト」を例にしながら身につけていきましょう。
11章では、この順番をそのまま自分のサイトに当てはめて使ってください。

ポイント

この章で扱う考え方は、①顧客・ユーザー理解／②価値発見・定義／③設計（情報設計・ワイヤーフレーム）／④機能選定の4つです。
どの考え方にも共通しているのは「まず洗い出す→次に絞り込む」という2ステップです。まずはこの型を覚えておきましょう。

【10-2】顧客・ユーザー理解の考え方

目安の学習時間：10分

サイトを作るとき、つい「いろんな人に見てもらいたい」と考えてしまいますが、これでは何を優先して伝えるべきか決まりません。
実務では、サイトを利用する可能性が高い層（ターゲットユーザー）を先に決め、そこからその代表的な1人の人物像（ペルソナ）を具体化する、という順番で考えます。

本格的なペルソナ作成では名前や趣味まで書き込みますが、この教材では次の3点に絞って考えれば十分です。

項目	パン屋サイトの例
年齢層・状況	30代、近隣に住む主婦・主夫。子どもの送り迎えの途中に立ち寄りたい
ニーズ	今日は何のパンが並んでいるかを事前に知りたい。アレルギー表示も気になる
サイトに来るきっかけ	SNSで見かけた、Googleマップで近くのパン屋を検索した

このように「年齢層・状況」「ニーズ」「来るきっかけ」の3点を書き出すだけで、後の章（ページ構成やデザイン）で迷ったときに立ち返る基準ができます。

ポイント

「誰でも」で考えてしまうと、後の工程すべてで判断がブレます。
まずは1人を思い浮かべましょう！

【10-3】価値発見・定義の考え方

目安の学習時間：15分

ビジネスニーズとユーザーニーズの両方を見る

サイトの目的を考えるときは、次の2つの視点を両方満たす必要があります。

視点	パン屋サイトの例
ビジネスニーズ（運営側が伝えたいこと）	新作パンを知ってほしい、来店のきっかけを増やしたい
ユーザーニーズ（訪問者が知りたいこと）	営業時間、定休日、今日のパンの種類、アレルギー情報

どちらか一方だけでは成立しません。
ビジネスニーズだけを追うと、宣伝ばかりで知りたい情報がないサイトになってしまいます。
反対にユーザーニーズだけを追うと、見るだけで来店につながらないサイトになってしまいます。
両方を並べて、重なるところを目的として定めましょう。

目的からページを逆算する

目的が決まったら、次の順番でページ構成に落とし込んでいきます。

目的を達成するために必要な情報を洗い出す（営業時間、パンの種類、店主の想い、アクセスなど）
洗い出した情報を、関連するものごとにグルーピングする（「パンの種類」と「アレルギー情報」は同じページにまとまる、など）
グループごとに1ページを割り当てる

ページ名	載せる情報
トップページ	お店の雰囲気、営業時間、最新情報
パン一覧	パンの種類、価格、アレルギー表示
お店について	店主の想い、こだわりの製法
アクセス	地図、駐車場情報、定休日

このように「目的→必要な情報→グルーピング→ページ」の順で考えると、ページ数も自然に決まります。
思いつきでページを増やすと、10-4で扱う「情報が埋もれる」問題につながるので気をつけましょう。

【10-4】設計（情報設計・ワイヤーフレーム）の考え方

目安の学習時間：15分

ワイヤーフレームとは、各ページの中で「何を・どこに・どのように配置するか」を表す設計図です。
11章では実際に手を動かして作成しますが、その前にここで「優先順位の決め方」を理解しておきましょう。

手順は次の4ステップです。

1. そのページに載せる情報を洗い出す（10-3で決めたグルーピング結果を使う）
2. 情報どうしの関連性でさらにグルーピングする
3. ターゲットユーザー（10-2で決めたペルソナ）にとって重要な順に並べ替える
4. その順序を、上から下への配置に落とし込む

ポイント
・初心者が最も陥りやすい失敗は「大事な情報を全部、画面の一番上（ファーストビュー）に詰め込んでしまう」ことです。
・パン屋サイトの例で言うと、新作情報・営業時間・店主のこだわり・SNSリンクを全部トップに並べてしまうと、結局どれも目に入らず、ペルソナが本当に知りたかった「今日のパンの種類」が下の方に埋もれてしまいます。
・10-2で決めたペルソナの「サイトに来るきっかけ」「ニーズ」に立ち返り、「この人が最初に見たいのは何か」を1つだけ選んで、ファーストビューに置くようにしましょう。

【10-5】機能選定の考え方

目安の学習時間：10分

8章・9章では、お問い合わせフォームやスライダーなど、あらかじめ指定された機能を実装してきました。
11章では、どの機能を使うかも自分で選びます。

機能を選ぶときは、次の3つの基準で「やる／やらない」を仕分けましょう。

基準	問いかけ
目的	10-3で決めた目的の達成に、本当に必要か
対象	10-2で決めたペルソナが、実際に使うか
運用	サイト公開後、自分（または運営者）が更新し続けられるか

「オンライン予約機能もつけたい」「多言語対応もしたい」など、機能はいくらでも思いつきます。
しかし機能を増やすほど、作る手間も、公開後の更新の手間も増えていきます。

11章のような小規模サイト（6ページ程度が目安）では、機能を絞り込んでシンプルに仕上げることが失敗しない一番の近道です。
「本当に必要か」を3つの基準で問い直し、迷ったら「やらない」を選びましょう。

【10-6】まとめ：11章のディレクションシートへの当てはめ方

目安の学習時間：5分

この章で扱った4つの考え方は、11章の架空サイトのディレクションシートの各項目にそのまま対応しています。

11章のディレクションシートの項目	この章で学んだ考え方
ターゲットユーザー	【10-2】顧客・ユーザー理解（年齢層・状況／ニーズ／来るきっかけ）
サイト名・概要（制作目的）	【10-3】価値発見・定義（ビジネスニーズとユーザーニーズ）
コンテンツ構成案（ページ構成）	【10-3】目的からページを逆算する手順
デザイン・トーン／ワイヤーフレーム	【10-4】情報設計（優先順位の4ステップ）
使用機能・設定方針	【10-5】機能選定（目的・対象・運用の3基準）

11章に進んだら、ディレクションシートを埋める前に、この章の各セクションを見返しながら「洗い出す→絞り込む」の手順を1つずつなぞってみてください。

これで【10章サイト設計の考え方】の解説を終わります。
お疲れ様でした！次の章では、いよいよこの考え方を使って架空サイトを作っていきましょう。

前の章に戻る次の章に進む