ー おすすめの記事 ー

SWELL購入から使い始めるまでの全レビュー!
迷ったけれど、やっぱり選んで良かった

SWELL導入前に知りたいデメリット!
後悔しないための注意点まとめ


「AIにデザインを頼んだら、きれいなページが出てきた。でも、何のページを作ればいいのか分からない」
「サイトを作ってから何年か経って、どのページが生きているのか自分でも分からない」
こんにちは、Web制作フリーランスのジューンです。どちらも、構成表を1枚作ると見えてきます。
結論から言うと、デザインより先に「サイト構成表」を作ります。どのページに何を載せて、読んだ人に次はどこへ行ってほしいか。これを表にしておくだけです。
新しく作るサイトにも、すでにあるサイトにも使えます。今回は、私が自分で運営しているヨガサロンのサイトで試した結果もお見せします。
Excelでも、Googleスプレッドシートでも、紙でも作れます。

サイト構成表は、以下の5列で作成できます。
| 列 | 書くこと |
|---|---|
| ページ | ページの名前 |
| URL | 決まっていなければ空欄でOK |
| このページの目的 | 来た人に何をしてほしいか、1行で |
| 載せるもの | 料金・地図・写真など、中身の一覧 |
| 次にどこへ | 読み終わった人に、次に押してほしいボタン |
この中で一番大事なのは、最後の「次にどこへ」です。
実際の表から、主なページを抜き出しました。
| ページ | このページの目的 | 次にどこへ |
|---|---|---|
| トップ | どんなサロンか30秒で伝える | 体験レッスン、公式LINE |
| 体験レッスン | はじめての人が申し込む | 公式LINE |
| 継続レッスン | 続けたい人が回数券を選ぶ | 公式LINE |
| 少人数クラス | クラスを希望する人が選ぶ | 公式LINE |
| アクセス | 場所と行き方を確認する | 体験レッスン |

並べてみると、行き先がほとんど「公式LINE」に揃っていました。このサイトの仕事は、LINEから体験レッスンを申し込んでもらうこと。表にして、はじめて言葉になりました。
ここが決まると、AIにデザインを頼んだときの見方が変わります。「きれいかどうか」ではなく、「LINEのボタンが、読み終わったところにあるか」で見られるようになります。
構成表で一番大事なのは「次にどこへ」の列です。ここが揃うと、サイトの目的が1つに決まります。
\ 選ばれているから、初心者でも安心 /
構成表は、これから作るサイトのためだけのものではありません。すでにあるサイトで作ると、いらないページが見えてきます。
今回、私のヨガサロンの点検で使ってみました。
このサイトには、固定ページが15枚ありました。そのうち、メニューに出ているのは5枚だけです。残りの10枚を1枚ずつ確認しました。

① スマホの「ホーム」が、書きかけのページにつながっていた
スマホで見ると、画面の下に「ホーム」と「LINE登録」のボタンがずっと表示されています。この「ホーム」を押すと開くのは、トップページではありませんでした。数年前に作りかけた別のページで、中身は自己紹介の書き出しが1行だけ。「ヨガを始めてから」で、文が途中で止まっていました。スマホで一番押しやすい場所のボタンです。

② 古い料金のページが3枚、公開されたままだった
| ページ | 最終更新 | 載っていた料金 |
|---|---|---|
| ベーシックヨガ体験レッスン | 2020年 | 2,100円(マット代別)・体験1回5,000円 |
| ヨガ/クラスレッスン | 2024年 | 1回2,200円・4回7,700円 |
| ストレッチ・ヨガ | 2024年 | 1回2,200円・4回7,700円 |
いまのクラスは、1回2,500円・4回8,000円です。メニューからはたどれませんが、検索から古い金額のページにたどり着く人がいたかもしれません。
③ プライバシーポリシーが2枚あって、どちらもリンクされていなかった
お問い合わせフォームで名前とメールアドレスを預かっているのに、どこからも見られない状態でした。


15枚を「残す」「下書きに戻す」に分けて、15枚から8枚にしました。
手順にも気をつけました。メニューを先に直してから、ページを下書きにする。逆にすると、「ホーム」を押しても何も出てこない状態が生まれるからです。
すでにあるサイトを点検するときは、AIに固定ページの一覧を渡して「メニューに出ていないページを、最終更新日と一緒に表にして」と頼めば、同じ点検ができます。
構成表は、今あるサイトの点検にも使えます。表に載らないページは、使っていないページです。
私は、最初にAIに構成をまるごと任せて遠回りしました。なので、AIに頼み方を先に決めることにしました。

最初にサイトを作ったとき、私はAIに構成をまるごと出してもらいました。見た目は良かったのですが、よく読むと私の言いたいことではありませんでした。それでも、その案を直す方向でしか考えられなくなりました。
それが失敗の元。
だから、これからWebサイトを作るときには、表の形と条件を先に渡すことにしました。そのために作った指示文がこれです。コピーして使えるように置いておきます。
ヒアリングのメモを渡します。下の形に埋めて、サイト構成表にしてください。
【条件】
・デザインの話はしない。載せる中身だけを決める
・メモに書いていないことは、推測で埋めずに「決めきれていないこと」に入れる
・ページを増やしすぎない。1ページで足りるものは1ページにする
【この形で出してください】
# ◯◯◯◯ サイト構成表
## サイト全体で達成したいこと
いちばんしてほしい行動:
来てほしい人:
他と違うところ:
## ページ一覧
| ページ | URL | このページの目的 | 載せるもの | 次にどこへ |
|—|—|—|—|—|
| | | | | |
## 優先順位
1.
2.
## 今回は作らないもの
–
## 決めきれていないこと
–
【ヒアリングのメモ】
(ここにメモを貼る)
効いているのは、条件の2つ目です。空欄をAIに埋めさせると、それらしい内容が勝手に入ります。分からないところは空欄のまま残して、自分で決めます。
「今回は作らないもの」の項目も大事です。私のサイトでは、料金表・インストラクター紹介・よくある質問を、単独のページにしないと決めました。それぞれ別のページの中に書けば足りるからです。

AIでサイトを作るのは、コードを書かせる問題じゃない。先に決めごとを作る問題だ。
構成表は、その決めごとをいちばん最初に形にしたものです。デザインを頼むのは、この表ができてからで間に合います。
次回は、この表をもとにAIにデザインを頼む話です。全部いっぺんに出させず、トップの一番上から決めていきます。

\ 選ばれているから、初心者でも安心 /

