AI技術を活用してコーディング業務を効率化してみた ChatGPT-4o(オムニ)編

date_range 2024/05/31
GUARDIAN Marketing BLOG
山本 高広
image12

こんにちは。フロントエンドエンジニアの山本です。
前回はAnthropic(アンソロピック)社のClaude(クロード)を使用し、日本語プロンプトからのHTML、CSS生成を検証しました。
これまでChatGPT3.5、ChatGPT-4、Bard、Gemini検証してきましたが、
過去一番の満足できる出力結果を出してくれました。
今回はClaude(クロード)で画像からコードを生成できるのか?を検証予定でしたが、
OpenAI社のChatGPTの最新版「ChatGPT-4o(オムニ)」が公開された為、
急遽ChatGPT-4o(オムニ)での検証をしてみたいと思います!
弊社取締役の有本がChatGPT-4o(オムニ)がSEO対策にどれだけ優秀かChatGPT-4と実演比較してみた動画をアップしておりますので、ぜひこちらも合わせてご覧ください。


【最速検証】最新ChatGPT-4o(オムニ)がSEO対策にどれだけ優秀かGPT-4と実演比較してみた

ChatGPT-4o(オムニ)とは?

image7

ChatGPT-4o(オムニ)は、OpenAIが開発したChatGPTの最新モデルです。
正式名称はChatGPT-4omniで「omuni(オムニ)」とは「全体の、すべての」の意味をもちます。
呼び方は「ジーピーティーフォーオムニ」または「ジーピーティーフォーオー」と呼ばれています。
公式では「音声、画像、テキストをリアルタイムで推論できる」と謳っており、
テキスト、音声、画像、ビデオの任意の組み合わせを入力として受け入れ、テキスト、音声、画像の出力を任意の組み合わせで生成します。

ChatGPT-4との違い

ChatGPT-4o(オムニ)は、ChatGPT-4に比べて以下の点で優れています。


1.自然言語処理能力が向上しており、文脈の理解力と一貫性のある応答生成が強化されています。
これにより、複雑な質問や長時間の会話でもより正確な対応が可能です。


2.多言語対応が強化され、日本語、英語、フランス語など主要言語での応答精度が向上しました。


3.ChatGPT-4o(オムニ)はユーザーの意図や好みを学習し、パーソナライズされた体験を提供する能力が強化されています。

カスタマーサポートや教育、コンテンツ作成など、より多様なアプリケーションでの利用が可能であり、

APIやプラグインを通じて簡単にさまざまなプラットフォームと統合できます。


4.セキュリティとプライバシー保護に対する取り組みが強化され、ユーザーデータの安全性が一層確保されています。


これらの改良により、ChatGPT-4o(オムニ)はChatGPT-4よりも高い性能と信頼性を提供しています。

ChatGPT-4o(オムニ)で日本語プロンプトからコーディング

image13

早速日本語プロンプトでのHTML、CSS出力を検証していきます。
日本語プロンプトはこれまで検証してきた内容と同じものを使用しています。



◆日本語プロンプト
# 命令書:
あなたは[プロのフロントエンドエンジニア]です。
[メディアサイト]を構築します。
以下の制約条件と入力文をもとに[HTML,CSS]を記述してください。
# 制約条件:
• 新着情報コンテンツ
• 要素は画像、日付、カテゴリタグ、タイトルを出力
• 画像とタイトルにリンクを設定
• タイトルは2行を超えたら省略
• hover時のリンク効果を付与
• 見出しに[Media],[メディア]と出力
• 詳細ボタンをコンテンツ下部に出力
• 記事件数は6件
• サイト幅は1170px
• id名、class名の先頭に[-w-]を付与する
• 記事一覧は[カード型]で[3カラム]表示
• HTML,CSSはそれぞれ分けて出力
• 画像はダミー画像を使用
• 全体的に[COOL]なデザインに

【ChatGPT-4o(オムニ)出力結果】

image5

【HTML出力一部】

image11

【CSS出力一部】

image8

ChatGPTでの過去一番の出力結果に!

これまで微妙な出力結果を出してきたChatGPTですが、
初めてこれは使えるかも!と思える出力結果が出ました。
制約条件をかなり精度高く再現してくれています。
たとえば「 hover時のリンク効果を付与」と制約条件に記載していますが、
ホバー時のアニメーションが加わりました。
明らかに従来のChatGPTより性能が上がってると感じますし、
このまま使用できるレベルの成果物になっていると思います。
もっと制約条件を細かくすれば、更に精度の高い出力結果が期待できます。
Claude(クロード)の生成結果と比べても、ChatGPT-4o(オムニ)の方が制約条件を反映したアウトプットになっているのがわかります。

過去アウトプット比較

【Claude出力結果】

Claude出力結果



【ChatGPT3.5出力結果】

ChatGPT3.5出力結果

画像からのコード生成も変わるのか?

ChatGPT-4では画像からのコード生成にはまだまだ課題がある状態で、
GPTsを使用する事で、少し使えるかもしれないというレベルでしたが、
ChatGPT-4o(オムニ)では画像認識の精度も上がっているのでしょうか?



◆日本語プロンプト
# 命令書:
あなたは[プロのフロントエンドエンジニア]です。
アップロードした画像のコンテンツを[HTML,CSS]で記述してください。


画像

【ChatGPT-4o(オムニ)出力結果】

image6

【HTML出力】

image10

【CSS出力一部】

image9

こちらもChatGPT過去一番の出力結果に!

だいぶサイズ感は違いますが、ChatGPT-4と比べると格段に再現精度が上がっているのがわかります。
テキストは問題なく出力され、アイコンはカラーとなりましたが画像のアイコンと似たものが選択されています。
出力されたコードを調整しWEBサイトのコンテンツとして載せるのはこれまでより簡単になったと感じます。

ChatGPT-4比較

【ChatGPT-4出力結果】


ChatGPT-4出力結果

まとめ

ChatGPT-4o(オムニ)での日本語プロンプト、画像それぞれのHTML、CSSの出力結果について検証してきました。
感想としてはChatGPT-4から格段にレベルアップしたと感じます。
これまではある程度コーディングされていましたが、実用性には遠く0から自分でコーディングした方が早いというのが正直な感想としてありました。
が、ChatGPT-4o(オムニ)の検証結果を見て、これはちょっとヤバいなと脅威を感じました。


これだけ精度の高いものが構築されると、0からHTML、CSSコーディングするよりも、

ChatGPT-4oに大まかにコーディングしてもらい、サイトに合わせて調整する方が早く終わるかもしれません。


HTML、CSSにおけるAIの利用方法としては検索の延長線としての利用用途が高かったです。
それは検索して調べるよりChatGPTに質問したほうが早く回答がもらえますし、
チャットでのやり取りでAIのアウトプットに修正が加えられるため、
検索するよりも問題解決スピードが速かったためです。


今回の検証結果ではそんな印象から大きく変わるレベルでした。
AIが登場してからコーディング業務はAIに奪われるだろうと想像していましたが、
もう目の前まで迫ってきたと強く感じます。


ちょうど1年前に弊社取締役の有本がアップしていた動画
【重大警告】WEBエンジニア/プログラマーの仕事は無くなります
が現実として迫ってきました。
これからエンジニアを目指す人々はどうAIを使うかが生き残るポイントになると思います。