AIコーディングでここまでできる！Web制作で実現できること7選【Figma連携も】

AIコーディングは、もはや「ちょっとした補助」ではなく「作業を任せられる」レベルまで進化しています。
デザインカンプからの静的コーディングや既存サイトの改修、WordPressテーマ化まで、AIでどこまで実現できるのかを実体験を交えて紹介します。
Claude Codeを使った実際の活用例付きなので、AIコーディングを始めたい方はぜひ参考にしてください。

AIコーディングは「補助」から「任せる」時代へ

少し前までのAIコーディングといえば、「この書き方を教えて」「エラーの原因を教えて」といった、あくまでも質問相手のような使い方が中心でした。

ところが今は、サイトのファイル一式を読み込んで、コードを書いて、修正まで自分で進めてくれるところまで来ています。

私も普段からClaude Codeを使ってコーディングをしていますが、これまで40時間ほどかかっていた作業が、10時間以内に収まるくらいまで短縮できるようになりました。

では実際に、AIコーディングでどんなことができるのか。Web制作の現場目線で見ていきましょう。

デザインカンプから静的コーディング

個人的に一番驚いたのがこれです。

Claude CodeとFigmaを連携させると、デザインを見比べながらコードを書く、という作業そのものがほぼなくなります。
FigmaのフレームのURLを渡して「これをコーディングして」とお願いするだけで、AIがデザインデータを直接読み取り、HTMLとCSSを書き上げてくれるんです。

私が実際に試したときも、細かい調整だけでほぼそのまま使えるレベルの仕上がりでした。
余白やフォントサイズを一つずつ測って書き写していた頃を思うと、本当に時代が変わったなと感じます。

Figma MCPとは？

この連携を実現しているのが「Figma MCP」という仕組みです。

MCPは、AIが外部のツールやデータにアクセスするための共通ルールのようなもの。
Figma MCPを使うと、Claude CodeがFigmaのレイアウトやコンポーネント、色や余白などの情報を読み取れるようになります。画像を見て「なんとなく」再現するのではなく、デザインの数値をそのまま読み取ってくれるのがポイントです。

Claude Codeへの設定方法

Figma公式の手順では、Claude Codeで以下のコマンドを実行してプラグインをインストールします。

インストール後にClaude Codeを再起動し、「/plugin」からFigmaのサーバーを選んで認証すれば準備完了です。
この方法（リモートサーバー）は、Figmaの全プランで利用できます。

ツールのアップデートが早い分野なので、設定する際は最新の公式手順も確認してください。

参考：Claude Code and Figma: Set up the MCP server – Figma Learn

実際のお願いの仕方

Figmaでコーディングしたいフレームを右クリックし、「選択範囲のリンクをコピー（Copy link to selection）」でURLをコピーします。
あとはClaude Codeに、URLと一緒にお願いを伝えるだけです。

「クラス名の付け方」や「使うCSSの書き方」など、普段の自分のルールも一緒に伝えておくと、仕上がりがより自分好みになります。

既存サイトの修正・改修

Claude Codeは、サイトのファイル一式を読み込んだうえで作業してくれます。

「お問い合わせボタンの色を全ページで変えたい」「このセクションをトップページにも追加したい」といった依頼も、どのファイルのどこを直せばいいかをAIが探して修正してくれるので、自分で一つずつファイルを開いて探す手間が省けます。

他の人が作ったサイトの改修など、コードの全体像をつかむのに時間がかかる場面でも心強い存在です。

レスポンシブ対応

PC用のデザインしかない場合でも、「スマホで見やすいように調整して」とお願いすれば、メディアクエリを使ったレスポンシブ対応をしてくれます。

横並びの要素を縦に並べ替えたり、文字サイズを調整したりといった定番の対応はお手のものです。
ただし、実際の見え方はAIには分からないので、最後は必ず実機やブラウザで確認しましょう。

JavaScriptの動きの実装

スライダー、アコーディオン、ハンバーガーメニュー、スクロールに合わせたアニメーションなど、よく使う動きもAIにお任せできます。

「ふわっと下から表示されるように」「ゆっくりめに」といった、感覚的な言葉でのお願いでもしっかり汲み取ってくれるのがうれしいところ。
JavaScriptが苦手な方ほど、恩恵を感じやすい部分だと思います。

WordPressテーマ化

静的にコーディングしたHTMLを、WordPressのテーマに組み込む作業もAIが得意とするところです。

header.phpやfooter.phpへの分割、投稿一覧のループ、カスタム投稿タイプの追加など、手順が決まっている作業ほどAIに任せやすいです。

一方で、WordPressのコードはセキュリティ面の確認が欠かせません。出力のエスケープなど、チェックすべきポイントはAIが書いたコードの品質チェック記事でまとめています。

metaタグ・構造化データの設置

SEOに欠かせないmetaタグやOGPの設定も、AIにお願いすれば全ページ分まとめて書いてくれます。

さらに、検索結果でサイト情報をリッチに表示させるための「構造化データ」のように、書き方が少し複雑なコードも得意分野です。

ただし、タイトルやディスクリプションの文章は、そのページで何を伝えたいかによって変わります。AIの提案をたたき台にして、最後は自分の言葉で整えるのがおすすめです。
metaタグの基本についてはmetaタグを駆使して基礎的なSEO対策の構築せよ【SEO必須項目】をご覧ください。

公開前チェックの補助

AIは、コードを書くだけでなくチェック役としても活躍してくれます。

「リンク切れがないか確認して」「画像にaltが入っているかチェックして」とお願いすれば、サイト全体のファイルを見て抜け漏れを教えてくれます。
人の目だと見落としがちな細かい部分も拾ってくれるので、ダブルチェックの相手としてとても頼りになります。

それでも人がやるべきこと

ここまで読むと「もう全部AIでいいのでは？」と思うかもしれません。

でも、AIが書いたコードが本当に正しく動くか、クライアント様の意図に合っているか、ユーザーにとって使いやすいか。ここを判断して責任を持つのは、やっぱり人の仕事です。

AIにコードを任せられるようになった分、制作者の役割は「書く人」から「確認して仕上げる人」へと少しずつ変わってきているのかもしれません。
AIのコードを公開する前に確認したいポイントは、AIが書いたコード、そのまま公開してない？Web制作者のための品質チェック9項目で詳しく紹介しています。

まとめ

今回は、AIコーディングでできることを7つ紹介しました。

私自身、FigmaのURLを渡しただけで静的コーディングがほぼ終わっていたときは、正直かなり衝撃を受けました。
作業時間が大幅に減った分、デザインの細かな調整やクライアント様とのやり取りなど、人にしかできない部分に時間を使えるようになったのが一番の変化です。

AIは使えば使うほど、できることの幅が広がっていきます。
まずは小さな作業からで大丈夫なので、ぜひあなたの制作フローにもAIを取り入れてみてください！