このホームページ（reed-river.co.jp）は、AIとチャットで会話しながら作りました。ページの文章やデザイン、お問い合わせフォーム、検索エンジンへの登録まで、実際の作業の大半はAIが行っています。この記事では、作業開始から公開までの2日間に何をしたのか、AIに任せたことと人が決めたこと、途中でつまずいた点を、実際の記録をもとにまとめます。
使ったもの
- サーバー：レンタルサーバー（ConoHa WING）
- サイトの仕組み：WordPress と、有料テーマ（STORK SE）
- プラグイン：お問い合わせフォーム（Contact Form 7）、検索エンジン対策（Yoast SEO）
- AI：サーバーやファイルを直接操作できるAIエージェント（Claude Code）
ポイントは、AIに「やり方を教えてもらう」のではなく、「作業そのものをしてもらう」ことです。AIエージェントはサーバーに接続して、WordPressのページ作成や設定の変更をコマンドで実行します。人はチャットで「こうしたい」と伝え、できあがったものを確認します。
公開までの2日間
1日目：構成とページづくり
- ロゴの画像や、販売している端末の写真・仕様などの素材を用意
- 作業前に、サーバーのデータをまるごとバックアップ
- ページ構成（トップ・事業内容・会社概要・お知らせ・お問い合わせ）を決めて、各ページの文章とデザインを作成
2日目：仕上げと公開
- トップページの背景動画や写真を、無料素材サイトの候補から選んで配置
- サイネージ端末の写真から、紹介用のCM動画を作成
- お問い合わせフォームと、自動返信メールの設定
- 夕方に公開。同じ日のうちに、アクセス解析（Googleアナリティクス）と、Google・Bingへのサイト登録まで完了
公開した後も、ロゴの差し替え、AI活用事例の説明動画づくり、表示速度の改善などを、同じようにチャットで頼んで進めています。
AIに任せたこと、人が決めたこと
| AIに任せたこと | 人が決めたこと |
|---|---|
| ページの作成、文章の下書き、デザイン（CSS） | ページの構成と、伝えたい内容 |
| 写真・動画の候補集めと、候補を並べた確認ページの作成 | 候補の中から、使う写真や動画を選ぶ |
| 動画の加工、端末のCM動画づくり | 文章とデザインの確認、直してほしい点の指示 |
| フォーム、メール、アクセス解析、検索エンジン登録の設定 | 各サービスへのログインや、利用規約への同意 |
| 不具合の原因調査と修正、作業内容の記録 | 公開してよいかの最終判断 |
AIは、選択肢を集めて並べるのが得意です。写真なら候補を十数枚集め、番号つきの一覧ページを作ってくれるので、人はその中から選ぶだけで済みます。一方で、「どれが自社らしいか」「公開してよいか」は人が決めるべきことです。実際に、AIが社名にちなんで選んだ写真を、人の判断で別の画像に差し替えたこともあります。
動画やサムネイルは、どのサービス・道具で作ったか
このサイトには、背景の動画、端末の紹介動画、AI活用事例の説明動画、動くサムネイルなど、動きのある素材がたくさんあります。どれも、AIが次のサービスや道具を組み合わせて作りました。
| 作ったもの | 使ったサービス・道具 | 作り方 |
|---|---|---|
| トップページなどの背景動画・写真 | Pixabay（商用利用できる無料素材サイト）、Google Chrome | AIがブラウザでPixabayを検索して候補を集め、番号つきの確認ページを作成。人が選んだものを、AIが軽く圧縮して配置 |
| サイネージ端末のCM動画 | 端末の写真（自社で用意）、macOSの画像解析機能（Vision）、FFmpeg（動画編集のソフト） | 写真から端末だけを自動で切り抜き、文字や背景の画像と組み合わせて、FFmpegでスライドやズーム、場面の切り替えをつけて動画に |
| AI活用事例や記事の30秒の説明動画 | HTML・CSS（Webページの部品）、Google Chrome（Puppeteerで自動操作）、FFmpeg | 画面の動きをWebページとして作り、Chromeで1コマずつ撮影。FFmpegで動画ファイル（MP4）にまとめる |
| 動くサムネイル（アニメーションWebP） | FFmpeg、Google製のWebP変換ツール（cwebp・webpmux） | 動画から数秒を切り出し、終わりと始まりをなめらかにつないで、繰り返し動く画像に変換 |
| 動画の中に映るホームページの画面 | Google Chrome | 公開中のページを、パソコンとスマホの大きさで自動的に撮影 |
動画づくりの処理は、すべて手元のパソコン（Mac）の上で行い、有料の動画生成サービスは使っていません。できあがったファイルは、AIがサーバーにアップロードしてページに配置しています。無料素材を使う場合は、商用利用できるかどうかの確認と、どの素材をどこに使ったかの記録も、AIに任せられます。
途中でつまずいたこと
すべてが一度でうまくいったわけではありません。ただ、どれもAIが原因を調べて直しています。
記事に「正しいユーザーIDを指定してください」と表示された
コマンドで記事を作ると、WordPressは「誰が書いたか」を空のまま登録してしまいます。そのため、テーマの「この記事を書いた人」欄がエラーを出していました。投稿者を管理者に設定し、作成スクリプトも直して、再発しないようにしました。
動くサムネイルに、ブロック状のノイズが出た
お知らせの動くサムネイル（アニメーションWebP）を作ったところ、背景のぼけた部分に四角いノイズが出ました。前のコマとほぼ同じ部分を使い回す圧縮のくせが原因だったため、全コマを描き直す方法に変えています。また、WordPressが自動で作る縮小版の画像は動かないことも分かり、一覧でも元の画像を使う設定にしました。
作業のたびに「更新日」が進んでいた
ページを反映するスクリプトを実行するたびに全ページが保存し直され、お知らせに見覚えのない「更新日」が表示されていました。中身が変わっていないページは保存しないように直しています。
お問い合わせの自動返信メールが、迷惑メールと判定されないか
サーバーから送るメールは、設定によっては迷惑メールと判定されることがあります。送信元の情報をそろえる設定を加え、受信側でのなりすまし判定（SPF・DMARC）に合格することを、実際に送って確かめました。
やってみて分かった、うまく進めるコツ
- 最初にバックアップを取ってもらう：何かあっても元に戻せる状態で始めると、安心して任せられます。
- 選ぶ作業は、候補を出してもらってから人が決める：写真や文言は、AIに一つに決めさせず、複数の候補から選ぶほうが満足度が高くなります。
- 作業の記録を残してもらう：どの設定をどう変えたかをファイルに書き残してもらうと、後から直すときや、別の人に引き継ぐときに困りません。
- 公開の判断は人がする：内容の正しさや、会社として出してよいかは、必ず人が確認します。
まとめ
AIエージェントを使うと、ホームページづくりの「手を動かす作業」の大半を任せられます。人の役割は、伝えたいことを決め、候補から選び、内容を確かめることです。リードリバーのAIコンサルティングでは、こうしたAIの使い方を、実際の業務に合わせて一緒に進めています。ホームページに限らず、「この作業もAIに任せられないか」と思ったら、お気軽にご相談ください。
