自分でチューニングしたGPTs「HTML＆CSS ソースコード Editor」を使った画像からHTMLとCSSを作成する検証記事を以前書いていますが、今回はChatGPTではなく、v0(ブイゼロ)を使って画像からHTMLとCSSがどれくらいの精度で作成できるのか検証してみたいと思います。
以前書いた記事はこちらの2つ
・ChatGPTに画像を認識させてHTML＆CSSコーディングを自動化
・画像認識の精度が上がったChatGPT 4oで再度htmlの自動生成の検証
v0とはなにか
ChatGPT同様に自然言語に対応した生成AIのツールで、入力したテキストからUIを作成する機能が備わっています。
使い方次第では、HPやLPの他にメールフォームやログイン回りの機能まで作成できてしまう優れものです。
Reactに対応したソースコードを基本的には出力するようになっていて、作成したソースコードを簡単に公開することができます。
無料プランでは商用利用はできないので、商用利用する場合は注意してください。
画像からHTMLとCSSを作成
v0に画像をアップロードしてHTMLとCSSを作成していこうと思います。
検証の結果ある程度デザインに近い状態になるまで以下のステップとなりました。
1. v0に画像をアップロード
2. 「HTMLとCSSを作成」とプロンプトを入力
3. ソースコードの生成
4. レイアウトの調整
5. HTMLとCSSファイルへの変換
6. HTMLソースコードの調整
アップロードした画像は以前検証に利用したモノと同じものを利用しました。
プロンプトは日本語の入力にも対応しているので、日本語で入力しました。
前回の検証と同じ画像を利用して検証
1回目のソースコード生成の時点で、ほぼアップロードした画像のレイアウトの通りになっていました。
ChatGPTを使った検証時には、先頭2個の記事が大きな表示で、その他が同じ大きさで3列2段表示という部分が1回では作成できなかったのですが、大枠のレイアウトはできている状態でした。
プレビューがこちら
タイトル下のテキスト位置の修正とRead moreを削除するようにプロンプトを入力して調整した結果
アップロードした画像と全く同じではないですが、あとは手動で微調整すればいいレベルに数分で到達してしまいました。
この時点では、プレーンなHTMLとCSSではなくReactで利用できるJSベースのソースコードなので、これをHTMLとCSSで出力するように指示をします。
出来上がった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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2 class="title">Recent Posts</h2>
<div class="title-underline">
<span></span>
</div>
<div class="featured-posts">
<div class="post">
<img src="placeholder.jpg" alt="CMS構築" class="post-image">
<div class="post-content">
<h3 class="post-title">要件定義不足で失敗するCMS構築とその回避方法</h3>
<p class="post-meta">IT活用 | 2024.07.19</p>
</div>
</div>
<div class="post">
<img src="placeholder.jpg" alt="デジタルスキル" class="post-image">
<div class="post-content">
<h3 class="post-title">デジタルスキルアップで業務効率を劇的に改善！中小企業のためのサポートプログラム</h3>
<p class="post-meta">IT活用 | 2024.07.18</p>
</div>
</div>
</div>
<div class="regular-posts">
<div class="post">
<img src="placeholder.jpg" alt="機械学習" class="post-image">
<div class="post-content">
<h3 class="post-title">機械学習の流れをPythonを使って勉強してみました</h3>
<p class="post-meta">web制作 | 2024.03.27</p>
</div>
</div>
<div class="post">
<img src="placeholder.jpg" alt="ChatGPT" class="post-image">
<div class="post-content">
<h3 class="post-title">「無料画像検索はもう古い？ChatGPTで一瞬にしてオリジナルイメージを生成！</h3>
<p class="post-meta">web制作 | 2024.02.28</p>
</div>
</div>
<div class="post">
<img src="placeholder.jpg" alt="HTML&CSS" class="post-image">
<div class="post-content">
<h3 class="post-title">ChatGPTに画像を認識させてHTML&CSSコーディングを自動化</h3>
<p class="post-meta">web制作 | 2024.02.06</p>
</div>
</div>
<div class="post">
<img src="placeholder.jpg" alt="NURO光" class="post-image">
<div class="post-content">
<h3 class="post-title">光回線ってこんなものか…。と諦めてたけど、NURO光は違いました</h3>
<p class="post-meta">web制作 | 2023.09.05</p>
</div>
</div>
<div class="post">
<img src="placeholder.jpg" alt="WordPress" class="post-image">
<div class="post-content">
<h3 class="post-title">WordPressのセキュリティ強化に向けたSiteGuard WP Pluginの効果的な活用</h3>
<p class="post-meta">web制作 | 2023.08.29</p>
</div>
</div>
<div class="post">
<img src="placeholder.jpg" alt="フィットネス" class="post-image">
<div class="post-content">
<h3 class="post-title">仕事の合間にできるちょっとしたフィットネスでリフレッシュ！</h3>
<p class="post-meta">Life | 2023.08.15</p>
</div>
</div>
</div>
</div>
</body>
</html>CSSはこちら
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.title {
font-size: 2rem;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.title-underline {
text-align: center;
margin-bottom: 40px;
}
.title-underline span {
display: inline-block;
width: 80px;
height: 4px;
background-color: #3b82f6;
}
.featured-posts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.regular-posts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.post {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.post-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.post-content {
padding: 20px;
}
.post-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 10px;
}
.post-meta {
font-size: 0.9rem;
color: #666;
text-align: right;
}
@media (max-width: 768px) {
.featured-posts,
.regular-posts {
grid-template-columns: 1fr;
}
}
HTMLを確認するとセマンティックなhtml構造ではなかったので、セマンティックなHTMLへ変換するよう指示をします。
変換後の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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="container">
<header>
<h1 class="title">Recent Posts</h1>
<div class="title-underline">
<span></span>
</div>
</header>
<section class="featured-posts">
<article class="post">
<img src="placeholder.jpg" alt="CMS構築" class="post-image">
<div class="post-content">
<h2 class="post-title">要件定義不足で失敗するCMS構築とその回避方法</h2>
<p class="post-meta">IT活用 | 2024.07.19</p>
</div>
</article>
<article class="post">
<img src="placeholder.jpg" alt="デジタルスキル" class="post-image">
<div class="post-content">
<h2 class="post-title">デジタルスキルアップで業務効率を劇的に改善！中小企業のためのサポートプログラム</h2>
<p class="post-meta">IT活用 | 2024.07.18</p>
</div>
</article>
</section>
<section class="regular-posts">
<article class="post">
<img src="placeholder.jpg" alt="機械学習" class="post-image">
<div class="post-content">
<h2 class="post-title">機械学習の流れをPythonを使って勉強してみました</h2>
<p class="post-meta">web制作 | 2024.03.27</p>
</div>
</article>
<article class="post">
<img src="placeholder.jpg" alt="ChatGPT" class="post-image">
<div class="post-content">
<h2 class="post-title">「無料画像検索はもう古い？ChatGPTで一瞬にしてオリジナルイメージを生成！</h2>
<p class="post-meta">web制作 | 2024.02.28</p>
</div>
</article>
<article class="post">
<img src="placeholder.jpg" alt="HTML&CSS" class="post-image">
<div class="post-content">
<h2 class="post-title">ChatGPTに画像を認識させてHTML&CSSコーディングを自動化</h2>
<p class="post-meta">web制作 | 2024.02.06</p>
</div>
</article>
<article class="post">
<img src="placeholder.jpg" alt="NURO光" class="post-image">
<div class="post-content">
<h2 class="post-title">光回線ってこんなものか…。と諦めてたけど、NURO光は違いました</h2>
<p class="post-meta">web制作 | 2023.09.05</p>
</div>
</article>
<article class="post">
<img src="placeholder.jpg" alt="WordPress" class="post-image">
<div class="post-content">
<h2 class="post-title">WordPressのセキュリティ強化に向けたSiteGuard WP Pluginの効果的な活用</h2>
<p class="post-meta">web制作 | 2023.08.29</p>
</div>
</article>
<article class="post">
<img src="placeholder.jpg" alt="フィットネス" class="post-image">
<div class="post-content">
<h2 class="post-title">仕事の合間にできるちょっとしたフィットネスでリフレッシュ！</h2>
<p class="post-meta">Life | 2023.08.15</p>
</div>
</article>
</section>
</main>
</body>
</html>一瞬でこれをやられてしまったら、これを使わないのはもったいないレベルの出来だと思いました。
実践的なヒントとテクニック
v0の良いところは、プレビューを見ながら調整ができる点です。
入力した指示の内容が反映される様子をリアルタイムで確認できるので、修正が必要な場合でもとにかく早いです。
出力された結果に対して、具体的に「〇〇をこうして」と指示することで、レイアウトの修正が可能なので、1回で思った内容が出力されなかったとしても数回の修正で思った内容になると思います。
HTML作成の話から少しそれますが、「WordPressで利用できるソースを作成」と指示すると、WordPressの固定ページで利用できるPHP込みのソースコードも作成してくれます。組み込み方法も一緒に教えてくれるので、WordPress詳しくない方も簡単に実装できると思います。
出力されたソースコードは自身の目でしっかりとレビューする必要はあると思います。
静的なHTMLであれば表示されたレイアウトの確認で済みますが、動的な内容を含むUIなどは、その点は抜かりなくやってほしいと思います。
出力されたものを鵜呑みにするのではなく、自分で判断をするってことがAIと上手に付き合うポイントだと思っています。
まとめ
ChatGPTを使ったHTMLとCSS作成も使えるレベルではあると思いましたが、v0はその上をいくようです。
XDやFigmaなどで作成したデザインからでもソースコードを作成できてしまいそうな感じがしました。
次は、そのあたりも検証してみたいと思います。
生成AI、webサービスやツールなどデジタルスキルの向上は、企業の成長と成功に不可欠な要素です。弊社では、デジタルツールをただ使うだけではなく、業務効率の向上やビジネススキルの強化を目指す方に向けたコンサルティングとコーチングのサービスを提供しています。デジタルスキルアップサポートを利用して、業務効率を飛躍的に向上させ、競争力を強化しませんか？
今すぐお問い合わせください！
デジタルスキルアップサポート