ChatGPTに画像を認識させてHTML＆CSSコーディングを自動化

ChatGPTを使ったHTMLソース作成の記事はすでにあると思いますが、自分でも試してみたいとおもいHTMLとCSSを作成してくれるGPTを作成してみました。デザイン画像を認識させてHTMLとCSSをある程度のレベルでも作成することができるのなら、コーディングのプロセスを変化させる可能性を秘めているのではと思います。
今回の検証用に作ったGPTはこちら「HTML＆CSS ソースコード Editor」

ChatGPTとは何か

今さらChatGPTとは何か？を説明しなくても皆さんしっていると思いますが。。。

ChatGPTは、自然言語処理を得意とするAIモデルです。ウェブ開発における利用方法はいろいろとあると思います。ChatGPTの画像を解析する機能、HTMLやCSSなどのコードを生成する機能を利用してHTML＆CSSコーディングの補助ツールになるかを検証してみようと思います。

HTML＆CSSコーディングへの応用

ChatGPTを用いたHTML＆CSSコーディングの応用は、以下のステップが必要です。

1.画像の準備: デザイン画像を準備します。
2.ChatGPTへの入力: 画像をChatGPTにアップロードし、解析を依頼します。
3.コード生成: ChatGPTが画像の内容を分析し、対応するHTMLとCSSコードを生成します。（自動生成なので待つだけ）
4.コードの調整と最適化: 生成されたコードを確認し、必要に応じて調整や最適化を行います。

ウェブページ1ページ分のデザイン画を認識させてソースを作成すると、調整する箇所が結構でてきますね。

レイアウトの1部分を抜き出してソースを作成すると結構な精度で仕上がります。

試しにwebchoのトップページの一部分をキャプチャして画像をアップロードしました。
すると以下のHTMLとCSSを作成してくれました。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recent Posts</title>
<style>
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
  }
  .container {
    width: 80%;
    margin: auto;
    overflow: hidden;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  .post {
    border: 1px solid #ccc;
    padding: 20px;
  }
  .post img {
    width: 100%;
    height: auto;
  }
  .post-date {
    color: #555;
    font-size: 0.85em;
  }
  .post h3 {
    margin: 0;
    padding: 10px 0;
    font-size: 1.2em;
  }
  header {
    margin-bottom: 40px;
  }
  header h1 {
    text-align: center;
    font-size: 2.5em;
  }
  @media screen and (max-width: 600px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }
</style>
</head>
<body>
  <header>
    <h1>Recent Posts</h1>
  </header>
  <div class="container">
    <div class="grid">
      <!-- サムネイルを表す各ポストの繰り返し -->
      <div class="post">
        <img src="thumbnail1.jpg" alt="記事のタイトル">
        <h3>記事のタイトル</h3>
        <p class="post-date">カテゴリー | 2021.04.12</p>
      </div>
      <!-- 追加のポストは上記のdiv.postを繰り返してください -->
    </div>
  </div>
</body>
</html>

ソースの内容を確認するとなんとなく要素が取り込まれている状態なので、再度調整を依頼します。
不足している要素、修正したい内容を伝えました。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recent Posts</title>
<style>
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
  }
  .container {
    max-width: 1200px;
    margin: auto;
  }
  .grid-large {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
  }
  .banner {
    width: 100%;
    height: 120px;
    background-color: #cccccc;
    margin-bottom: 20px;
  }
  .grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
  }
  .post {
    border: 1px solid #ccc;
  }
  .post img {
    width: 100%;
    height: auto;
  }
  .post h3 {
    margin: 0;
    padding: 10px 0;
    font-size: 1.2em;
  }
  .post-date {
    color: #555;
    font-size: 0.85em;
    padding: 0 0 10px 0;
  }
  header {
    margin-bottom: 40px;
  }
  header h1 {
    text-align: center;
    font-size: 2.5em;
  }
  @media screen and (max-width: 768px) {
    .grid-large,
    .grid-small {
      grid-template-columns: 1fr;
    }
    .banner {
      height: auto;
      padding: 40px;
    }
  }
</style>
</head>
<body>
  <header>
    <h1>Recent Posts</h1>
  </header>
  <div class="container">
    <div class="grid-large">
      <!-- 大きなサムネイルを表すポスト -->
      <div class="post">
        <img src="large-thumbnail1.jpg" alt="記事のタイトル">
        <h3>記事のタイトル</h3>
        <p class="post-date">カテゴリー | 2021.04.12</p>
      </div>
      <div class="post">
        <img src="large-thumbnail2.jpg" alt="別の記事のタイトル">
        <h3>別の記事のタイトル</h3>
        <p class="post-date">別のカテゴリー | 2021.04.12</p>
      </div>
    </div>
    <div class="banner">
      <!-- 広告バナー -->
    </div>
    <div class="grid-small">
      <!-- 小さなサムネイルを表すポスト -->
      <!-- 以下の.post要素を6回繰り返す -->
      <div class="post">
        <img src="small-thumbnail1.jpg" alt="小さい記事のタイトル">
        <h3>小さい記事のタイトル</h3>
        <p class="post-date">小さいカテゴリー | 2021.04.12</p>
      </div>
      <!-- さらに.post要素を追加 -->
    </div>
  </div>
</body>
</html>

最初はグリッドレイアウト部分のソースが1つだけで、CSSを確認してもグリッドのサイズが1つだけだったのが、デザインのように上部に2つの大きめのグリッド、広告バナーを挟んで下に小さいグリッド用のソースが作成されました。 CSSにも「grid-large」と「grid-small」というクラスが追加されています。

作成されたソースへ小さいグリッドを必要分加えてブラウザで表示させた結果です。
サイズの小さいグリッドが横1列に並んでしまっていますが、その辺を再度調整すれば問題なさそうですね。

実践的なヒントとテクニック

ChatGPTに画像を解析させてて思ったことは、明暗がわかりづらい色指定がされているデザインは正確に把握することが難しいようです。
白色の背景に#ccccccの罫線とか背景の色を使っていても一回では読み取ってくれなかったです。
そういう時は、そこへ色を指定するように指示をすると修正できます。
微妙な差を読み取りやすくするためにも、用意する画像は解像度が高い画像を用意するといいと思います。

出来上がったソースへ対して、具体的に指示を出すことで簡単に修正が可能です。 なんども画像をアップロードして繰り返してやるのではなく、どこどこの要素が足りないとか出来上がったソースのこの部分にこの要素を足し欲しいとか、そんな具合に指示をだせば該当する部分を画像を再解析して作り直してくれます。

出来上がったソースはそのまま使うのではなく、ちゃんと自分でレビューして調整してから使いましょう。 ベースになるソースを書く時間が短縮されたのだから、それだけでもかなり作業効率がよくなるのではと思います。

まとめ

ChatGPTを使ったHTML＆CSSコーディングは期待していた以上の結果だったと思います。
指示の仕方などクセをつかむ必要はあり、出来上がったソースがすべて正解ってことではないですが、ざっとHTMLとCSSを作成してくれるので、補助ツールとしては使えそうですね。

今回の検証用に作ったGPTはこちら「HTML＆CSS ソースコード Editor」

有料版のChatGPTユーザーさんだったら使えるので試してみてください。