AIでブログを作る方法: Moremadeを使った実践ガイド
このガイドでは、Moremadeを実例にしてAIでブログを作る方法を紹介します。読み終えるころには、ホームページ、記事ページ、ナビゲーション、そして公開URLを備えた動くブログができているはずです。最初のシンプルな版なら、修正量にもよりますが、目安は30〜90分です。
まず、そのブログに本当に必要なものを決める
AIビルダーに指示を出す前に、まず最小構成を決めましょう。
基本的なブログなら、たいてい次の要素で十分です。
- 記事一覧を表示するホームページ
- 記事詳細ページ
- Aboutページ
- Contactページ、または問い合わせセクション
- ヘッダー、フッター、シンプルなナビゲーション
- モバイルとデスクトップの両方で使えるレイアウト
次に、コンテンツの扱い方を決めます。
- まず数本の記事だけで始めるなら、最初の構築ではハードコードのサンプル記事で十分です。
- サインイン、下書き保存、データベース連動の記事一覧が必要なら、あとからSupabaseを追加しましょう。
- 有料ニュースレター、ダウンロード、メンバーシップを売る予定なら、そのときにStripeが関係してきます。
さらに、誰がそのサイトを使うのかも決めます。
- 一般読者のみ
- 編集者としての自分
- サインインが必要な編集者や寄稿者
このステップが重要なのは、AIはスコープが明確なほどうまく動くからです。最初から完全な公開プラットフォームを求めるより、小さくて完成度の高い第一版を頼むほうが、ブログは作りやすくなります。
構造、ページ、スタイルを含めた最初のプロンプトを書く
Moremadeでは、自然な言葉でサイトを説明すると、AIエージェントがソースコードを書いてくれます。Webサイトは実際のReactとTailwindのコードとして生成され、チャットで結果を調整できます。
最初のプロンプトには、次の内容を含めましょう。
- サイトの種類
- 必要なページ
- 各ページのレイアウト
- 見た目のスタイル
- レスポンシブの挙動
- 入れたい初期コンテンツ
良い最初のプロンプトは、細部をすべて説明しすぎず、具体的であることが大切です。
ひとりのライター向けの、すっきりしたブログサイトを作ってください。ReactとTailwindを使ってください。ホームページにはヒーローセクション、6件のサンプル記事カードのグリッド、シンプルなニュースレター登録フォームUI、フッターを作成してください。さらに、タイトル、著者、日付、カバー画像、目次、読みやすい本文レイアウトを備えたブログ記事ページテンプレートを追加してください。AboutページとContactページも作成してください。余白を十分に取ったミニマルな編集系デザインで、明るい背景に濃い文字、わかりやすいモバイルナビゲーションにしてください。ホームページと記事ページは完全にレスポンシブにしてください。
これだけで、使えるものを作りつつ、あとから細部を調整できる余地も残せます。
ライブプレビューを確認して、小さく修正を重ねる
最初の構築が終わったら、さらに機能を足す前にライブプレビューを確認しましょう。まず構造、次に余白、次にコンテンツ、最後に動作を見ます。
確認の順番としては、次のような流れが役立ちます。
- ホームページはブログの内容をはっきり伝えているか？
- 記事カードの長さや余白は揃っているか？
- 記事ページは読みやすいか？
- ヘッダーはモバイルで使いやすいか？
- ボタンやリンクの見た目は一貫しているか？
Moremadeでは、チャットで編集を続けたり、ビジュアルインスペクターで要素を指して変更したり、コードビューに切り替えたりできます。
役立つフォローアッププロンプトを3つ挙げます。
- 「記事本文のカラム幅を狭くして、段落の行間を広げ、長文向けに見出しをより目立たせてください。」
- 「ホームページの記事グリッドを、中サイズ画面では3列から2列に、小さい画面では1列に変更してください。各記事カードにカテゴリタグを追加してください。」
- 「現在のヒーロー文を個人の執筆ブログ向けの短い紹介に置き換え、フッターはナビゲーション、メール、著作権表記だけに簡略化してください。」
「もっと良くして」よりも、小さく具体的な指示のほうが、たいていうまくいきます。
データ、サインイン、支払いは本当に必要なときだけ追加する
多くのブログは、初日にデータベースを必要としません。固定された記事だけで公開するシンプルなサイトなら、まずはそれで始めましょう。
次のようなものが必要なときにSupabaseを追加します。
- 記事データベース
- 著者や編集者のサインイン
- 画像用のファイル保存
- 読者アカウント
次のようなものが必要なときにStripeを追加します。
- 有料購読
- プレミアム記事への有料アクセス
- ブログ関連のデジタル商品販売
MoremadeにはSupabaseとStripeの接続機能が標準で含まれているので、基本レイアウトが動いてから追加できます。
おすすめの進め方は次のとおりです。
- 公開用のブログUIを作る。
- 読みやすさを確認する。
- コンテンツやユーザーを動的に管理する必要がある場合のみSupabaseを追加する。
- 支払いフローが本当に必要な場合のみStripeを追加する。
こうすると最初の版がシンプルになり、まだ不要な機能に時間を使わずに済みます。
公開前にモバイル体験を確認する
デスクトップでは問題なく見えても、スマホではうまくいかないブログはよくあります。プレビューを狭い幅で確認し、よくあるレイアウト問題を探しましょう。
特に次の点をチェックしてください。
- ヘッダーとモバイルメニュー
- 記事カードの余白
- 画像の切り抜き
- 本文の行の長さ
- 目次の動き
- フォーム項目とボタン
必要なら、具体的な修正を依頼しましょう。たとえば:
- 「モバイルではヒーローの余白を減らし、ニュースレター登録フォームを縦に並べてください。」
- 「小さい画面では注目画像を横幅いっぱいにし、キャプション文字を少し小さくしてください。」
- 「モバイルナビのラベルを短くし、メニュー項目のタップ間隔を広げてください。」
Moremadeではライブプレビューを見ながら作業できるので、公開前にモバイルレイアウトを実際に調整するのが現実的です。
最初の版を公開して独自ドメインをつなぐ
ブログの見た目が整ったら、公開しましょう。
Moremadeなら、無料のyourname.moremade.aiサブドメインにワンクリックで公開できます。有料プランでは独自ドメインを接続できます。ドメインはMoremade内で購入することも可能です。
公開の実践的な流れは次のとおりです。
- まず無料サブドメインで公開する
- 実際の端末でサイトを開く
- リンク、フォーム、ページの読み込みを確認する
- コンテンツとレイアウトが安定したら独自ドメインを接続する
ソースコードが必要なら、いつでもプロジェクト全体をZIPで書き出せますし、GitHubにpushすることもできます。生成されるWebサイトコードはReactとTailwindなので、独自の実行環境に閉じ込められることはありません。
AIで作ったブログで避けるべきよくある失敗
よくある問題は、技術そのものよりも、あいまいなプロンプトや早すぎる作り込みにあります。
次のような失敗は避けましょう。
- 最初のプロンプトで機能を詰め込みすぎる
- 見た目のスタイルをあいまいに書き、レイアウトや内容の要件を明確にしない
- 読みやすさが固まる前にサインインや支払いを追加する
- モバイルの記事ページをテストし忘れる
- ヒーロー、フッター、メタデータにプレースホルダーテキストが残ったまま公開する
実践的な習慣も役立ちます。
- まずは最小の完成版を作る
- 1回で1箇所ずつ改善する
- プロンプトは具体的で、観察できる内容にする
- 安定版になったらZIPで書き出すかGitHubへpushする
- 大きなデザイン変更の前には、バージョン履歴が使えるプランならそれを使う
AIでブログを作る方法を学ぶのが目的なら、最大のポイントはこれです。AIは、明確な製品判断の代わりではなく、素早く実装するためのアシスタントとして扱いましょう。
このプロンプトを試す
ひとりのライター向けの、すっきりしたブログサイトを作ってください。ReactとTailwindを使ってください。ホームページにはヒーローセクション、6件のサンプル記事カードのグリッド、シンプルなニュースレター登録フォームUI、フッターを作成してください。さらに、タイトル、著者、日付、カバー画像、目次、読みやすい本文レイアウトを備えたブログ記事ページテンプレートを追加してください。AboutページとContactページも作成してください。余白を十分に取ったミニマルな編集系デザインで、明るい背景に濃い文字、わかりやすいモバイルナビゲーションにしてください。ホームページと記事ページは完全にレスポンシブにしてください。
よくある質問
Moremadeでブログを作るにはいくらかかりますか？
Moremadeには、30日ごとに10 Build Unitsが付く$0の無料プランがあり、moremade.aiサブドメインへの公開とZIP書き出しができます。最初のサイト構築は約8ユニット、小さな編集は約1ユニットです。有料プランでは、独自ドメイン、プライベートなプロジェクトホスティング、バージョン履歴、追加のBuild Unitsなどが利用できます。
コードを書けなくても大丈夫ですか？
はい。ブログを自然な言葉で説明して、チャットで編集できます。ただし、ページ構成、コンテンツ構造、モバイルレイアウトをはっきり考えると役立ちます。コードが書けるなら、直接コードを確認することもできます。
ブログのコードの所有権はありますか？
はい。いつでもソース全体をZIPで書き出したり、GitHubにpushしたりできます。WebサイトはReactとTailwindで作られるため、必要に応じてプラットフォーム外でも開発を続けやすくなっています。
あとからサインイン、データベース、支払いを追加できますか？
はい。MoremadeにはSupabaseとStripeの接続機能があります。おすすめは、まず公開ブログを公開し、そのあとで本当に必要になったタイミングで、Supabaseでデータやサインインを追加したり、Stripeで有料機能を追加したりする方法です。
あとでさらにカスタマイズしたくなっても対応できますか？
できます。書き出したWebサイトコードは標準的なReactとTailwindなので、自分で、または後から開発者と一緒に継続開発できます。ブログが最初のAI構築版を超えて成長したときにも役立ちます。