この記事でわかること

  • 生成AIで自社メディアを構築する流れがわかる
  • 参考サイトを分析し、トンマナを作る方法がわかる
  • Claude Codeを使う前に確認すべきことがわかる

サイト構成の整理、HTMLやCSSの実装、CMSとの連携まで、AIに相談しながら進められます。この流れは、本メディア「てならいAI通信」自身を構築したときの実際の手順です。

ただし、最初に情報設計とトンマナを決めないまま作り始めると、ページごとに構成や見た目のルールが変わります。トップページ、記事一覧、記事ページ、問い合わせが別々の考え方で作られると、サイト全体が継ぎはぎのように見えます。カテゴリの分け方、記事の見せ方、問い合わせや資料ダウンロードへの導線が整理されていないと、読者は読みたい記事を探しにくく、記事を読んだ後の行動にも進みにくくなります。

参考サイトを収集し、設計の材料にする

最初に行うのは、参考にしたいサイトを収集することです。同業のサイトだけでなく、文章が読みやすいサイト、余白の取り方が参考になるサイト、信頼感が伝わるサイトなども選びます。

このとき、見た目だけでなく構成も確認します。トップページで何を見せているのか。記事一覧へどう誘導しているのか。記事ページの下に関連記事や問い合わせへの導線があるのか。資料ダウンロードをどこで案内しているのかを見ます。

集めたサイトは、Claudeに分析させます。読者の想定、各ページの役割、問い合わせへの導線、配色、余白、文字サイズ、写真やイラストの使い方を整理してもらいます。

情報設計とトンマナを決める

参考サイトの分析結果をもとに、自社メディアの情報設計を決めます。カテゴリをどう分けるのか。新着、ランキング、ピックアップなどの記事分類をどう見せるのか。読者を記事一覧、関連記事、資料ダウンロード、問い合わせへどう進めるのかを整理します。

あわせて、トンマナも決めます。背景色、本文色、アクセントカラーはカラーコードで指定します。フォント、見出しと本文の文字サイズ、行間、余白、ボタンの角丸、記事カード、リンクの見せ方も決めておきます。写真やイラストも、明るさ、余白、線の太さ、避けたい表現を決めておくと、ページごとの見え方がぶれにくくなります。

Claude Codeに読ませるルールをMarkdownにまとめる

情報設計とトンマナが決まったら、その内容をClaude Codeに読み込ませられるようにMarkdownファイルにまとめます。抽象的な方向性ではなく、カラーコード、フォント、文字サイズ、余白、ボタン、記事カード、リンク、画像の扱いを具体的に記載します。

このルールを先にClaude Codeへ読ませることで、ページごとに色や余白、ボタン、記事カードの見え方がずれるのを防ぎやすくなります。

本メディアでも、配色・フォント・余白・記事カードなどの決めごとを一つのMarkdownファイルにまとめ、以降のページ作成や修正では必ずこのファイルを参照させる運用を続けています。決めごとを変えるときは、先にこのファイルを更新してから、各ページへ反映します。

Claude CodeでAstroのページを組み立てる

設計とトンマナのルールがまとまったら、Claude Codeに指示して、Astroでサイトの画面を組み立てます。Astroは、トップページ、記事一覧、記事ページなどの画面を作るためのフレームワークです。

Astroの構成に沿って必要なファイルを作成し、トップページのレイアウト、記事一覧の並び、記事ページの本文の見え方、問い合わせや資料ダウンロードへの導線を、実際のブラウザで確認します。

コードとして正しく動くことに加えて、最初に決めた設計とトンマナに沿った画面になっているかを確認します。カテゴリの見せ方、記事カードの余白、ボタンの配置、ページ同士の導線がずれていれば、Claude Codeに修正を指示します。

記事更新のためにヘッドレスCMSを使う

Astroで画面を作ると、サイトの見た目は整えられます。ただし、記事を増やすたびにHTMLや設定ファイルを直接直す運用では、更新作業が重くなります。そのため、記事の中身はヘッドレスCMSで管理します。

ヘッドレスCMSとは、記事のタイトル、本文、カテゴリ、公開日、アイキャッチ画像などを管理するための仕組みです。サイトの見た目はAstroで作り、記事の中身はCMS側で管理します。日本語の管理画面で記事を扱いやすいサービスとしては、microCMSがあります。APIで記事データを取得できるため、Astroで作った記事一覧や記事ページに内容を読み込んで表示できます。

GitHubとVercelで公開する

Claude Codeで作ったファイルは、パソコンの中にあるだけではWebサイトとして公開されません。まず、サイトを構成するファイルをGitHubに保管します。GitHubは、作ったファイルを管理し、変更履歴を残すための場所です。

次に、GitHubに置いたファイルをVercelにつなぎます。Vercelは、Astroで作ったサイトをインターネット上に公開するためのサーバー環境です。取得したドメインを設定すれば、自社のURLで見られるようになります。

Claude Codeを使う前に、何を確認すればいいか

Claude Codeは、パソコン上でファイルを作成し、修正し、コマンドを実行できます。作業範囲を決めないまま使うと、関係のないファイルを変更したり、APIキーが入ったファイルを読ませたりするおそれがあります。

次の四つを確認します。

  • AIが作業できる範囲を、決めたフォルダの中だけにする
  • ファイルの削除や本番公開は、必ず確認を挟む
  • APIキーが入ったファイルは読ませない
  • 確認なしで実行する設定は使わない

この四つは、本メディアでも実際に設定している内容です。

Claudeに画面を見せながら相談するときも、APIキーが表示された画面は送らないようにしましょう。

まとめ

情報設計とトンマナを決めないまま作り始めると、ページごとの構成や見た目のルールがそろわず、継ぎはぎのようなサイトになります。まずは参考にしたいサイトを三つ選び、Claudeにサイト構成、導線、配色、余白を分析させてください。

Q&A

Q1. デザインの知識がなくても、トンマナは決められますか？

決められます。ゼロから配色やフォントを考えるのではなく、参考サイトの分析結果をもとに、良いと感じた要素をカラーコードや文字サイズに落とし込んでいく進め方です。求められるのは作る力よりも、出てきた案を見て「これは違う」「これは近い」と判断する目のほうです。判断の基準は、参考サイトを分析する過程で自然と言葉になっていきます。

Q2. 参考にするサイトは、同じ業種から選ぶべきですか？

業種よりも、どんな読者に、どんな雰囲気で届けたいかが近いサイトを選ぶほうが役立ちます。同業ばかりを集めると、既視感のある仕上がりに引っ張られやすくなります。文章が読みやすい、余白の取り方が心地よい、信頼感が伝わるといった観点で、業種をまたいで集めるほうが、自社らしい方向性が見えてきます。