AIでメディアサイトを4時間半で構築した全記録
このサイト「AI実践ノート」は、AIを使って構築しました。
プロジェクトの立ち上げからデザイン、コーディング、デプロイまで。僕がやったのは方向性の指示とデザインの確認だけで、コードはすべてAIが書いています。
所要時間は合計4.5時間。コードは1行も書いていません。
ただし、これは2サイト目だから実現できた数字です。1サイト目では数ヶ月かかりました。その全工程を、包み隠さず記録します。
なぜこのサイトを作ったのか
もともと別ジャンルのブログを運営していて、そちらもAIを使ってWordPressからSanity + Next.jsに完全移行しました。その経験から、AI活用で学んだことを記録する場所が欲しくなりました。
ただ、既存ブログにAI活用の記事を載せるのはテーマが合わない。そこで、使っていなかったドメインを活用して、別サイトとして立ち上げることにしました。
技術構成
以下の構成で作っています。
- Next.js — フロントエンド（ページの表示）
- Sanity — CMS（記事の管理・編集）
- Cloudflare Pages — ホスティング（サイトの公開）
1サイト目とまったく同じ構成です。技術選定で迷う時間がゼロだったのは大きかったです。
この組み合わせのメリットは、すべて無料枠で運用できること。サーバー代は今のところかかっていません。
AIに何をやらせたか
今回、AIに任せた作業は以下です。
デザインコンセプトの壁打ち
「知的ミニマル」「未来テック」「ブランドメディア」の3案を出してもらい、比較して方向性を決めました。ひとりでは出てこない選択肢が並ぶので、判断材料が一気に増えます。
コード生成
レイアウト、コンポーネント、CSS、ページルーティング、Sanityとの接続まで、コードはすべてAIが書きました。僕はコードを1行も書いていません。
コピーライティング
ヒーローコピー「AIを、書く・届ける・売るに変える。」も、自己紹介文も、AIとの対話の中で生まれたものです。何度もやりとりして、少しずつ磨いていきました。
デプロイ設定
Cloudflare Pagesへのデプロイ、カスタムドメインの設定、SSL対応まで、手順もAIに聞きながら進めました。
デザインレビューの反映
完成したデザインを別のAI（ChatGPT）にレビューしてもらい、そのフィードバックをClaude Codeに伝えて改善する、というサイクルも回しました。AI同士を組み合わせることで、ひとりでは気づけない改善点が見つかります。
AIにできなかったこと
一方で、最終的に人間が判断した部分もあります。
サイト名の決定
AIにたくさんの候補を出してもらいましたが、最終的に「AI実践ノート」に決めたのは僕です。AIは選択肢を広げてくれるけれど、「これだ」と決めるのは人間の仕事でした。
デザインの良し悪しの判断
AIが作ったデザインを見て「もっとかっこよくして」「文字が読みにくい」「無機質すぎる」とフィードバックしたのは僕です。AIは指示通りに作ってくれますが、「これでいいか」を判断する目は必要です。
世界観の方向性
「知的で洗練された、静かな高級感のあるサイトにしたい」「情報商材っぽくならないように」。この匙加減はAIには任せられませんでした。AIは「派手にして」と言えば派手にするし、「地味にして」と言えば地味にする。どこで止めるかは、僕自身のセンスと判断です。
4.5時間の内訳
- 1日目（2時間） — サイトの初期構築、デザイン初版、基本ページ実装
- 2日目（2時間） — デザイン改善（複数回）、コピー調整、デプロイ
- 3日目（30分） — ドメイン設定、CMS設定
- 合計：約4.5時間
僕がやったことは、方向性の指示、デザインの確認、管理画面の操作です。AIの処理を待つ時間も含めて4.5時間。コードは1行も書いていません。
この4.5時間で実際に進んだこと
4.5時間と聞くと短く感じるかもしれませんが、実際にはかなりの量の作業をこなしています。整理すると、次の5つです。
企画・設計
サイト名の検討と決定、ドメインの選定、デザインの方向性の言語化。サイト名は大量の候補からAIと壁打ちして、「AI実践ノート」に絞りました。
構築
Next.jsプロジェクトの作成、Sanity CMSとの接続、デザインシステムの構築、トップページ・記事詳細ページ・プロフィールページの実装。ヘッダー、フッター、記事カードなど、主要なコンポーネントもAIが生成しています。
デザイン改善
初版から完成まで、10回以上のデザイン修正を繰り返しました。別のAI（ChatGPT）にデザインレビューを依頼し、そのフィードバックをClaude Codeに反映させる、というサイクルも回しています。
可読性の調整、余白の統一、ホバー演出の追加、CTAの強さの調整など、細部まで詰めました。
デプロイ
Cloudflare Pagesへのデプロイ、カスタムドメインの設定、SSL対応。途中でNext.jsのバージョン互換性の問題が出て、ダウングレードして解決する場面もありました。
CMS・記事投稿
Sanity Studioの日本語化、オンラインデプロイ、記事投稿スクリプトの作成。この記事自体も、Markdownで下書きし、スクリプトでSanityに投稿して公開しています。
AIが処理した作業は、合計で72ステップ。デプロイ回数は約10回。
4.5時間といっても、やっていたことはこれだけあります。
今回つまずいた3つのポイント
4.5時間で完成したとはいえ、スムーズに一直線で進んだわけではありません。実際に手が止まったポイントが3つありました。
初版のデザインが無機質すぎた
AIが最初に出してきたデザインは、整ってはいたけれど「作りかけのテンプレート」に見えました。かっこいいけど、記憶に残らない。
そこから「人の気配を足す」「コピーを具体化する」「運営者の紹介を入れる」といった改善を何度も繰り返して、ようやくメディアとしての芯が出てきました。
文字の可読性が低かった
ダーク背景にfont-light（細い文字）を組み合わせた結果、雰囲気はあるけれど読みにくいサイトになっていました。
テキストの階層（見出し・本文・補助情報）のコントラストを整理し直して、可読性を上げる作業が必要でした。見た目の美しさと読みやすさは、意識しないとトレードオフになります。
CTAの強さのバランスが難しかった
メルマガ登録フォームを置いたものの、まだ配信サービスを決めていなかったので機能しないフォームになっていました。
結局「このサイトで発信すること」という説明セクションに差し替え、CTAボタンも記事一覧への誘導に変更しました。
派手にしすぎず、でも行動導線は残す。この匙加減は、AIに任せきれない部分でした。
1サイト目と2サイト目の違い
1サイト目は、WordPressで運営していたブログをSanity + Next.jsに移行するプロジェクトでした。これには数ヶ月かかっています。
時間がかかった最大の理由は、WordPressの有料テーマの装飾の移行です。吹き出し、ボックス、マーカーなど、テーマ固有のショートコードや装飾をすべてSanityのデータ構造に変換する必要がありました。数十種類の装飾パターンを記事すべてに対応させる作業で、当時のAIの性能では一発で正確に変換できないケースも多く、地道な修正作業が続きました。
転機になったのは、Claude Opus 4.6のリリースです。それまで苦戦していた複雑な変換処理が一気に通るようになり、作業が大幅に加速しました。AIの進化がそのままプロジェクトの進捗に直結した経験でした。
2サイト目は4.5時間。ゼロから新しく作るだけなので、移行作業がありません。加えて、技術構成も決まっている、AIへの指示の出し方もわかっている。
この差は、技術力よりも「判断の速さ」から来ています。
- どの技術を使うか → 迷わない
- どんなデザインにするか → 方向性をすぐ言語化できる
- AIにどう指示するか → 伝え方のコツがわかっている
AIを使いこなすには、AIに何をさせるかを素早く判断できることが大事です。それは1回やってみないと身につきません。
まとめ
AIでサイトを作ることは、もう特別なことではなくなりつつあります。
ただし「AIが全部やってくれる」わけではありません。AIは作業を圧倒的に速くしてくれるけれど、何を作るか、これでいいかを判断するのは人間です。
逆に言えば、判断さえできれば、コードが書けなくてもサイトは作れます。
まずは1サイト作ってみること。それが最大の学びになります。このサイトも、その実践のひとつです。