昨年の2月に書いた「ChatGPTに画像を認識させてHTML＆CSSコーディングを自動化」という記事があるのですが、未だアクセスが多くあって、みなさんAIを使って自動化できる部分に興味があるんだなと思わさています。
AIの進化はとどまるところを知らず、特に画像認識分野においては日々劇的な進化を遂げています。先日公開されたばかりのChatGPT最新版『o4-mini-high』は、以前のモデルよりさらに画像解析精度が向上したとのことで、大きな注目を集めています。
前回の記事では、ChatGPT-4oの画像認識精度とHTMLコード生成能力の高さを検証しましたが、今回の最新版であるo4-mini-highは、その精度をさらに上回っているとのこと。
そこで、本記事では、この話題の新モデル『ChatGPT o4-mini-high』を徹底的に検証し、実際に画像認識の精度がどのように向上しているのかを明らかにします。HTMLコード生成の精度にも焦点を当て、前バージョンとの違いや進化のポイントを具体的に解説していきます。
今回の検証結果
ChatGPT o4-mini-highは「コーディング」と「視覚的推論」が得意と言われています。それならば、画像からhtmlとCSSの作成がどれくらい制度が上がっているのか、確認しなければということで、試してみたのですが、前回具体的な指示を出して修正できた箇所が、「画像からhtmlとcssを作成してください」と指示を出しただけで、ちゃんと再現できてしまいました！
完全再現とまではいかなかったが、細かなところは自分で書き加えればすぐにレイアウトとして完成するレベル。
ChatGPT o4-mini-highになって前回の検証より良くなった点
1．画像認識能力の向上
2．セマンティックなHTMLソースを生成
4から4oになったときもこの2点が良くなりましたが、今回もさらによくなりました。
4oで検証したとき、1回目の出力では失敗した、「先頭の2つの記事を大きくしてその他をその下に3つづつ横並び」のレイアウトを1発で再現した。これは画像認識の精度がさらに上がった証拠ではないだろうかと思う。
今回のソースでは、google fontを使ってソースが作成されたから、画像からフォントをあてたのかと思って、尋ねたらそれは違いましたw
今回もWebchoのトップページのレイアウトをサンプルにしてみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Recent Posts</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section id="recent-posts">
<header class="section-header">
<h2>Recent Posts</h2>
<p class="subtitle">最新記事</p>
</header>
<!-- フィーチャー記事 -->
<div class="featured-posts">
<article class="post">
<a href="#">
<figure>
<img src="path/to/image1.jpg" alt="CMS構築と回避方法のイメージ">
<figcaption>要件定義不足で失敗するCMS構築とその回避方法</figcaption>
</figure>
</a>
<footer class="post-meta">
<span class="category">IT活用</span>
<time datetime="2024-07-19">2024.07.19</time>
</footer>
</article>
<article class="post">
<a href="#">
<figure>
<img src="path/to/image2.jpg" alt="業務効率劇的改善プログラムのイメージ">
<figcaption>デジタルスキルアップで業務効率を劇的に改善！中小企業のためのサポートプログラム</figcaption>
</figure>
</a>
<footer class="post-meta">
<span class="category">IT活用</span>
<time datetime="2024-07-18">2024.07.18</time>
</footer>
</article>
</div>
<!-- その他の記事 -->
<div class="other-posts">
<article class="post">
<a href="#">
<figure>
<img src="path/to/image3.jpg" alt="機械学習の流れをPythonで勉強するイメージ">
<figcaption>機械学習の流れをPython使って勉強してみました</figcaption>
</figure>
</a>
<footer class="post-meta">
<span class="category">web制作</span>
<time datetime="2024-03-27">2024.03.27</time>
</footer>
</article>
<article class="post">
<a href="#">
<figure>
<img src="path/to/image4.jpg" alt="ChatGPTでオリジナルイメージ生成のイメージ">
<figcaption>「無料画像検索はもう古い？ChatGPTで一瞬にしてオリジナルイメージを生成！」</figcaption>
</figure>
</a>
<footer class="post-meta">
<span class="category">web制作</span>
<time datetime="2024-02-28">2024.02.28</time>
</footer>
</article>
<article class="post">
<a href="#">
<figure>
<img src="path/to/image5.jpg" alt="HTML＆CSS自動化のイメージ">
<figcaption>ChatGPTに画像を認識させてHTML＆CSSコーディングを自動化</figcaption>
</figure>
</a>
<footer class="post-meta">
<span class="category">web制作</span>
<time datetime="2024-02-06">2024.02.06</time>
</footer>
</article>
<article class="post">
<a href="#">
<figure>
<img src="path/to/image6.jpg" alt="NURO光の爆速イメージ">
<figcaption>光回線ってこんなものか… と諦めてたけど、NURO光は爆速でした</figcaption>
</figure>
</a>
<footer class="post-meta">
<span class="category">web制作</span>
<time datetime="2023-09-05">2023.09.05</time>
</footer>
</article>
<article class="post">
<a href="#">
<figure>
<img src="path/to/image7.jpg" alt="SiteGuard WP Plugin活用のイメージ">
<figcaption>WordPressのセキュリティ強化に向けたSiteGuard WP Pluginの効果的な活用</figcaption>
</figure>
</a>
<footer class="post-meta">
<span class="category">web制作</span>
<time datetime="2023-08-29">2023.08.29</time>
</footer>
</article>
<article class="post">
<a href="#">
<figure>
<img src="path/to/image8.jpg" alt="仕事の合間フィットネスのイメージ">
<figcaption>仕事の合間にできるちょっとしたフィットネスでリフレッシュ！</figcaption>
</figure>
</a>
<footer class="post-meta">
<span class="category">Life</span>
<time datetime="2023-08-15">2023.08.15</time>
</footer>
</article>
</div>
</section>
</main>
</body>
</html>CSSの内容
body {
margin: 0;
font-family: 'Noto Sans JP', sans-serif;
color: #333;
background: #f9f9f9;
}
#recent-posts {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.section-header {
text-align: center;
margin-bottom: 40px;
}
.section-header h2 {
font-size: 2rem;
margin: 0;
}
.section-header .subtitle {
display: inline-block;
font-size: 1.2rem;
margin-top: 8px;
padding-bottom: 4px;
border-bottom: 4px solid #333;
}
.featured-posts,
.other-posts {
display: grid;
gap: 24px;
}
.featured-posts {
grid-template-columns: repeat(2, 1fr);
margin-bottom: 40px;
}
.other-posts {
grid-template-columns: repeat(3, 1fr);
}
.post {
background: #fff;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.post a {
color: inherit;
text-decoration: none;
}
.post figure {
margin: 0;
}
.post img {
display: block;
width: 100%;
height: auto;
}
.post figcaption {
margin: 12px;
font-size: 1rem;
line-height: 1.4;
}
.post-meta {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 0.875rem;
color: #666;
padding: 0 12px 12px;
}
.post-meta .category {
margin-right: 8px;
}
細かい部分まで再現はできてないが、これに自分で手を加えればレイアウトは完成するレベル
画像読み込みから手直しまで数分で終わってしまうでしょう。
実践的なヒントとテクニック
プログラミンを含めて、AIを利用したコーディングを積極的に行うようになって、3ヶ月程度経ちましたが、仕事のペースが驚くほど速くなりました。今まで1日かかっていたような作業も1～2時間で終わってしまうほどのレベルです。
今回の検証では、前回、前々回と同じ条件で1枚の画像を読み込ませてレイアウトを作っていますが、複雑になればなるほど、思ったソースはできにくくなると思うので、実践ではなるべくシンプルに指示できるレベルに落とし込むのが、何度も修正指示を出さなくても済む方法だと思います。
出力されたソースがとてつもなく長いモノだと、それをレビューするのも大変になるし、ちゃんとHTMLとCSSを理解できてないと、不具合の原因も良く分からないと思うので、初心者の方はとくに、細かく作っていくことを意識するといいと思います。
まとめ
ChatGPTを使ったHTML＆CSSコーディングの再々検証は前回以上の結果になりました。
前回のレベルでも、コーディングのベースには十分使えるレベルでしたが、今回はソースの内容もより良くなっていて、さらにレベルが上がってましたね。
次のステップへ：あなたの可能性を広げる
「AIツールは使えるようになったけど、その先が見えない…」
そんな方におすすめなのが、コーチングです。
生成AI、webサービスやツールなどデジタルスキルの向上は、業務を効率的にこなすためには必要不可欠なスキルです。弊社では、デジタルツールをただ使うだけではなく、業務効率の向上やビジネススキルの強化を目指す方に向けたコーチングのサービスを提供しています。
小さな目標を達成しながらコツコツを積み上げていくので、難しいことはありません。○○みたいに仕事ができるようになりたい。ウェブデザイナーになってみたいなどなど、あなたが思う未来の自分になれたらどおですか？
今すぐお問い合わせください！
デジタルスキルアップサポート