AIを活用した新しいウェブ設計 ── 情報資産から始める「ダイナミックウェブ」という提案

久しぶりに、自社サイトを全面的に改修しました。

今回はこれまでとは違うアプローチでした。デザインなどを検討するのではなく、情報をどう構造化するかにフォーカス。

ウェブサイトは長いあいだ「制作物」として扱われてきたと思います。デザインを決め、ライティングをして、コーディングをして、公開する。一度公開すれば、しばらくは触らない。触るには制作会社にお願いするか、CMSに張り付いて更新作業をする。

その結果、新しい実績や知見が生まれていても、ウェブサイトに反映されるのは数ヶ月後、ときには何年も古い情報のまま放置される。

この「情報の温度差」こそが問題でした。

リードタイムが縮まらない構造的な理由

更新の遅さの原因を分解してみると、二つに行き着きます。

ひとつは、技術的な依存関係。コードを触れる人は限られていて、その人にお願いしないと更新できない構造になっている。CMSがあっても、レイアウトや構造を変えるとなれば結局エンジニア依存になります。

もうひとつは、情報そのものの分散。会社情報はGoogleドキュメント、実績はKeynote、ナレッジはNotion、顧客情報はCRM、問い合わせ履歴はGmail、ガイドラインはPDFといった具合に、社内の情報資産はあらゆる場所に散らばっていました。

「ウェブサイトを更新しよう」となった時、まずやるべきは「最新の情報を集めること」から始まる。これでは時間がかかって当然です。

「Single Source of Truth」 を起点に

システム開発の考え方に 「Single Source of Truth（信頼できる唯一の情報源）」 というものがあります。

この概念は、「同じ情報を複数の場所で別々に管理せず、中心となるひとつの情報源を持ち、そこからすべてを派生させる」というシンプルな原則です。

僕がやろうとしたのは、この発想をウェブサイトの設計そのものに持ち込むことでした。

具体的には、Supabaseという、PostgreSQLをベースにしたクラウドデータベースを情報の中心に置く。そこに、会社情報、事業・サービス内容、実績、プロジェクト管理、ナレッジ、顧客情報、問い合わせ履歴まで、すべての情報資産を集めていきます。

GmailやGoogle Drive、Calendarといった外部のツールとも連携させて、新しい情報が自動的にこのデータベースに入ってくる仕組みにする。

ここが情報の「中心」になる。建築設計の世界には「設計図」という概念がありますが、それに近い役割をSupabaseが担うイメージです。建物のあらゆる仕様が一枚の図面に集約されているように、会社のあらゆる情報資産がここに集まる。

この設計を一枚の図にまとめると、上のようになります。

中心にあるSupabaseに、左側からGmail、Google Drive、Calendarといった外部ツールがつながり、新しい情報が自然と流れ込んでくる。その上にNext.jsが乗って「外向きの顔」を、下にClaude Coworkが立って「内向きのインターフェース」を担う。両者を包み込むかたちでClaude Codeが開発・管理を支える。そして右下には、Webページ、ブログ記事、会社案内、実績リストといった成果物が、同じ情報資産から派生していきます。

一言で言えば、「外に伝えるレイヤー」と「中で扱うレイヤー」が、同じ情報資産を共有しているという構造です。両方のレイヤーが同じ源を持っているからこそ、情報の温度差が生まれない。これが、この設計のいちばん肝心なポイントだと考えています。

Next.jsとClaude Codeで、リードタイムを限りなくゼロへ

そのデータベースから、Next.jsでウェブサイトを構築しました。

Next.jsにはISR（Incremental Static Regeneration）という、データの更新があったときに静的ページを再生成する仕組みがあります。これを使えば、Supabaseの情報が変わった瞬間に、ウェブサイトにも反映される。

そしてコードの開発・管理はClaude Codeに任せる。デザインシステムをAIに分析させて、新規ページの構成もAIに生成してもらう。エンジニアが手を動かす時間は最小限になります。

つまり「情報を更新する＝ウェブサイトが更新される」という状態を作る。リードタイムという概念そのものが、ほぼ消えていきます。

ウェブサイトは「公開して終わり」の制作物ではなく、データベースの状態をリアルタイムに映し出す鏡のような存在に変わっていく感覚です。

自然言語で、データベースと対話する

ただし、ここまでだと「やっぱりエンジニアが必要じゃないか」という印象になります。

そこでもう一段階、Claude Coworkというツールを組み合わせました。MCPという仕組みでSupabaseに直接接続して、自然言語でデータベースの読み書きができるようにしています。

経営者やスタッフが「先月の実績を3件追加しておいて」「このプロジェクトのケーススタディをブログ用にまとめて」「会社案内のPDFを作りたいから、最新の会社情報を整形して」と話しかければ、Claudeがデータベースから情報を取ってきて、必要な形に加工してくれる。

ウェブページに反映するのも、ブログ記事を書くのも、実績リストをPDFで書き出すのも、すべて同じ情報資産から派生する。

情報のソースが一元化されているからこそ、出力先は無限に広がっていく。ここがこの設計のいちばん面白いところだと考えています。

実際にAIで生成した、ダウンロード資料たち

この設計に切り替えてから、実際にいくつかのアウトプットをClaude CoworkとSupabaseの組み合わせで作ってみました。

ひとつはID INC.の会社概要PDF。事業領域、強み、実績事例をデータベースから引き出し、レイアウトを整えて1冊にまとめたもの。これまでなら外注して数週間かかっていた仕事が、データベースに情報が揃っていたおかげで、対話的に整形するだけで仕上がりました。

もうひとつは「AI時代の、ブランド構築7ステップ」というガイドブック。経営者向けに、ブランド構築の標準フレームワークをまとめた資料です。社内に蓄積されていた知見をデータベースから取り出し、構成と編集をClaude Coworkに任せて作りました。

さらに「らしさ」ある、組織づくりを。というインナーブランディング実践ガイドも、同じ流れで生成しています。

いずれも今、自社サイトのダウンロードページに並んでいる資料です。ウェブの一ページとして公開するのも、PDFとして配布用に書き出すのも、ブログ記事として再編集するのも、源は同じ場所にある。ソースが一元化されていれば、フォーマットは後からいくらでも変えられる。この実感は、想像していた以上に大きなものでした。

▼ 実際に生成した資料はこちらから
https://include.bz/download

ウェブサイトは「ダイナミック」へ

これからのウェブサイトは、よりダイナミックな存在へと変わっていくと考えています。

ここでいうダイナミックとは、単に「データベース駆動の動的サイト」という技術的な意味だけではありません。会社の動き、現場の温度、変化に対して、リアルタイムに応答し続ける——そういう状態を指しています。

経営は止まりません。日々プロジェクトが動き、新しい関係が生まれ、知見が蓄積されていく。Supabaseが情報の流れを受け止め、Next.jsがその変化を即座に出力し、Claude Coworkが人とデータベースの対話を担う。この三者が連動することで、AIによってウェブサイトは「止まっている展示物」から「動き続ける会社の鏡」へと変わっていくと思います。