AIでブログを作る方法：投稿、エディター、SEO、ホスティング

ブログには3つの要素が必要です。読者が自分のURLで読める投稿、あなたが投稿を書いて公開する手段、そして検索エンジンが内容を理解できるページです。AIアプリビルダーは、平易な日本語の説明からこの3つすべてを作れます。最も大事な判断は、投稿をどこに保存するかです。プロジェクト内のファイルとして保存するか、エディター付きのデータベースに保存するかで、以降の作業が決まります。このガイドでは、その選択に沿って進めます。

ブログに必要なもの

ページ

• ホームまたは投稿一覧 — 新しい投稿を上に表示し、タイトル、日付、短い抜粋、カバー画像を載せます。
• 投稿ページ — 記事本文です。/blog/how-we-roast-coffeeのような独自のURLを持ちます。
• カテゴリーまたはタグのページ — 読者が1つのトピックをまとめて読めるようにします。
• について — 誰がなぜ書いているのかを説明します。
• 検索（任意） — 投稿が数十件を超えたら追加を検討する価値があります。
• RSSフィード — フィードリーダーや一部のニュースレターツールが新しい投稿を自動で取得できる、小さなファイルです。

データ

投稿は小さなレコードです。タイトル、スラッグ（URLの一部）、本文、抜粋、カバー画像、著者、カテゴリー、タグ、ステータス（下書きまたは公開）、公開日、更新日などを持ちます。執筆者が複数いる場合は、名前、写真、短いプロフィールを持つ著者テーブルを追加してください。

権限

読者が見られるのは公開済みの投稿だけです。執筆者は下書きを作成・編集できます。公開できるのは一人（多くの場合は同じ人）です。一人で運営するブログなら「自分と全員」だけの話ですが、チームで運営する場合はログインと少なくとも2つの役割が必要です。

最初の大きな判断：ファイルかデータベースか

CMS（コンテンツ管理システム）とは、コンテンツを書いて管理する部分のことです。詳しくはCMSとはをご覧ください。

個人や会社のブログの多くは、まずMarkdownファイルで始めるのがよいでしょう。ビルダーを通した執筆が足かせになったとき、あるいはビルダーを使わない人が投稿する必要が出てきたときに、データベースとエディターへ移行してください。

早い段階で決めておくべきSEOの判断

ブログの価値は多くの場合、検索からのアクセスによって生まれるため、デザインよりも技術的な選択のほうが重要になることがあります。

• ページはJavaScriptなしで読めるようにする。 AIで作られたアプリの多くはSPA（シングルページアプリケーション）です。ブラウザは空のページを受け取り、JavaScriptが内容を埋めます。検索エンジンは多くの場合これをレンダリングできますが、時間がかかり、信頼性も落ちます。ブログでは、投稿を静的HTMLに事前レンダリングするか、サーバーサイドでレンダリングするよう依頼し、ページが読み込まれた瞬間に本文がHTMLに含まれているようにしてください。
• 投稿ごとに1つのURLを、そして変えない。 短く読みやすいスラッグを選びましょう。後から変えると、リダイレクトを設定しない限りリンクが切れます。
• 投稿ごとのタイトルと説明文。 各投稿には独自の<title>とメタディスクリプションに加え、共有されたときにリンクがきれいに表示されるようOpen Graphタグが必要です。
• サイトマップ。 公開済みのすべての投稿を列挙するsitemap.xmlがあると、検索エンジンが新しい投稿を見つけやすくなります。
• 構造化データ。 schema.orgのArticleマークアップは、見出し、著者、日付を検索エンジンに伝えます。ページ上に実際に表示されている内容だけをマークアップしてください。

AIで作ったウェブサイトのSEOガイドでは、これらをさらに詳しく扱っています。

最初のプロンプトの例

スペシャルティコーヒーの焙煎所のためのブログを作ってください。ページは次のとおりです。ホームには投稿を新しい順に並べ（タイトル、日付、抜粋、カバー画像）、投稿ページは/blog/[slug]、カテゴリーページ、そしてについてのページ。投稿はMarkdownファイルとして保存し、フロントマターにタイトル、日付、抜粋、カテゴリー、カバー画像を持たせてください。すべての投稿ページは静的HTMLに事前レンダリングし、検索エンジンがJavaScriptなしで読めるようにしてください。各投稿に独自のタイトルとメタディスクリプション、Open Graphタグ、Article構造化データを付けてください。投稿からsitemap.xmlとRSSフィードを生成してください。1行あたり約70文字の最大行幅で、読みやすくすっきりしたタイポグラフィにし、スマートフォンでも見やすいレイアウトにしてください。デザインを確認できるよう、サンプル投稿を3件追加してください。

構築の手順

1. サンプル投稿でデザインを確認する。 まず投稿ページを仕上げましょう。フォントサイズ、行の長さ、余白、画像や引用の見え方が重要です。読者が一番多くの時間を過ごすのはここです。
2. 一覧ページとカテゴリーページ。 抜粋、日付、カバー画像を確認し、投稿に画像がない場合にどうなるかもチェックします。
3. SEOの基本。 タイトル、説明文、Open Graphタグ、サイトマップ、RSSフィードを依頼します。公開後は投稿を開き、ページのソースを表示して本文がHTMLに含まれているかを確認してください。
4. 実際の投稿に置き換える。 サンプルを削除します。最初の数本は自分で書きましょう。それがサイトのトーンを決めます。
5. ニュースレター登録（任意）。各投稿の末尾に、メールアドレスをデータベースに保存する、またはメール配信サービスに送るフォームを置きます。ニュースレターサイトの作り方もご覧ください。
6. エディターとログイン（必要な場合のみ）。データベースに移行する場合は、下書き、プレビューボタン、画像アップロードを備えた管理画面を依頼し、ログインで保護してください。
7. 独自ドメイン。 自分のドメインのブログは、そのドメインの評価を積み上げます。独自ドメインを接続する方法を参照してください。

文章作成にAIを使う

AIは、構成案、初稿、見出し案、要約、推敲に役立ちます。一方で、ブログを読む価値のあるものにしている要素、つまりあなたの経験、意見、写真、実際の仕事から得た数字などは苦手です。役立つ目安は、AIに書いてもらうのではなく、AIを使って書くスピードを上げることです。AIが示した事実はすべて確認し、出典をたどれない統計や引用は決して公開しないでください。

エディターの中にAIの執筆アシスタント（「タイトルを提案」「この段落を引き締める」ボタンなど）を追加する場合、APIキーはサーバー側に置いたままにしてください。1回の提案ごとに費用がかかるため、利用制限も設定しましょう。

よくある間違い

• 投稿をクライアント側だけでレンダリングする。 投稿の本文は、後からJavaScriptで追加されるのではなく、HTMLに含まれているべきです。
• 公開後にスラッグを変更する。 古いリンクがすべて切れてしまいます。どうしても変える場合は、古いURLからのリダイレクトを追加してください。
• 巨大な画像。 5 MBのカバー写真は、すべてのページを遅くします。リサイズと圧縮を行い、幅と高さを指定した画像を依頼しましょう。
• 下書き機能がない。 下書きのステータスがないと、書きかけの投稿が公開されてしまいます。
• モデレーションのないコメント。 公開のコメント欄は、数日でスパムを集めます。コメントなしで始めるか、何かが表示される前に承認を必須にしてください。
• 日付がない。 読者も検索エンジンも、いつ書かれ、いつ更新されたのかを知りたがります。

ブログプラットフォームのほうが適している場合

文章を書くことだけが目的なら、ホスト型のブログプラットフォームやWordPressのほうが早く目的を達成できます。完成されたエディター、テーマ、コメント機能、場合によってはニュースレター機能、そして長年蓄積されたプラグインが揃っています。Substackのようなプラットフォームは、すでにある読者層とメール配信も提供します。

自作が向いているのは、ブログが大きな製品（企業サイト、SaaSアプリ、ストア）の一部である場合、製品ページ、レシピ、掲載情報などの自社データを投稿で使いたい場合、あるいはデザインとURLを完全に管理したい場合です。ウェブサイトがどう動くのかを学ぶ良い方法でもあります。既存のサイトにブログを追加する場合は、ウェブサイトにブログを追加する方法をご覧ください。

Mythexでの構築

Mythexでは、チャットでブログを説明し、ライブプレビュー（スマートフォンサイズの表示も含む）でデザインを確認して、<slug>.mythex.appという公開アドレスに公開できます。独自ドメインはProプランで利用できます。デフォルトの構成はViteとReactのアプリで、ブラウザ上でレンダリングされます。そのため、ブログでは事前レンダリングされた投稿ページやNext.jsを依頼し、タイトル、メタタグ、サイトマップについてはSEOのレシピに従ってください。ブラウザ上で編集したい場合、Mythexはアプリが必要とするときにデータベースと画像用のファイルストレージを追加します。執筆者のログインは持ち込み型で、どの方式を使うかはあなたが選び、エージェントが組み込みます。出発点として、フードブログやニュースレターブログのテンプレートも参考になります。

よくある質問