Claude Codeでチラシ1枚からWebページを自分で作った話

自社サイトの更新、後回しになっていませんか？

クライアントの案件が優先されるのは当然で、制作チームに依頼しても着手までに時間がかかります。結果、「いつか更新しよう」で止まってしまうページが出てきます。リクトも例外ではありません。

「AIを活用するDX研修」のサービスページも、そうなりかけていました。

そこで今回は「まず公開する」を優先しました。 Claude Code（AIにコードを書かせて実行できるツール）を使って自分でページを作り、デザインとコーディングは後から制作チームに依頼する段取りにしました。

今回はあくまで「内容を世に出す」ことがゴールです。

スタートはチラシ1枚だった

社長から受け取ったのは、サービス概要をまとめたチラシの画像でした。料金・プログラム内容・よくあるお悩み──必要な情報は揃っていますが、これはあくまで「印刷物」の構成であって、Webページの構成とは別物です。

そこでClaudeに相談しました。「このチラシをもとに、Webページとして伝わる構成を考えてほしい」。

Claudeはチラシの情報を読み込み、訪問者の視線の流れや読み進める順番を考慮したWebページの設計を提案。それをHTMLファイル（ページの骨格となるデータ）として書き出してくれました。

このHTMLを社内でレビューしてもらい、構成・内容ともにOKが出た段階で、WordPressへの実装に進みました。

最初の失敗──「改変」されてしまった

「この設計図をWordPressに反映させて」と頼みました。

するとClaude Codeは設計図の内容を自分なりに解釈して書き直してしまいました。 見出しの言葉が変わり、文章のニュアンスが変わり、「これじゃない」という仕上がりに。

「なぜ勝手に内容を変えているんですか」と指摘すると、すぐに「設計図をそのまま使います」と方針を切り替えてくれました。以降は「設計図の文章には一切手を加えないこと」と明示してから指示を出すようにしました。

AIは指示されない限り“よくしよう”とします。

WordPressが受け付けなかった

設計図どおりのHTMLを作ってもらったのですが、今度はWordPressの管理画面で「無効なコンテンツ」というエラーが出ました。

原因は、WordPressのブロックエディタ（管理画面でページを編集する機能）の仕様にありました。ブロックエディタはHTMLをそのまま貼り付ける形式ではなく、パーツごとに独立したかたまりとして管理する仕組みになっています。

Claude Codeはエラーを分析し、セクションごとに分割する形に構造を変更。管理画面から正常に編集できるようになりました。

写真の取り込みもおまかせ

設計図には講師2名の顔写真が含まれていました（データとして埋め込まれた状態）。

「写真がない」と伝えると、Claude Codeはその写真をWordPressの画像管理ライブラリに自動でアップロードし、ページへの紐づけまで一気にやってくれました。管理画面を開いて手動でアップロードする手間が、コマンドひとつで完了しました。

細かい修正も「一言」で動いた

ページが形になってからは、細部の修正を次々と依頼しました。

• バッジの文言を変える
• 見出しの大きさを整える
• 電話番号を追加する（スマホはタップしたらそのまま発信、PCは表示のみ）
• ボタンのリンク先とテキストを変える
• 「Claude / Gemini 活用」→「Claude / Gemini / ChatGPT 活用」に修正する

どれも「このテキストをこう変えて」と一言伝えるだけで、Claude Codeがプログラムを修正して実行してくれました。制作チームへの指示書を書いて、修正が戻ってきてチェックして……という往復がなく、変更のサイクルが数分単位になりました。

公開してから「つなげる」作業をした

ページを下書きとして公開したあと、「このページに向けてリンクを張るべき既存ページを探して」と依頼しました。

サイト内のページどうしをリンクでつなぐと、検索エンジンに「このサイトにはこのテーマの情報がある」と伝わりやすくなります（SEO上の内部リンク施策）。ただ、対象になりそうなページを全部目視で確認するのは手間がかかります。

Claude Codeはサイトのサイトマップ（ページURLの一覧）とキーワード検索を組み合わせてサイト内を調べ、AI活用・DX・業務効率化などのテーマに関連する7ページを候補として提示してくれました。目視確認の作業が、数分で終わります。

候補7ページへのリンク設置を依頼すると、Claude Codeは各ページの既存コンテンツを読み込み、文脈に合う位置にリンクを挿入するプログラムを生成・実行。リンクテキストは「AIを活用するDX研修」に統一し、7ページ分の作業が15分程度で完了しました。

まとめ：必要だったのは「言語化する力」だった

コードを書くのに時間はかかりませんでした。エラーも、AIが直してくれました。時間がかかったのは「何を作りたいか」を正確に言葉にすることでした。

• 「そのままで」と明示しないと、AIが勝手に改善しようとする
• エラーが出ても、原因と対処法はAIが考えてくれる
• 探す・確認する・設置する、という繰り返し作業はAIが代わりに動いてくれる

コーディングの知識は不要でした。必要なのは、自分が何を作りたいかを言語化する力だけです。

今回作成したページ「AI実装スプリント」も併せてご確認ください。

「やりたいことはあるのに、公開まで進まない」——それが一番もったいないと、今回の経験で改めて感じました。同じようなお悩みがあれば、ぜひ一度ご相談ください。