AIと作ったサイトは、6つの層になった——事実を一番下に置くコンテンツ設計

この記事の作業は、ChatGPTとClaudeの二つのAIと一緒に進めています。

前回までのあらすじ

前回の記事では、用途別のLP20本を作り直しました。AI同士に導入の相談をさせて問題を洗い出し、構成は私が決めた話です。

その20本が終わり、トップページも作り直しました。サイト全体がどういう層でできているのか、ここで一度まとめておきます。

今の形

先に、辿り着いた図を見せます。

下から順に、こういう役割です。

上へ行くほど、読む人の言葉になります。下へ行くほど、製品の事実になります。

一周目は、横に広げた

最初からこの形だったわけではありません。

一周目の順番は、こうでした。

1. 機能リファレンスを作る
2. 関連する機能を束ねる
3. 機能ページを作る
4. Aboutを作る
5. LPをたくさん作る
6. 面白いコーナーを作る

事実は正確にそろいました。でも、ストーリーに人がいませんでした。

LPやコーナーを作るたびに、「このページでは何を推すか」をその場で考え直していました。考え直すたびに、言いたいことがページごとに少しずつずれていく。ページは増えても、writeWiredが何なのかは伝わりませんでした。

Aboutも先に作っていました。でも、上に何を書けばいいかが決まっていないまま書いたので、中身がありませんでした。

二周目は、間に一枚挟んだ

二周目で変えたのは、事実とページの間に「営業の章」を一枚挟んだことです。営業トークを一枚挟んだら、後ろの工程が変わったで書いた話です。

誰のどんな仕事が、どう楽になるか。それを一度だけ書いておく。機能ページもAboutもトップも、そこから引いてくる。上の層で、本質を新しく考え直さなくてよくなりました。

順番はこうなりました。

1. 機能リファレンス
2. 機能の束
3. 営業の章
4. 機能ページ
5. About
6. トップ

一番大きかったのは、2から3の一歩です。各機能の営業の章がそろって、Aboutがやっと意味を持ちました。

上の層は、作り直すたびに変わった

二周目に入っても、上の層は何度も作り直しました。

• 用途ページ: 営業の章を載せようとしたら、下にある機能の選び方から直すことになりました（用途ページに章を足そうとしたら、下の選び方を直すことになった）。その後、AI同士の相談で問題を洗い出し、構成を決め直して20本を作り直しました（前回）。
• About: 二つの系統に分けて作り直したあと、最終的にはAboutというページをやめて、トップにまとめました。
• トップ: 下の層がそろってから、最後に作り直しました。

作り直すたびに大きく変わったのは、上の層でした。一番下の機能リファレンスにも、手を入れていないわけではありません。最初は操作の説明が中心の、無機質な文章でした。そこで、当時の143本すべてに、どんな場面でどう役立つのかが分かる説明を書き足し、元の説明と入れ替えました。会話で抜けが見つかった事実も足し、本数は最初に公開した127本から145本に増えています。

それでも、1画面を1ページにする区切り方と、事実だけを書いて売り込まないという役割は、最初から変えていません。役立ち方は書いても、営業の言葉は上の層に任せています。

作り直してみて決めたこと

何度もやり直して、守るようになったことがあります。

• 上の層で、本質を新しく書かない: 下から上がってきたものを、読む人の目的に合わせて選び、並べ直すだけにする
• まとめるときに、縮めない: 共通点だけを抜き出すと、できることの幅が消えて、ただの便利な道具に見えてしまう
• 足りないものは、下で足す: 上のページの辻褄を合わせるために、上だけを書き換えない。事実が足りなければ、事実の層に足してから上を作る

簡単ではなかった

この図になるまでに、何度も作り直しました。一周目のページの多くは、作った時点では正しいつもりでした。

それでも、事実を一番下に置いておいたので、上を作り直すたびに一からにはなりませんでした。下が揺らがないから、上は何度でもやり直せる。今回の作り直しで一番助かったのは、そこでした。

この層の分け方が正解かどうかは、まだ分かりません。検索や問い合わせにどう効くかも、これから見ていきます。ただ、何を足せばいいか迷ったとき、どの層の話なのかを考えればいい。その地図が、やっと手に入りました。