頭の中にあるウェブサイトのイメージ、うまく伝えられていますか?
「こんな感じのキャンペーンページを作りたい」「ここに写真をおいて、横にボタンを置きたい」ウェブサイトのアイデアは頭にあるのに、それをいざ形にしようとすると難しいですよね。専門知識がないと、自分のイメージを具体的に表現できずにもどかしい思いをすることが多いと思います。
そんなハワイの中小企業経営者やウェブ担当者の皆様に、本日はChatGPTを使った「超初心者向け・裏技機能」をご紹介します!
そこで大活躍!ChatGPTの「画像からコード生成」機能
実は今のChatGPTには、手書きのメモやラフ画を読み込ませると、それを実際のウェブページ(HTMLコード)に変換してくれる」という驚きの機能があるんです。プログラミングの知識は一切不要。まるで魔法のように、あなたの頭の中のイメージが画面上に現れます。
誰でもできる!使い方3ステップ使い方はとてもシンプルです。今回は架空のハワイのカフェのページを作る手順で解説します。
ステップ1:まずは紙に理想のレイアウトを描く
まずは、コピー用紙やノートにボールペンで「こんなページにしたいな」というレイアウトをざっくりと描いてみてください。四角を書いて「写真」、線を引いて「テキスト」といった簡単なもので十分です。描けたら、それをスマホで撮影します。

ステップ2:ChatGPTに画像をアップロードしてお願いする
次に、ChatGPTのチャット画面を開き、クリップマーク(または+ボタン)から先ほど撮影した写真をアップロードします。そして、以下のようなお願いの文章(プロンプト)を入力して送信するだけです!
【コピーして使えるプロンプト】
この手書きのメモをもとに、ハワイのカフェのウェブページのレイアウトを作成してください。
初心者でもわかりやすいように、シンプルなHTMLとCSSのコードを書いてください。
ボタンの色は、ハワイの海のようなブルーにしてください。

3-ワンポイントアドバイス:ハワイのお店向けのChatGPTプロンプト例
よりハワイらしさを出すために、「背景は薄いサンドベージュにして」「フォントはリラックスした雰囲気のものを選んで」など、具体的なイメージを少し言葉で足してあげると、さらに精度の高い結果が返ってきます。
まとめ:まずは自分のChatGPTでコード生成を形にしてみよう!
いかがでしたか?「プログラミングなんて全く分からない」という方でも、この機能を使えば「自分の作りたいページのイメージを視覚化する」ことができます。
もちろん、これをそのまま本番のウェブサイトに使うには少し調整が必要ですが、「こんな感じにしたい!」という土台を自分で作れれば、その後ウェブ制作のプロに相談する際も、よりスムーズに理想のサイトに近づけることができます。
ぜひ明日の業務から、この「画像読み込み機能」を試してみてくださいね!


