GPT-4oのコード作成で画像のプロンプトからサイトやゲームを作ってみた

画像出典 Open AI

以前の記事では、GPT-4oでのコーディングの性能について詳しくご紹介しました。まだ、ご覧になっていない方は、こちらからぜひご覧ください。

こちらの記事でGPT-4oのコーディング性能自体はGPT-4と大きな差はなく、プロンプトの理解力や推論力などが向上したため、総合的にコーディング能力が上がったのではないかという話題がありました。今回は、この内容に伴って画像のプロンプトから所望の機能を持ったサイトやゲームを実現するということをGPT-4oを用いてやっていきたいと考えています。

 GPT-4oでゲームやウェブサイトを作ってみた

ウェブサイト再現までの手順

まず、ChatGPT-4oを使ってウェブサイトを再現する手順を見ていきましょう。手順は

手順

1. ウェブサイトにアクセスし、キャプチャを撮ります。
2. ChatGPTにキャプチャを送りコーディングを依頼します。
3. HTML,CSS,JavaScriptのコードがそれぞれ生成されるので、コピーします。
4. CODE PENにペーストします。

実際に作ってみた

以下では、具体的なプロジェクトをいくつか紹介し、それぞれの作成過程と成果を示します。

文字数カウンター

再現したいウェブサイトにアクセスし、キャプチャを撮ります。今回は、入力したテキストの文字数をカウントするサイトを再現したいと思います。

画像出典 https://sundryst.com/convenienttool/strcount.html

次にこの画像をもとにプロンプトを作成しましょう。

添付の画像のウェブサイトのコーディングを教えて

画像出典 OpenAI

テキストは英語で生成されましたが、一度のプロンプトでHTML,CSS,JavaScript全てのコードの生成が回答に出力されました。

CSS

画像出典 OpenAI

JavaScript

画像出典 OpenAI

生成されたコードをそれぞれコピーし、「CODE PEN」という無料のウェブサイトでそれぞれコードをペーストして、再現できるか試してみます。

画像のようにそれぞれのコードを

画像出典 OpenAI

全体のサイト設計もうまく反映され、文字のカウントもちゃんとされました。

ここまでで5分程度の作業です。

画像のキャプチャで機能まで再現できるのは驚きです。

JPG変換ツール

下記ウェブサイトを再現できるか試してみます。

画像出典　https://www.iloveimg.com/ja/convert-to-jpg

次は画像をJPGに変換できるウェブサイトを試してみます。文字数カウントよりも仕組みは難しそうです。先ほどと同様のプロンプトでサイトを作れるか試してみましょう。

画像出典 OpenAI

同様に一度の依頼でそれぞれのコードが生成されました。サイトの情報は画像のプロンプトだけなのに、画像をJPGに変換するという内容も読み取れています。画像認識力がコード生成にも影響しているのでしょうか。

画像出典 OpenAI

若干画面のレイアウトに違いはあるものの、変換ツールが完成しました。実際にこの作ったサイトが正常に動作するかを試していきましょう。

画像出典 Open AI

「画像を選択」をクリックし、PC内から画像を選択すると上記の「Download JPG」ボタンが出現し、ダウンロードができました。

画像出典 Open AI

しっかりJPGに画像が変換されてます！！

楽天市場

どんどん複雑なサイトを作っていきましょう。最後に大手ECモールの楽天市場をどこまで再現できるか試してみます。

画像出典 https://www.rakuten.co.jp/

今までのサイトと違ってレイアウトもかなり作り込まれている上にクリックできるボタンも多く再現するにはかなり難易度が高そうです。

画像出典 OpenAI

今回も画面のスクリーンショットのみの情報を与えてウェブサイトを再現するコードを作成してもらいます。

画像出典 Open AI

こちらが実際に作成した楽天市場を再現したサイトの画像となっています。今までの中で最も低い再現度となってしまいました。これが今のGPT=4oの限界となっているようですね。機能面でも再現できていない点は多いですが、やはりサイトのデザインの感覚などは再現には遠く及ばないクオリティとなっています。

簡易的なウェブサイトは再現できても、クオリティの高いサイトは画像だけでは難しいようです。

GPT-4oでゲームの作成をする

今まではサイトの作成をしてきましたが、今度はゲームを作っていきたいと思います。

テトリス

下記ウェブサイトを再現してみます。

ご覧のように、簡易的なテトリスを再現したサイトとなっています。

画像出典 https://poki.com/jp/g/tetra-blocks

ゲーム中の画像を4枚添付し、ChatGPTに依頼します。

画像出典 OpenAI

このようにPAGE NOT FOUNDと出てしまいました。HTMLとCSSの出力のみで、ペーストしたところうまく動作しませんでした。流石にテトリスは画像だけでは判断ができなかったようです。

そこで、追加で補足のプロンプトをしてみました。

上の4つの画像はテトリスのゲームのウェブサイト画像です。

画像出典 Open AI

テトリスの画像である旨を補足したところ、Javaまで生成されました。

画像出典 OpenAI

画面のデザインはだいぶ違いますが、基本的なテトリス操作はできました。落ちてくるピースごとで色が違うのもテトリスらしさがあります。かなりの再現度と言えるのではないでしょうか>

画像出典 Open AI

横一列そろえばちゃんと消えました。しっかりとテキストによってテトリスであることを伝えればゲームのルールも理解して再現してくれていることがわかります。

画像出典 OpenAI

最上部まで積み重なるとゲームオーバーとなりました。

画面上に表記されるわけではないため、本来のウェブサイトとは仕様が違いますが、画面収録をインプットできるようになれば、画面の変化も対応できるようになるではないでしょうか。

作ってみた感想

ChatGPT-4を使ってコーディングを行うことで、プログラミングの敷居が大幅に下がりました。特に、画像認識力を活用して、画像処理のタスクを効率的にこなすことができました。

ただし、現状では、1枚の画像で判断できる情報量の場合に限り再現可能な印象です。ウェブサイト内に動きがあったり、テトリスのようなゲームを作成する際には、基本的な動作ロジックをテキストで補足することで元のウェブサイトの状態に近いものが出来上がりました。

全て5分～10分程度で完成したたため、コーディングのハードルが下がっていることは明らかでした。

また、上手く再現ができない場合にも、その旨を再度ChatGPTに依頼、相談することで修正作業が可能な点もハードルが下がっていると感じました。

 まとめ

今回は、画像とテキストのプロンプトを組み合わせることでGPT-4oがどこまでサイトやゲームを再現できるかを確かめていきました！サイトのデザインに関してはイマイチな部分もありますが、機能は想像を超えるクオリティで簡単なサイトであれば再現が可能であることがわかりました。

ChatGPT-4の画像認識力とコーディング力を駆使することで、多種多様なプロジェクトを短時間で作成することが可能です。初心者でも簡単に扱えるため、これからAIを活用したプログラミングに挑戦したい人には最適です。是非、皆さんもChatGPT-4oを活用して、自分だけのプロジェクトを作ってみてください。