MENU

ー おすすめの記事 ー

SWELL全レビュー

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

SWELLデメリットまとめ

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

ジューン・マイマイ
パッタン・ブログ主催者
在宅ワーク応援ライター|SWELL×副業×スキルアップ情報をお届けします

在宅フリーランス18年目。
パソコン相談なんでもOKの、40代フリーランスです。
WordPree テーマ【SWELL】
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

AIとWordPress|デザインより先に作る「サイト構成表」の作り方【テンプレ付き】

当ページのリンクには広告が含まれています。
こんな人にオススメ
  • AIにWordPressサイトを作ってもらう前に、何から決めればいいか分からない方
  • デザインは気に入っているのに、サイトの中身がまとまらない方
  • 自分のサイトに、いつ作ったか覚えていないページがある方
  • AIに渡せる構成表のテンプレートがほしい方
この記事でわかること
  • サイト構成表は5つの列で足りること
  • AIに構成表を作らせるときの頼み方
  • そのまま使える指示文のテンプレート

「AIにデザインを頼んだら、きれいなページが出てきた。でも、何のページを作ればいいのか分からない」

「サイトを作ってから何年か経って、どのページが生きているのか自分でも分からない」

ジューン

こんにちは、Web制作フリーランスのジューンです。どちらも、構成表を1枚作ると見えてきます。

結論から言うと、デザインより先に「サイト構成表」を作ります。どのページに何を載せて、読んだ人に次はどこへ行ってほしいか。これを表にしておくだけです。

新しく作るサイトにも、すでにあるサイトにも使えます。今回は、私が自分で運営しているヨガサロンのサイトで試した結果もお見せします。


目次

【新規サイト作成】サイト構成表は、5つの列だけで足ります

ジューン

Excelでも、Googleスプレッドシートでも、紙でも作れます。

サイト構成表は5つの列

サイト構成表で使う列はこの5つ

サイト構成表は、以下の5列で作成できます。

列書くこと
ページページの名前
URL決まっていなければ空欄でOK
このページの目的来た人に何をしてほしいか、1行で
載せるもの料金・地図・写真など、中身の一覧
次にどこへ読み終わった人に、次に押してほしいボタン

この中で一番大事なのは、最後の「次にどこへ」です。

ヨガサロンのサイトで埋めるとこうなります

実際の表から、主なページを抜き出しました。

ページこのページの目的次にどこへ
トップどんなサロンか30秒で伝える体験レッスン、公式LINE
体験レッスンはじめての人が申し込む公式LINE
継続レッスン続けたい人が回数券を選ぶ公式LINE
少人数クラスクラスを希望する人が選ぶ公式LINE
アクセス場所と行き方を確認する体験レッスン
ページの行き先をそろえる

並べてみると、行き先がほとんど「公式LINE」に揃っていました。このサイトの仕事は、LINEから体験レッスンを申し込んでもらうこと。表にして、はじめて言葉になりました。

ここが決まると、AIにデザインを頼んだときの見方が変わります。「きれいかどうか」ではなく、「LINEのボタンが、読み終わったところにあるか」で見られるようになります。

POINT

構成表で一番大事なのは「次にどこへ」の列です。ここが揃うと、サイトの目的が1つに決まります。

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


すでにあるサイトの点検に構成表を使う

構成表は、これから作るサイトのためだけのものではありません。すでにあるサイトで作ると、いらないページが見えてきます。

今回、私のヨガサロンの点検で使ってみました。

このサイトには、固定ページが15枚ありました。そのうち、メニューに出ているのは5枚だけです。残りの10枚を1枚ずつ確認しました。

見つかったこと3つ

サイトを点検して見つけた3つの問題

① スマホの「ホーム」が、書きかけのページにつながっていた

スマホで見ると、画面の下に「ホーム」と「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ページを点検して8ページに
固定ページ一覧。下書きに戻した7枚

15枚を「残す」「下書きに戻す」に分けて、15枚から8枚にしました。

  • スマホの「ホーム」は、本当のトップページにつなぎ直した
  • プライバシーポリシーは1枚に絞って、フッターに入れた
  • 使っていない7枚は、削除せず下書きに戻した(あとで元に戻せるように)

手順にも気をつけました。メニューを先に直してから、ページを下書きにする。逆にすると、「ホーム」を押しても何も出てこない状態が生まれるからです。

すでにあるサイトを点検するときは、AIに固定ページの一覧を渡して「メニューに出ていないページを、最終更新日と一緒に表にして」と頼めば、同じ点検ができます。

POINT

構成表は、今あるサイトの点検にも使えます。表に載らないページは、使っていないページです。


AIに構成表を作らせるときは、出してほしい形を先に渡す

ジューン

私は、最初にAIに構成をまるごと任せて遠回りしました。なので、AIに頼み方を先に決めることにしました。

AIには表の形と条件を先に渡す

最初にサイトを作ったとき、私はAIに構成をまるごと出してもらいました。見た目は良かったのですが、よく読むと私の言いたいことではありませんでした。それでも、その案を直す方向でしか考えられなくなりました。

それが失敗の元。

だから、これからWebサイトを作るときには、表の形と条件を先に渡すことにしました。そのために作った指示文がこれです。コピーして使えるように置いておきます。

AIに渡す構成表の指示文

ヒアリングのメモを渡します。下の形に埋めて、サイト構成表にしてください。

【条件】
・デザインの話はしない。載せる中身だけを決める
・メモに書いていないことは、推測で埋めずに「決めきれていないこと」に入れる
・ページを増やしすぎない。1ページで足りるものは1ページにする

【この形で出してください】
# ◯◯◯◯ サイト構成表

## サイト全体で達成したいこと
いちばんしてほしい行動:
来てほしい人:
他と違うところ:

## ページ一覧
| ページ | URL | このページの目的 | 載せるもの | 次にどこへ |
|—|—|—|—|—|
| | | | | |

## 優先順位
1.
2.

## 今回は作らないもの
–

## 決めきれていないこと
–

【ヒアリングのメモ】
(ここにメモを貼る)

効いているのは、条件の2つ目です。空欄をAIに埋めさせると、それらしい内容が勝手に入ります。分からないところは空欄のまま残して、自分で決めます。

「今回は作らないもの」の項目も大事です。私のサイトでは、料金表・インストラクター紹介・よくある質問を、単独のページにしないと決めました。それぞれ別のページの中に書けば足りるからです。


まとめ:表に載らないページは、使っていないページ

デザインより先に、サイト構成表
ポイント
  • サイト構成表は5つの列で足りる。一番大事なのは「次にどこへ」
  • すでにあるサイトで作ると、いらないページが見える。私のサイトは15ページが8ページになった
  • AIには表の形と条件を先に渡す。分からないところは空欄のまま残す

AIでサイトを作るのは、コードを書かせる問題じゃない。先に決めごとを作る問題だ。

構成表は、その決めごとをいちばん最初に形にしたものです。デザインを頼むのは、この表ができてからで間に合います。

次回は、この表をもとにAIにデザインを頼む話です。全部いっぺんに出させず、トップの一番上から決めていきます。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次