AIデザインからコードへ：画像を編集可能なWebサイトレイアウトに変換

Calin GeorgeNovember 5, 2026

AI Design to Code: Turn Images Into code

完成したデザインを実装済みのインターフェースに変えるのに役立つツールを活用すれば、開発チームへの依存を減らせます。デザインのプロトタイプやシンプルなスケッチから、完成したWebサイトやWebアプリを作るのは、思ったより簡単になりました。シンプルなFigmaデザインや、完成形のイメージを示すスクリーンショットがあれば、作業を始められ、手作業でのコーディングを大幅に省けます。

AIデザインからコードへの変換ツールは、ビジュアルを参考に編集可能な初期バージョンを作成できます。TeleportHQでは、AIアシスタントに画像を添付して必要な内容を説明し、エディター内で生成された要素を調整できます。ここでは、その手順と公開前に確認すべき項目を紹介します。

AIによるデザインからコードへの変換とは

AIによるデザインからコードへの変換では、ビジュアルの参考資料と文章による指示を使ってWebサイトのレイアウトを生成します。参考資料には、既存サイトのスクリーンショットや新しいページのモックアップを使用できます。生成されるレイアウトには、見出しやボタンなど編集可能な要素と、その見た目を決めるスタイルが含まれます。

AIは目に見える情報を読み取ります。画像に含まれていない詳細については推測する必要があり、小さな画面で列をどのように並べ替えるかなどもその一例です。そのため、デスクトップでのプレビューが良好でも、さらに確認が必要です。コンテンツの順序が適切か、各操作要素が意図したとおりに動作するかは、自分で判断しましょう。

マーケティングチームでは、この方法によって、コンセプトの承認からレビュー用ページの準備までに発生する反復作業を減らせます。エージェンシーも、同じワークフローでクライアント向けのプロトタイプを作成できます。重要なのは最初のプレビューが表示されるまでの速さだけでなく、完成したものにどれだけ修正が必要かです。

適切な素材から始める

出発点となる素材によって、ページの作り方は変わります。スクリーンショットに含まれるのはピクセルですが、Figmaファイルには構造化されたデザイン情報も含まれています。TeleportHQでは、こうした入力に応じて異なるワークフローを利用できます。

出発点となる素材	おすすめの方法
スクリーンショットまたは書き出したモックアップ	レイアウトの指示を添えて、AIアシスタントにアップロードします。
編集可能なFigmaデザイン	TeleportHQプラグインを使って、選択したフレームをインポートします。
大まかなワイヤーフレーム	不足している詳細を説明します。コンテンツの順序やボタンの動作も含めてください。
デザインのない文章の brief	AIウェブサイトビルダーから始めましょう。

大まかなスケッチでは、詳細なモックアップよりも多くの点が未確定のままです。ワイヤーフレームに「フォーム」と書かれた枠がある場合は、入力項目と送信後の動作を指定してください。そうしないと、実際の要件に合わない、もっともらしいレイアウトが作成される可能性があります。

ビジネスの説明からプロジェクトを始める場合は、 AIウェブサイトビルダーを使うと、よりスムーズに着手できます。ビジュアルの配置がすでに brief に含まれている場合は、画像を参考資料として使いましょう。

スクリーンショットからレイアウトを作成する

ヒーローエリアや料金表など、ひとつのセクション全体から始めましょう。関係のない部分を切り取り、意図した構成を見分けやすくします。文字が読みやすい鮮明な画像を選びましょう。複数のレイアウトが競合する大きなスクリーンショットは、必ずしも役立つとは限りません。

このスクリーンショットからレイアウトを作成するガイドでは、PNG、JPEG、GIF、WebPに対応しており、画像1枚あたりの上限は20 MB、1メッセージあたり最大3枚と記載されています。画像を使ったリクエストではAIトークンを消費します。

プロジェクトを開き、キャンバスの上にある AIアシスタント を選択します。
新しいレイアウトを追加したい領域を選択します。
選択 画像を添付するか、スクリーンショットをチャットにドラッグしてください。
レイアウトと変更したい内容を説明し、リクエストを送信します。

たとえば、次のように入力できます。

ソフトウェアのランディングページのヒーローセクションに、この参考画像を使用してください。テキストは左側、製品画像は右側に配置します。プロジェクトで既に使用している色とフォントを適用してください。スマートフォンでは、画像の上にテキストを配置します。メインボタンのリンク先は /contact にしてください。

生成されたセクションを参考画像と照らし合わせて確認します。間隔とコンテンツを分けて確認し、問題が構造上のものなのか、単にテキストが合っていないのかを見極めましょう。

具体的なリクエストでレイアウトを調整する

「このセクションを改善して」のような漠然としたリクエストでは、何を改善するかをAIが判断することになります。目に見える問題を具体的に説明しましょう。見出しの折り返しが不自然な場合は、画面サイズを示し、どう表示したいかを説明してください。

たとえば、「スマートフォンの幅では、見出しのサイズを小さくして、最大4行に収めてください。デスクトップの見出しは変更しないでください。」と指示できます。これなら編集後に確認する条件が明確になります。また、ページ内の関係ない箇所が変更される可能性も抑えられます。

TeleportHQの AIプロンプトのガイドラインでは、変更したい要素を選択し、一度に1つのセクションを編集することを推奨しています。別の作業に移るときは、新しいチャットを始めましょう。関連する修正はまとめて依頼すると、リクエストが分かりやすくなります。

共通スタイルは早めに設定しましょう。ボタンや見出しについてセクションごとに異なる指示を出すと、後から見た目の不統一を修正しにくくなります。残りのセクションを生成する前に、プロジェクトの色と文字スタイルを確認してください。

プラグインからFigmaのデザインをインポートする

元のFigmaファイルがある場合は、 Figmaのインポート手順を使用します。必要なフレームを選択し、 TeleportHQ - Design to Codeを開いて、 新しいプロジェクトとしてエクスポートを選択します。既存のプロジェクトにデザインを追加するには、 オブジェクトをクリップボードにコピー を使って、エディターに貼り付けます。

可能な場合は、フレームにオートレイアウトを設定します。オートレイアウトでは、要素の間隔やサイズ変更時の動作など、コンテナ内での要素の配置方法を指定できます。固定位置のフレームは、特に利用可能な幅が変わる場合、インポート後により多くの修正が必要になることがあります。

エクスポートする前に、プラグインのオートレイアウト評価を確認してください。大規模なデザインの場合は、セクションごとにインポートし、結果を確認します。レスポンシブ対応のフレームをまとめてインポートする場合は、デスクトップ版とモバイル版でレイヤー名を統一してください。

AIを使わずに共有スタイルを編集する

調整のたびに新しいプロンプトを入力する必要はありません。TeleportHQでは、AIトークンを消費せずに AIで生成したウェブサイトを手動で編集できます。デザイン言語パネルで共有カラーや余白を変更したり、共有CSSクラスを編集したり、個別の要素を選択してスタイルを調整したりできます。

サイト全体で同じ問題が発生している場合は、共有値が役立ちます。すべてのセカンダリボタンの枠線を濃くする場合は、各ボタンを個別に編集するのではなく、共通のスタイルを変更します。その後、該当するページを確認し、背景や周囲のコンテンツに合っていることを確かめてください。

細かな手動編集のほうが、生成を繰り返すより調整しやすいことがあります。意図した変更が最も明確になる方法を選びましょう。

動作とモバイルレイアウトをテストする

ページが参考デザインに似ていても、使いにくい場合があります。長い見出しやボタンのラベルなど、実際の文章を使ってテストしてください。プレースホルダーの文章では、最終的な文言を追加して初めて現れるレイアウト上の問題が見えないことがあります。

公開前に、以下の項目を確認してください：

画面の狭い端末で横スクロールが発生したり、コンテンツが途切れたりしないか確認してください。
すべてのナビゲーションリンクと主要ボタンをテストしてください。
フォームに入力し、送信成功時とエラー時の状態を確認してください。
キーボードで操作できることと、フォーカス位置が視覚的にわかることを確認してください。
見出しの順序と、画像に適切な代替テキストが設定されていることを確認してください。

コンテンツを変更した後は、モバイル表示の最終レイアウトをもう一度確認してください。見出しが長くなると、ボタンが画面内に表示されなくなったり、隣り合うカードの高さが不ぞろいになったりすることがあります。該当するスタイルを修正し、影響を受ける項目を再確認してください。

プロジェクトの公開方法を決める

TeleportHQのデザインからコードへのワークフローには、ビジュアル編集と公開機能が含まれています。プラットフォームを通じて公開することも、対象となるウェブサイトプロジェクトをダウンロードして外部でホスティングすることもできます。適切な方法は、プロジェクトで使用している機能によって異なります。

最新のコードのエクスポートに関するドキュメントによると、ProプランとPremiumプランではウェブサイトをダウンロードできます。トライアルのワークスペースではコードを10回表示できますが、ダウンロードはできません。利用できる形式にはHTMLや複数のJavaScriptフレームワークがありますが、データソースを接続している場合、コードのダウンロード形式はNext.jsに限られます。そのほかの機能にも、形式ごとの制限があります。

ウェブアプリには異なるルールがあります。ユーザーのサインインやサーバー上のワークフローなどの機能には、TeleportHQのサーバー機能が必要です。これらのプロジェクトはTeleportHQを通じて公開され、コードとしてダウンロードすることはできません。外部ホスティングが必要な場合は、機能を追加する前にウェブサイトとウェブアプリの違いをご確認ください。

プロジェクトに合ったツールを比較する

デザインからコードを生成するツールを比較する際は、それぞれの評価で同じ代表的なセクションを使用しましょう。実際のコンテンツがあり、少なくとも1つの操作機能を備えたセクションを選びます。装飾的な要素だけのシンプルなヘッダーでは、ツールが実用的なページをどのように処理するか、ほとんど判断できない場合があります。

生成後に必要となる修正を記録しましょう。編集を繰り返さずに共通スタイルを変更できるか、また、別の人が生成された構造を理解できるかを確認します。その評価には公開要件も含めてください。チームが想定するワークフローで維持できないなら、見た目が正確でも価値は限られます。合意した要件に照らして出力を評価できるよう、プレビューと元の依頼内容を並べて確認しましょう。