AI技術を活用してコーディング業務を効率化してみた Gemini編 | GUARDIAN Creative BLOG | 初期無料のサブスク型ホームページ制作｜7万実績のWEB戦略とAIで成果を出す | 初期無料のサブスク型ホームページ制作｜7万実績のWEB戦略とAIで成果を出す

Gemini（ジェミニ）は、Googleが開発した対話型AIサービスです。
2023年12月に発表され、現在はベータ版として無料で提供されています。

Gemini（ジェミニ）、高度な自然言語処理技術を用いて、ユーザーとの自然な会話を実現します。

質問に答えたり、雑談をしたり、ユーザーの意図を正確に理解し、適切な応答をすることができます。

また、インターネット上の膨大な情報にアクセスし、ユーザーにわかりやすく提示することができます。

詩、小説、コード、脚本など、様々な形式の創作物を生成することも可能です。

さらに、日本語を含む100以上の言語間で翻訳することができます。

Gemini（ジェミニ）は、まだ開発段階ですが、将来的には、教育、医療、ビジネス、エンターテイメントなど、

様々な分野で活用されることが期待されています。

このGeminiを紹介する文章はGemini自身に生成してもらいました。
詳しくはGoogle Japan Blogをご確認ください。
https://japan.googleblog.com/2023/12/gemini.html

Gemini（ジェミニ）の前身はBard（バード）というAIでしたが、
Bardでプロンプトを実行して出力されたHTML、CSSは
ChatGPTと比べ、非常に精度の悪いものでした。

2023年6月に実験した時の内容が下記となります。

◆日本語プロンプト比較

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

【ChatGPT3.5出力結果】

【Bard出力結果】

◆日本語プロンプト比較
ChatGPT3.5ではスタイルがいい感じに指定されたものが生成された。
Bardは見た目がおかしく、指示の大半も無視されてしまった。

◆英語プロンプト結果比較

日本語プロンプトを英語翻訳したもので検証。

Instruction:
You are a [professional front-end engineer].
You will be building a [media site].
Please write [HTML, CSS] based on the following constraints and input sentence.
Constraints:
• Latest information content
• Elements output are image, date, category tag, and title
• Set links to the image and title
• If the title exceeds two lines, truncate it
• Apply link effects on hover
• Output [Media], [Media] in the headline
• Output a "Details" button under the content
• Number of articles is 6
• Site width is 1170px
• Prefix [-w-] to the ID name and class name
• Display the article list in a [card type] and [3 columns]
• Output HTML and CSS separately
• Use dummy images for the images
• Overall, make the design [COOL]

【ChatGPT3.5出力結果】

【Bard出力結果】

◆英語プロンプト比較
ChatGPT3.5は日本語プロンプトより見た目が劣るが要件はおさえたものが生成された。
Bardは日本語と同じものが生成されるという結果に。

というわけで昨年の6月時点ではBardはコーディングに使えないと判断し、
長らく使っておりませんでした。
が、Gemini（ジェミニ）の登場です。
試しに同じ日本語プロンプトを使いGeminiがどういったものを生成されるか試してみます。

Bardで試したプロンプトをGeminiがどう理解し、結果を返してくれるのか試してみましょう。

# 命令書:
あなたは[プロのフロントエンドエンジニア]です。
[メディアサイト]を構築します。
以下の制約条件と入力文をもとに[HTML,CSS]を記述してください。

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

◆HTML

◆CSS

【出力結果】

Gemini（ジェミニ）さん？？？

Bardからどれだけ変わったのか期待したらめちゃくちゃな結果を出力するGemini（ジェミニ）。
まずプロンプトで強調していた文字を括弧で囲っていたのですが、
何故かclass名に反映されていました。
また、CSSも途中で途切れた形となっていました。
というわけでGemini（ジェミニ）に追加で指示を与えます。

class名に[]はつけないで

◆HTML

◆CSS

【出力結果】

相変わらずCSSが途中で途切れているのですが、
Bardと比べてGemini（ジェミニ）ではスタイルの指定が向上しているのがわかります！
これは画像からのコーディングも期待できそうです！
今回はここまでとなります。
次回、Gemini（ジェミニ）は画像からコーディングが出来るのか！？