1. HOME
  2. WEBブログ
  3. 手書きのメモが10秒でウェブ画面に!?ChatGPTの魔法のような「画像からコード生成」の裏技

手書きのメモが10秒でウェブ画面に!?ChatGPTの魔法のような「画像からコード生成」の裏技

公開日2026年3月2日

頭の中にあるウェブサイトのイメージ、うまく伝えられていますか?
「こんな感じのキャンペーンページを作りたい」「ここに写真をおいて、横にボタンを置きたい」ウェブサイトのアイデアは頭にあるのに、それをいざ形にしようとすると難しいですよね。専門知識がないと、自分のイメージを具体的に表現できずにもどかしい思いをすることが多いと思います。

そんなハワイの中小企業経営者やウェブ担当者の皆様に、本日はChatGPTを使った「超初心者向け・裏技機能」をご紹介します!

そこで大活躍!ChatGPTの「画像からコード生成」機能

実は今のChatGPTには、手書きのメモやラフ画を読み込ませると、それを実際のウェブページ(HTMLコード)に変換してくれる」という驚きの機能があるんです。プログラミングの知識は一切不要。まるで魔法のように、あなたの頭の中のイメージが画面上に現れます。

誰でもできる!使い方3ステップ使い方はとてもシンプルです。今回は架空のハワイのカフェのページを作る手順で解説します。

ステップ1:まずは紙に理想のレイアウトを描く

まずは、コピー用紙やノートにボールペンで「こんなページにしたいな」というレイアウトをざっくりと描いてみてください。四角を書いて「写真」、線を引いて「テキスト」といった簡単なもので十分です。描けたら、それをスマホで撮影します。

手書きのワイヤーフレームが描かれたノートと青いペン、スマートフォンが木製のテーブルの上に置かれている画像でウェブデザインを始める

ステップ2:ChatGPTに画像をアップロードしてお願いする

次に、ChatGPTのチャット画面を開き、クリップマーク(または+ボタン)から先ほど撮影した写真をアップロードします。そして、以下のようなお願いの文章(プロンプト)を入力して送信するだけです!

【コピーして使えるプロンプト】

この手書きのメモをもとに、ハワイのカフェのウェブページのレイアウトを作成してください。
初心者でもわかりやすいように、シンプルなHTMLとCSSのコードを書いてください。
ボタンの色は、ハワイの海のようなブルーにしてください。

チャットインターフェイスに「何を手伝えますか?」と表示された画面。ユーザーがハワイのカフェのウェブページのレイアウトについて聞いている。
3-ワンポイントアドバイス:ハワイのお店向けのChatGPTプロンプト例

よりハワイらしさを出すために、「背景は薄いサンドベージュにして」「フォントはリラックスした雰囲気のものを選んで」など、具体的なイメージを少し言葉で足してあげると、さらに精度の高い結果が返ってきます。

まとめ:まずは自分のChatGPTでコード生成を形にしてみよう!

いかがでしたか?「プログラミングなんて全く分からない」という方でも、この機能を使えば「自分の作りたいページのイメージを視覚化する」ことができます。

もちろん、これをそのまま本番のウェブサイトに使うには少し調整が必要ですが、「こんな感じにしたい!」という土台を自分で作れれば、その後ウェブ制作のプロに相談する際も、よりスムーズに理想のサイトに近づけることができます。

ぜひ明日の業務から、この「画像読み込み機能」を試してみてくださいね!

カテゴリーWEBブログ

by奈良 鑑三

QP-WEB社長、アメリカで20年以上ウエブ制作、プログラミングそして日英バイリンガルSEOのパイオニアとして活躍。ウエブマーケティングでは何十万ものキーワード経験があり、日本とアメリカの架け橋としてWEB業界で数多くの業績を残されております。
【コピペで無料診断】ChatGPTを使った自社サイトSEO・UX改善プロンプト3選

【コピペで無料診断】ChatGPTを使った自社サイトSEO・UX改善プロンプト3選

「ウェブサイトの調子はどうですか?」と聞かれて、自信を持って「絶好調です!」と答えられる経営者やウェブ担当者の方はどれくらいいるでしょうか。病院の健康診断には毎年行くのに、24時間365日働いてくれる自社最大の営業マンである「ウェブサイト」の健康診断は、数年間放置状態……なんてことは珍しくありません。...

続きを読む
ハワイのローカル客&観光客に見つけてもらう!Google検索・マップ対策の基本

ハワイのローカル客&観光客に見つけてもらう!Google検索・マップ対策の基本

アロハ!ハワイでビジネスを展開されている皆様、最近「お店の近くを歩いているはずの観光客が来てくれない」「ローカルの新規顧客をもっと増やしたい」といったお悩みはありませんか? 今の時代、ハワイでのビジネスにおいて「Googleで見つけてもらうこと」は、大通りに目立つ看板を出すのと同じくらい重要です。今回は、専門用語をできるだけ使わずに、今日から意識できるGoogle対策の基本をお伝えします。 なぜ今、ハワイで「Google対策」が必要なのか?...

続きを読む