Web制作において「ちょっとしたテキストが欲しい」という場面は少なくありません。ワイヤーフレーム用のダミーテキストや、ランディングページのキャッチコピー、フォームのエラーメッセージなど、本番ではライターやクライアントに用意してもらう内容でも、とりあえずデザインを進めるために必要になることがあります。そんなとき便利なのが、無料で使えるテキスト生成AIです。今回は代表的な4つのAIに同じプロンプトを投げ、Web制作での使い勝手を比較してみました。
1. 今回紹介するテキスト生成AI
比較対象に選んだのは以下の4つです。いずれも無料アカウント登録だけで利用可能です。
なお、各生成AIのアカウント登録方法については割愛させていただきます。
2. 実際にプロンプトを投げて比較してみる
2-1. ワイヤーフレーム用ダミーテキストの生成
Web制作のワイヤーフレームに使うダミーテキストを生成してください。
・病院サイトのトップページを想定
・キャッチコピー（20文字程度）
・サブコピー（40文字程度）
・サービス紹介文（100文字程度）
日本語でお願いします。
生成結果
文章の生成に関しては、いずれのAIも十分に使用できるクオリティのものが出力されました。
文体やトーンには、それぞれ微妙な違いがある印象です。
【ChatGPT】読みやすく、内容がすっと入ってくる印象
【Gemini】患者に寄り添うような表現が多め
【Claude】やや硬いが読みやすい文章
【Perplexity】クセのない汎用的に使えそうな文章
2-2. 文章の要約
クライアントとのMTGで聞きたいことのメモ書きを投げるので、要約してMTGの時に見やすい形にしてください。
・トップページのキャッチコピー、現状「未来をつなぐテクノロジー」だが抽象的すぎる印象。業種が伝わりにくいので、もっと具体的にするか相談したい。
・商品ページの写真、クライアント側で用意できるか？もし難しければ撮影手配をこちらで提案する必要あり。
・サービス紹介のページ構成、文章量が多くて読みづらい。アコーディオン形式でまとめるか、図解を入れる案を出す。
・会社概要ページ、代表あいさつ文が長い。重要部分だけ残して要約した方が読み手に伝わりやすい。
・お問い合わせフォーム、必須項目が「名前・メール・電話番号・問い合わせ内容」で良いか確認したい。入力ハードルを下げたい。
・サイト公開後の運用フロー：更新を社内で行うのか、それとも保守契約を希望するのかを確認。特に採用情報ページは更新頻度が高そう。
・SEO対策の件、競合調査をしたら「地域名＋サービス名」で上位表示している企業が多い。メタ情報と見出しを見直したい。
・SNS連携、現状はTwitterだけだがInstagramも埋め込みたいとの声が出ていた。優先順位を確認。
【ChatGPT】不要な要素が削ぎ落とされ、見やすい印象
※画像は画面の都合上一部のみを抜粋しています。
【Gemini】まとまりがなく、少し見づらい印象
※画像は画面の都合上一部のみを抜粋しています。
【Claude】前情報に「要約が得意」とあったが、PDF形式で見やすくまとまっている。
※画像は画面の都合上一部のみを抜粋しています。
【Perplexity】こちらは無難に要約されていて、見やすい印象
※画像は画面の都合上一部のみを抜粋しています。2-3. コード生成
レスポンシブ対応の2カラムレイアウトをCSSで記述してください。
条件：
・左カラムは幅70%、右カラムは幅30%
・スマホでは縦並びになる
【ChatGPT】Flexboxを用いたコードを生成。特に指示しない場合、HTMLファイル内にスタイルを記述する形で返ってきた。表示確認を行ったところ、gapが横に効いている影響で、PCで横並びになっていなかったため、手直しが必要。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2カラムレスポンシブ</title>
<style>
.container {
display: flex;
flex-wrap: wrap; /* スマホサイズで縦並びになるように */
gap: 20px; /* カラム間の余白 */
}
.left {
flex: 0 0 70%; /* 幅70% */
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box;
}
.right {
flex: 0 0 30%; /* 幅30% */
background-color: #d0d0d0;
padding: 20px;
box-sizing: border-box;
}
/* スマホ対応 */
@media (max-width: 768px) {
.left, .right {
flex: 0 0 100%; /* 幅100%で縦並び */
}
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h2>左カラム</h2>
<p>ここに左カラムの内容を入れます。</p>
</div>
<div class="right">
<h2>右カラム</h2>
<p>ここに右カラムの内容を入れます。</p>
</div>
</div>
</body>
</html>
【Gemini】こちらも問題ない品質のコードを出力。表示も問題なし。色も付いているが、コメントがあるので編集して問題ないことがわかる。
<div class="container">
<div class="left-column">
<h2>左カラム</h2>
<p>このカラムの幅は70%です。スマホでは上部に表示されます。</p>
</div>
<div class="right-column">
<h2>右カラム</h2>
<p>このカラムの幅は30%です。スマホでは下部に表示されます。</p>
</div>
</div>
.container {
display: flex;
flex-wrap: wrap; /* カラムの折り返しを有効にする */
}
.left-column {
width: 70%;
background-color: #e6f7ff; /* 背景色はお好みで */
padding: 20px;
box-sizing: border-box; /* パディングを含めて幅を計算 */
}
.right-column {
width: 30%;
background-color: #fff0e6; /* 背景色はお好みで */
padding: 20px;
box-sizing: border-box;
}
/* 768px以下のビューポートで適用されるスタイル */
@media (max-width: 768px) {
.left-column,
.right-column {
width: 100%; /* 幅を100%にして縦に並べる */
}
}
【Claude】一部デバイスサイズで、右のアイテムが見切れてしまった。また、要素の角丸やリストなど、場合によっては不要な装飾も。
<div class="container">
<div class="left-column">
<h2>左カラム（70%）</h2>
<p>メインコンテンツがここに入ります。デスクトップでは全体の70%の幅を占め、スマホでは上段に配置されます。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="right-column">
<h3>右カラム（30%）</h3>
<p>サイドバーコンテンツがここに入ります。デスクトップでは全体の30%の幅を占め、スマホでは下段に配置されます。</p>
<ul>
<li>メニュー項目1</li>
<li>メニュー項目2</li>
<li>メニュー項目3</li>
</ul>
</div>
</div>
.container {
display: flex;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.left-column {
flex: 0 0 70%;
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
}
.right-column {
flex: 0 0 30%;
background-color: #e8e8e8;
padding: 20px;
border-radius: 8px;
}
/* スマホ対応（768px以下で縦並びに変更） */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.left-column,
.right-column {
flex: 1 1 auto;
width: 100%;
}
}
【Perplexity】必要最低限のコードで、指示した要件は盛り込んでいる。ただ、背景色がないため、どこまでが要素なのかひと目でわかりづらい。
<div class="responsive-container">
<div class="responsive-left">
左カラム（幅70%）
</div>
<div class="responsive-right">
右カラム（幅30%）
</div>
</div>
.responsive-container {
display: flex;
flex-wrap: wrap;
}
.responsive-left {
flex: 0 0 70%;
max-width: 70%;
}
.responsive-right {
flex: 0 0 30%;
max-width: 30%;
}
@media (max-width: 768px) {
.responsive-left,
.responsive-right {
flex: 0 0 100%;
max-width: 100%;
}
}
3. 検証結果
今回の比較で見えてきた特徴をまとめると以下の通りです。
ChatGPT文章生成の部分では、求めているニュアンスのものが出やすい印象。コード生成については、一部手直しが必要だったが、十分使える精度。
Gemini文章の要約では若干整理されていない印象を受けた。コード生成に関しては適宜コメントを入れて出力してくれる。
Claude文章の要約が得意。適宜PDF出力を併用してくれるので、ログが長くなりすぎない。コードについては余計なものも多く、求めているのを出すにはプロンプトの工夫が必要。
Perplexityテキスト生成も要約も問題ない性能。コードは入力内容に忠実で正確だが、柔軟さにはやや欠ける印象。
要約ならClaude、汎用的な用途ならChatGPT、根拠を明確に示したい場合Perplexity、といった具合に選ぶと効果的だと思いました。
ただ、今回はコラムという都合上、シンプルなプロンプトしか試していません。より複雑なプロンプトを投げた時に、初めてそれぞれの生成AIの性能差や特徴の差が出ると思いますので、是非色々なプロンプトを試してみてください。
おわりに
いかがでしたでしょうか？いずれの生成AIも十分に使えるクオリティの文章やコードを生成してくれますが、それぞれ得意分野に違いがあるという印象でした。テキスト生成AIは「最終的な原稿やコードを丸ごと任せる」よりも、Web制作の下準備や補助として活用するのに適しています。ダミーテキストを埋める、キャッチコピーの方向性を探る、簡単なコードを試すといった場面でAIをうまく使うと、作業スピードがぐっと上がります。ぜひ今回の比較を参考に、Web制作業務にAIを取り入れてみてください。
