インターネットで検索して見つけた、タイトル、テキスト、アイコンとテキストの

4列2段のリストがある簡単なコンテンツのワイヤーフレームを見つけました。

アイコンは左からダイヤ、野球ボール、シャワー、電気、人参、人、ヘッドフォン、アスタリスクが設置されています。
さっそくスクリーンショットを撮り、ChatGPTに読み込ませてみます。
プロンプトは以下の通りです。

プロンプト：画像のコンテンツをHTMLとCSSでコーディングしてください。

ChatGPTが返した結果を見ると
「Add Your Title Here」という文字は認識したもの
その下の「Replace your text here!　Replace your text here!」という文字は認識しませんでした。
「Add Your Title Here」は見出し、

「Replace your text here!　Replace your text here!」はテキストとして認識してほしいところです。
テキストの文字サイズ、位置、カラーも違う結果となりました。
とりあえず認識したテキストを置いた感じとなっています。

次にリスト部分ですが、
4列2段だったものが、3列3段となってしまいました。
アイコン画像の部分は画像エラーとなっております。
その下のテキストは「TEXT」と同じ文を出力出来ておりますが、
画像とテキストのセンター寄せは実現していませんでした。

また、こちらも文字サイズ、太さ、カラーが違います。
リストも背景色はなく、ボーダーでスタイリングされています。
カレントされている2個目のリストの赤の再現はされていました。

再現度が低いなと思いましたが、
ChatGPTからは「アイコン画像のパスは適切なものに置き換えてください」
と返ってきたので、下記の通り返答しました。

アイコンのパスはフリーの画像パスに変換してください

なんと「Font Awesome（フォント・オーサム）※有名な有料・無料のアイコンサイト」の

CDNを追加し似たアイコンを設定してきました。

・スクリーンショットのアイコン
ダイヤ、野球ボール、シャワー、電気、人参、人、ヘッドフォン、アスタリスクが設置されています。

・Font Awesomeから設定されたアイコン
ダイヤ、野球ボール、シャワー、人参、人、ヘッドフォン、太陽、なし

電気のアイコンはありませんでしたが、ほぼ同じようなアイコンが設定されている事に大変驚きました。
適当なアイコン画像が設定されるかと思いましたが、 ここで精度を上げてくるChatGPT。
でもアイコンの精度よりHTML、CSSの再現精度をもっと上げて欲しいのが本音です。

ChatGPTだけではまだまだ再現度は低く、そのまま使用できる品質にはありませんが、
個人的には一枚のスクリーンショットから満足出来る結果が得られました。
プロンプトでの生成より精度が高くなっており、
将来的にはAIによるHTML、CSSのゼロコーディングが可能になるのではないでしょうか。

さて、ここまではChatGPT単体での機能でしたが次はChatGPTの新機能であるGPTs機能を利用してみたいと思います。
「GPTs（GPT Builder）」とは、ChatGPTをカスタマイズできる機能です。
GPTsを使用することによってオリジナルのチャットボットの作成、公開が可能となっています。
GPTsで開発したチャットボットは、他ユーザーへの共有が可能なのが強みです。

公開範囲は
・自分のみ
・リンクを知っている人のみ
・一般公開
の３つとなっています。

公開されているGPTsはメニューの「Explore GPTs」から検索する事が可能となっています。

今回はスクリーンショットからコード生成をしてくれるGPTsがありましたので早速使ってみます。

「Screenshot To Code GPT」というGPTsでスクリーンショットからHTML/Tailwind/JS コードを出力してくれます。

※TailwindとはCSSのフレームワークです。
最近人気のあるユーティリティファーストのTailwind CSSです。
HTMLの中に直接定義済みのクラスを使用します。
他にCSSのフレームワークで有名なものといえばBootstrapがあります。

「Screenshot To Code GPT」利用は簡単で、
GPTsで「Screenshot To Code GPT」を検索し選択、
あとはスクリーンショット画像をアップするだけです。

画像をアップして1～2分でコード生成が完了しました。
ChatGPT単体と比べどんな状態のものが出力されるのでしょうか？非常にワクワクします。
コードを読み込んだものが下記となります。

ChatGPT単体より精度が抜群に上がりました！

テキストは見出しとテキストに分かれており、
位置や文字サイズも再現度が上がっています。

リストの列はやはり3列3段となってしまいました。
アイコンはアイコンフォントを読み込んでいますが、

プラスしてダミー画像も読み込まれてしまっています。
アイコンの再現精度も下がってしまいました。

ただし画像とテキストの配置、リストの背景色は再現度が上がりました。

前述の通り、GPTsは世界中の誰かがカスタマイズしたChatGPTを作成し公開しています。
まだ、見つけられていないだけで、もっと精度の高いGPTsが存在しているかもしれません。

また、今回はChatGPTで画像からHTML、CSSのコード生成を行う事にフォーカスしていますが、
プロンプトからHTML、CSSのコード生成を行うのに有用なGPTsも存在するかもしれません。
もしくはコーディングの生産性を上げる、デバッグをするのに有用なものも。
GPTsは昨年11月に公開された機能で日々新しいGPTsが公開されています。
これからもChatGPTには期待せずにはいられません。

ちなみに弊社のOWLetでのコーディングではCSSのフレームワークであるBootstrapやTailwind、

JavascriptのライブラリであるjQueryは基本的に使用しません。

OWLetではウィジェットというパーツを構築します。
このウィジェットの中にはHTML、CSS、Javascript、入力項目が設定されています。
これらのウィジェットを組み合わせて「コンテンツ」を作り、「ページ」が作られWEBサイトになります。

その為、フレームワークやライブラリ等に依存しないコーディングが求めらています。

フレームワークやライブラリは便利で簡単に見た目もいいサイトが作れますが、
構築を行う者としては、ChatGPTに頼り切るだけでなく最低限必要な知識と技能は有しておきたいものです。