POST

Googleの生成AI「Gemini」はコーディングの相棒になる？WEB制作者がその実力を試してみた！

サービス
2025-09-04

近年、急速に進化を遂げている生成AI。

文章作成や画像生成だけでなく、プログラミングの世界でもその活用が注目されています。今回は、Googleが開発した高性能な生成AI「Gemini」が、WEBサイト制作などのコーディング作業でどれほど役立つのか、探っていきたいと思います。

Geminiはコーディングに利用できる？

まずGeminiを利用してコーディング支援してもらうと、どんなことが可能なんでしょうか。ざっくりイメージすると下記のような感じですかね。

  • コードの生成: 「こういう機能を持つボタンを作りたい」といった自然な言葉での指示（プロンプト）を元に、HTML、CSS、JavaScript、Pythonなど、様々なプログラミング言語のコードを生成します。
  • コードの解説: 既存のコードがどのような処理を行っているのか、初心者にも分かりやすく解説します。
  • デバッグ: コードの中に潜むエラーやバグの原因を特定し、修正案を提案します。
  • リファクタリング: コードをより効率的で読みやすい形に書き直す（リファクタリングする）提案をします。
  • 言語の翻訳: 例えば、Pythonで書かれたコードをJavaScriptに書き換えるといった、言語間の翻訳も可能です。

これらが割と高精度でできるなら、24時間いつでも相談に乗ってくれるコーダーが隣にいるようなものかもしれません。

例えばWEBサイト制作で「お問い合わせフォーム」を作りたい時、具体的にどんな風に手伝ってくれるの？

百聞は一見にしかず。
ということで、実際にフォーム作成をお願いしてみました。

以下はそのプロンプト（命令文）です。

「名前」「メールアドレス」「お問い合わせ内容」の入力欄と、「送信」ボタンがある、シンプルなお問い合わせフォームのHTMLとCSSコードを生成してください。デザインは清潔感のあるミニマルなスタイルでお願いします。

生成されたコードは以下。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お問い合わせフォーム</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="contact-form">
        <h2>お問い合わせ</h2>
        <form action="#" method="post">
            <div class="form-group">
                <label for="name">お名前</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">メールアドレス</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">お問い合わせ内容</label>
                <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="submit">送信</button>
        </form>
    </div>
</body>
</html>

なんとcssも出力してくれました　↓

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.contact-form {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* paddingを含んだ幅計算 */
}

textarea {
    resize: vertical;
}

button {
    width: 100%;
    padding: 12px;
    background-color: #007BFF;
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

このように、基本的な構造（HTML）とデザイン（CSS）の土台を瞬時に作成できるのはなかなか便利です。

ここからさらに「入力必須の項目が空欄だったらエラーメッセージを表示するJavaScriptを追加して」といった追加の指示を出すことで、より複雑な機能も実装していくことが可能ですので、基本知識さえあればかなり作り込むこともできるのではないでしょうか。

もちろん既存のコードのチェックや改善コードがうまく動かない時の修正も可能

デバッグの例

このJavaScriptコードが動きません。どこが間違っているか教えてください。

といった形で問題のコードを提示すれば、構文エラー、論理的な誤りなどを指摘し、修正案を提示します。

ただし、間違った修正提案をしてくる場合もあるので、見直しはきちんとできる知識が必要。完全な手離れを実現するには、もう少し時間が必要かもしれませんね。

また、リファクタリングについても、

リファクタリングの例

このCSSのセレクタはもっと効率的に書けませんか？ このJavaScriptの関数をもっと読みやすく、再利用しやすい形に書き直してください。

これも、結構使える方法ですが、間違える場合はあるので、チェックは必要です。
コードが長い場合は小分けにして調整を依頼するのが良いかもしれませんね。

自分では気づきにくい非効率な記述や、よりモダンな書き方を提案することで、コードの品質向上に貢献できます。これにより、メンテナンスしやすく、パフォーマンスの高いWEBサイト制作につながります。

Geminiをコーディングで使う上での注意点や苦手なこと

上記でも指摘したように生成AIも万能ではないです。
使う上で、以下のようなことに注意して活用していきましょう。

  1. 情報の正確性
    生成するコードが常に100%正しい、あるいは最適であるとは限りません。特に、複雑なコードに関わる部分では、ミスの可能性はあります。必ず自分の目で内容を確認し、テストを行うことが不可欠です。
  2. 最新情報への追随
    生成AIも必ず最新情報を持っているわけではなく、ある時点までのデータでトレーニングされています。そのため、リリースされたばかりの最新のフレームワークやライブラリの仕様については、情報が古かったり、対応できなかったりする場合があります。
  3. 文脈の理解
    非常に長いコードや、複数のファイルにまたがるプロジェクト全体の文脈を完全に理解するのは、まだ難しい場合があります。的確な答えを得るためには、質問の意図や背景を明確に伝え、必要な情報（コードサンプルなど）を的確に提供する「プロンプトの工夫」が重要になります。
  4. 最終的な責任
    生成されたコードを使用した結果、発生したいかなる問題についても、最終的な責任は開発者自身にあります。AIはあくまで「アシスタント」であり、最終判断は人が行うようにしましょう。怒られるのは自分ですから...汗

まとめ

Geminiは、コーディング知識がない人をいきなりプログラマーに変えてくれる「魔法の杖」ではありません。しかし、プロのWEB制作者や開発者にとっては、間違いなく「強力な相棒」となり得る存在です。

特に、定型的なコードの生成やデバッグの補助、新しいアイデアの叩き台作りなど、開発における様々なプロセスを効率化し、時間短縮に大きく貢献してくれるでしょう。これにより、開発者はより創造的で、本質的な課題解決に集中できるようになります。

重要なのは、AIの特性を理解し、その提案を鵜呑みにせず、自らの知識と経験で吟味すること。AIに「仕事を奪われる」のではなく、AIを「使いこなす」ことで、私たちの制作物のクオリティと生産性は、より良くなるはずです。

DIG-IT-DESIGNでは、静岡県浜松市でWEBサイト制作やSNS運用アドバイスや広告運用、生成AIの導入相談に対応しています。 お気軽にご相談ください。

お問い合わせはこちら　→

©2023 D.I.D.