画像認識の精度が上がったChatGPT 4oで再度htmlの自動生成の検証

以前、検証用に作成したGPT「HTML＆CSS ソースコード Editor」ですが、検証したときはベースになるモデルがChatGPT 4だったんです。
最初の検証記事は「ChatGPTに画像を認識させてHTML＆CSSコーディングを自動化」はこちら

先日ChatGPT 4oが利用できるようになり、より早く、賢くなったので、検証用に作ったGPTも画像認識や出力されるソースコードに変化があるのか再検証してみました。

再検証の結果

結果を先に言ってしまうとかなり良好！

以前はあれこれプロンプトを変えてみもて再現できなかった細かいところをたった3回の修正でソースのベースとなるものを作ることができてしまいました。

ベースのモデルがChatGPT 4oになって前回の検証時より良くなった点

1．画像認識能力の向上
2．セマンティックなHTMLソースを生成

この2点があげられます。 画像認識時に前回は表示されているすべての要素を出力せず、なんとなくサンプル的なソースを出力していたのですが、特に明確な指示をださずとも表示されている要素はhtmlソースとして出力してくれました。

初回のhtmlとcssの出力だと記事部分が３つづつすべて同じ大きさで横並びになるレイアウトだったので、先頭の2つの記事を大きくしてその他をその下に3つづつ横並びになるように指示をだして再度生成したら、おしかった。

グリッドを使ったCSSを出力していたので、シンプルに上2つと他のセクションを分けて生成するようにしたら期待するレイアウトになりました。

今回もWebchoのトップページのレイアウトをサンプルにしてみました。 

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Recent Posts</h1>
            <h2>最新記事</h2>
        </header>
        <section class="large-posts">
            <article class="post large">
                <img src="image1.jpg" alt="Post 1">
                <h3>要件定義不足で失敗するCMS構築とその回避方法</h3>
                <p>IT活用 | 2024.07.19</p>
            </article>
            <article class="post large">
                <img src="image2.jpg" alt="Post 2">
                <h3>デジタルスキルアップで業務効率を劇的に改善！中小企業のためのサポートプログラム</h3>
                <p>IT活用 | 2024.07.18</p>
            </article>
        </section>
        <section class="small-posts">
            <article class="post small">
                <img src="image3.jpg" alt="Post 3">
                <h3>機械学習の流れをPython使って勉強してみました</h3>
                <p>web制作 | 2023.03.27</p>
            </article>
            <article class="post small">
                <img src="image4.jpg" alt="Post 4">
                <h3>「無限画像検索はもう古い？ChatGPTで一瞬にしてオリジナルイメージを生成！」</h3>
                <p>web制作 | 2024.02.28</p>
            </article>
            <article class="post small">
                <img src="image5.jpg" alt="Post 5">
                <h3>ChatGPTに画像を認識させてHTML＆CSSコーディングを自動化</h3>
                <p>web制作 | 2024.02.06</p>
            </article>
            <article class="post small">
                <img src="image6.jpg" alt="Post 6">
                <h3>光回線ってなんもなのか…。と調べてたけど、NURO光は爆速でした。</h3>
                <p>web制作 | 2023.09.05</p>
            </article>
            <article class="post small">
                <img src="image7.jpg" alt="Post 7">
                <h3>WordPressのセキュリティ強化に向けたSiteGuard WP Pluginの効果的な活用</h3>
                <p>web制作 | 2023.08.29</p>
            </article>
            <article class="post small">
                <img src="image8.jpg" alt="Post 8">
                <h3>仕事の合間にできるちょっとしたフィットネスでリフレッシュ！</h3>
                <p>Life | 2023.08.15</p>
            </article>
        </section>
    </div>
</body>
</html>

CSSの内容

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    margin: 0 auto;
}

header {
    text-align: center;
    margin: 20px 0;
}

header h1 {
    font-size: 2.5em;
    margin-bottom: 0;
}

header h2 {
    font-size: 1.2em;
    color: #777;
    margin: 5px 0;
    position: relative;
    display: inline-block;
}

header h2::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    width: 40px;
    height: 2px;
    background-color: #000;
}

.large-posts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.small-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.post {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.post img {
    width: 100%;
    height: auto;
}

.post h3 {
    font-size: 1.1em;
    margin: 10px;
}

.post p {
    font-size: 0.9em;
    color: #555;
    margin: 10px;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .large-posts,
    .small-posts {
        grid-template-columns: 1fr;
    }
}

出力された結果

色とか余白とかその辺は調整する必要はありますが、ベースとして十分ほどのできだと思いました。

細かいところだけど、驚いたのはページ上部の「Recent Posts　最新記事」の箇所なんですが、
レイアウト的に絶対配置を使わないと実現難しいところで、そこを生成できるのかなと思っていたらちゃんと親要素から絶対配置で表示されるようになっていたこと。
もう少し難しそうなレイアウトも再現できるのか検証してみたくなりました。

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

前回の検証時よりも精度が高くなってより使えそうなレベルまできていると感じました。

ただ、1回で期待通りのソースが出来上がるかはレイアウトの内容にもよるだろうし、指示の出し方（プロンプト）によっても変わってくると思います。

どうしても複雑な内容をあれこれと注文してまいたくなりますが、シンプルな内容で試していって、数回かけて1つのソースを作りだすようにするのが一番の近道だと思います。

この画像からHTMLソースを生成することだけじゃなくて、ChatGPTを使って何かを生成するときに、1回で正解の内容が返ってくることはないですから。生成されたソースのレビューをして細かい調整をしていくことで正解に近づくということです。

まとめ

ChatGPTを使ったHTML＆CSSコーディングの再検証は前回以上の結果になりました。
前回は補助ツールとして・・・みたいな感触でしたが、ここまでくるとザーッと下書きをしてもらうくらは使えそうですね。

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

ChatGPTなどの生成AI、webサービスやツールなどデジタルスキルの向上は、企業の成長と成功に不可欠な要素です。今すぐ、私たちのデジタルスキルアップサポートを利用して、業務効率を飛躍的に向上させ、競争力を強化しませんか？

今すぐお問い合わせください！
デジタルスキルアップサポート