ナレッジ＆ニュース

普段は、Webサイトやチラシなどのデザインを担当しています。Webサイトのコーディングはいつも外部のコーダーさんにお願いしていて、自分ではHTMLもほとんど書けません。

そんな私が、2026年9月に公開したeシェルパの「AI導入支援サービス」のLPを、Claude（AI）と一緒に、コーディングから公開まで仕上げました。

結論からいうと、コーディングの知識がなくても、わずか3日半で担当者に初稿を確認してもらえるところまで進められました。

この記事では、実際の進め方やつまずいたところ、AIに任せてよかったこと・人がやるべきだったことを、包み隠さずお話します。
「AIって結局、業務でどこまで使えるの？」と感じている方の参考になればうれしいです。

なぜClaudeでコーディングしようと思ったのか

eシェルパでは数年前から、日々の業務にAI（Claude）を取り入れてきました。その経験をお客様にも活かしていただこうと始まったのが、AI導入支援サービスです。

「このサービスのLPを、AIが丸ごとコーディングしました」と言えたら、営業トークとしても強いよね！ そんな軽い気持ちで、まずはやってみることにしました。

今回は、次の4つがそろった状態でスタートしています。

• LPのデザインデータ（当社ではAdobe XDを使用）
• 自社で取得しているドメイン
• Webサーバー
• デスクトップ版のClaude

実際に完成したLPはこちらです。

完成したLPはこちら

ClaudeでのLP制作の流れ（全体像）

今回のコーディングは、次の5つのステップで進めました。

1. 静的なHTMLページを作り、各コンテンツの配置を固める（自分のPCだけで確認）
2. PHP・CSS・JavaScriptで組み直し、ページに動きをつける（自分のPCだけで確認）
3. 閲覧制限（認証）をかけてWebサーバーにアップし、スマホ表示やフォームの動きを確認する
4. 担当者に確認してもらい、修正する
5. GTM（計測タグ）を設定し、本公開する

個人的にいちばん重かったのは、2の「動きをつける」工程です。動きを指示するテキストファイルづくりに手間取り、「コーダーさんなら、ここまで書かなくても伝わるのに…」と思う瞬間が何度もありました。

それでは、各ステップを順番にご紹介します。

ステップ1：静的なHTMLページをつくる

デザインとのズレを防ぐプロンプト

デザインが完成し、いざClaudeにプロンプトを投げよう！というところで、Claudeのある「クセ」を思い出しました。

以前 X（旧Twitter）で、「AIのコーディングは目測で組まれるので、デザインから微妙にズレてしまう」という投稿を見かけて、保存していたのです。その投稿を参考に（ほぼそのまま使わせてもらい）、プロンプトを作りました。

最初に書いたプロンプトがこちらです。

こうしてClaude自身に「つくる→測る→つくり直す」をくり返させることで、デザインとのズレを小さくできます。

ちなみに、/instruction.md には次の情報を書いておきました。

まずはHTMLで配置を固める

最終的にはPHPで作りたかったのですが、まずはHTMLにしました。
HTMLなら自分のPCですぐに表示を確認できるからです。

動きやフォームはいったん後回しにして、静的なページで配置を固めてから、PHPに変えてもらいました。（コーディングはさっぱりなので、このやり方が正解かどうかはわかりませんが…）

このとき作成されたHTMLがこちらです。

修正したい箇所は、プロンプトに直接書き込まず、md形式のファイルに別途まとめました。そのうえで「修正依頼箇所があります。/Correct1.mdに情報を記載しました。」とClaudeに伝えています。

ステップ2：動きのあるページに変換する

動きの指示書をつくる

次に、ページに動きをつけるためのコーディングをお願いしました。プロンプトは次のとおりです。

本当はXDのデータをそのまま渡したかったのですが、共有用URLを発行してもClaudeでは読み込めなかったため、動きの指示書を別に作ることにしました。

とはいえ指示書を自力で書くのは難しかったので、型の作成はClaudeに手伝ってもらいました。いちばん苦労したのが、この /Motion Spec.md をつくる作業です。ここにかなりの時間を使ってしまいました。

コンポーネント名.pngはXDでトップページのデザインにコンポーネント名を書き込んだものです。

表示確認はローカル環境（Local）で行う

この段階の表示確認は、「Local（https://localwp.com/）」というツールを使って自分のPCの中だけで行い、修正は静的なページのときと同じく専用のmdファイルを作ってClaudeに読み込んでもらいました。
イラストや画像は、Claudeが作った一覧表をもとに用意し、指定のフォルダに入れるだけでページに反映されました。

ここまでで、コーディング開始からおよそ3日です。

ステップ3・4：サーバにアップして担当者に確認

アップロード用のファイル準備

スマホでの見え方やフォームの動きを確認するため、閲覧制限（ベーシック認証）をかけた状態でWebサーバーにアップロードしました。

「Webサーバーにアップロードする」と伝えたうえで、アップロード用のファイル一式もClaudeにまとめてもらいました。

スマホ用のデザインは別に作らず、レイアウトはClaudeにおまかせ。表示がおかしい部分だけXDでデザインを起こし、追加で指示しました。

スマホ対応とフォームの実装は、およそ半日で終わりました。

落とし穴：お問い合わせ完了メールが届かない？

このとき、AIならではだと感じたのが、フォームを実装したときの出来事です。

これまでお願いしていた外部のコーダーさんは、フォームが送信されたら受信側（当社）と送信側（お問い合わせした方）の両方に「お問い合わせ完了メール」を送る仕様を、当然のように実装してくれていました。

ところが今回、Claudeが最初に作ったフォームは、送信側には完了メールを送らない仕様になっていました。
「送らない」という発想がなかった私は、送信エラーが起きているものと思い込み、必死に原因を調べることに。そもそも送る仕様になっていないのですから、そりゃ何回試しても届かないわけです…。

コーダーさんなら言わなくても汲み取ってくれることも、AIには自分の「当たり前」が通じないかもしれません。
当然と思っている仕様こそ、言葉にして伝えておくのが確実です。

Webサーバーにアップロードしたあとは、担当者に認証用のIDとパスワードを伝えてページを確認してもらい、指摘のあった箇所を何度かClaudeに修正してもらいました。

ステップ5：GTMの設定と本公開

アクセス解析の準備

最後にアクセス解析のためのGTM（Googleタグマネージャー）を設定しました。
普段アクセス解析を担当している身としては、計測の準備まで一気通貫でできたのは大きかったです。

このときのプロンプトがこちらです。

実質3週間で本番公開

こうして完成したのが、AI導入支援サービスのLPです。

コーディング開始から担当者の確認まで含めて、公開までにかかったのは約1ヶ月。夏休みをはさんだので、実質は3週間ほどです。

AIでLPを内製してわかった「任せること・人がやること」

実際にやってみて、Claudeでも思った以上にしっかりとサイトを構築できることが分かりました。
初回だったので少し時間はかかりましたが、ClaudeとAdobe XDを連携できれば、もっと短時間でコーディングできそうです。

特に、ベーシック認証（公開前の閲覧制限）やフォームのメール文字化けの対応など、デザイナーが苦手な領域ほどAIが心強い味方になってくれました。一方で人が担うべき部分もはっきりしました。

AIに任せてよかったこと	人がやるべきこと
コーディング	何を作るか決める
不具合の原因調査	デザインの判断
表示崩れなどのチェック作業	最終確認
手順書づくり	社内での承認

つまりAIは、「指示の出し方」と「確認の仕方」に型さえあれば、非エンジニアにとっても十分な戦力になる、というのが今回いちばんの学びです。

まとめ：非エンジニアのAI活用は「型」が重要

今回のコーディングを通して、自分の専門外の領域でもAIを活用すれば十分に形にできると実感しました。

コーディングに限らず、「AIを触ってみたけれど、業務に定着しない」という悩みの原因は、ツールそのものよりも使い方の“型”がないことにあるのではないでしょうか。

eシェルパは、こうした自社の実践をもとにAIの導入から社内への定着までを伴走支援しています。
「社内で対応できたらいいのに」と感じている業務も、AIを活用すれば対応できるようになるかもしれません。

まずは中小企業ですぐに使える「AI活用レシピ集」を無料でダウンロードしてみてください。

サービスの詳しい内容や、無料30分相談会の申し込みはAI導入支援サービスのページからご確認ください。

▶中小企業向けAI導入支援サービスの詳細を知る

ぜひ、弊社の業務にお役立てください。