Web制作でChatGPTでできる事例7選【現役コーダーが解説】

突然ですが、こちらを見てください。

これは、2024年5月13日に公開された「GPT-4o」に司令を与えている場面です。デザインカンプのスクショを添付し、コーディングするように指示しています。

その結果出てきたコードを実行すると、以下のようになりました。

プロンプトではボックスの横幅と縦幅を指示しているので、結構それっぽく表示されているのが分かると思います。

次はこちらを見てください。あらかじめデザインの横幅と縦幅を伝えておき、画像は仮のものを置いてくれと伝えました。

結果として出力されたのがこちらです。

予想していた通りですが、画像内の情報が多くなるほどデザインとはかけ離れていっています。

しかし、細かいパーツ毎にコーディングさせていけばいい線行くかもしれません。これを見て多くの方は

ありさちゃん

想像より進化してる！！いよいよコーダーはAIに代替されるのかな…！？

と思ったかと思います。事実コードもそこそこ綺麗に書けていると思います。

ただ、私はこれらの理由から、ほとんどこの機能は使いません。

スクショ貼って、ざっとそれっぽいコードが書ければいいケースはWeb制作のクライアントワークではそこまで無いです。

ただ、GPT自体は活用したほうが生産性が上がるのは間違いなく、個人的にはAIは

だという認識なので、今回は私が実務でよくGPTにさせる処理を紹介していこうと思います。

既にコーディングにAIをうまく取り入れる人とそうでない人ではかなりの生産性の違いが出ているので、今回の記事で是非キャッチアップしていただければと思います。

しょーご

こんな使い方もあるよ！というのがあれば教えて頂ければ幸いです！

GPTにさせることは以下の7つで、順番に解説していきます。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

• デザインカンプからのコーディングを経験したい
• 現役エンジニアのレビューを受けてみたい
• 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

ChatGPTの使い方を動画でも解説しました！

❶コードを書いて貰う

Web制作にAIを活用すると聞いて多くの方が最初にイメージするのはこれだと思います。

ただ私の場合はHTMLやCSSを一から書いてもらうことは無く、パーツや機能毎に書いてもらうことが多いです。

JavaScriptの例

JavaScriptが絡む場面はHTML/CSSに比べてロジックが多めなので、生成AI向きです。例えば

という指示を出してみます。

出力されたコードは以下で、HTML/CSS/JSがセットで出てきます。

ちゃんとdialogでモーダルを実装してくれましたし、aria-modal属性やaria-labelledby属性で、ある程度はアクセシビリティに配慮しているようです。

エンジニアさん

でもGPTのコードってちゃんと動くの？

という疑念があるかと思います。

ではこのコードを動かしてみましょう。

この点が問題無いことをご確認下さい。

モーダルの基本動作は完成したので、後はデザインどおりにボタンやモーダルを整えていけばOKです。

Sassの例

Sassで関数を作れると便利なんですが、苦手意識がある方も多いと思います。例えば、

と依頼してみるとします。こういうのはGPTの得意領域で、

使用例まで添付してくれました。

WordPressの例

WordPressもPHPなので、とても相性が良いです。例えば私はサブループみたいに若干長めのコードを書くときは、よくGPTにこのようにお願いします。

プロンプトを入力するときは、なるべく具体的に情報を与えるようにしてください。

この場合は、都度中のHTMLコードを自分のものに置き換えればいいと思います。

❷コードを書き換える

コーディングの中級者ほど恩恵を感じやすいのがこの使い方だと思います。

アクセシビリティ対応

こちらのハンバーガーメニューはdivでマークアップされており、キーボードフォーカスも当たりません。これを直したいとします。

<nav>
  <div class="hamburger" id="hamburger">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <ul class="nav-links" id="nav-links">
    <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</nav>

body {
  margin: 0;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px;
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 4px 0;
  transition: 0.4s;
}

.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

@media (max-width: 768px) {
  .hamburger {
      display: flex;
  }

  .nav-links {
      display: none;
      flex-direction: column;
      width: 100%;
      text-align: center;
      position: absolute;
      top: 53px;
      left: 0;
      background-color: #333;
  }

  .nav-links li {
      margin: 10px 0;
  }

  .nav-links.active {
      display: flex;
  }
}

document.getElementById('hamburger').addEventListener('click', function () {
  document.getElementById('nav-links').classList.toggle('active')
})

出力されたコードを見てみると、、、

相変わらずdivでボタンが作られているのが気になりますが、一応最低限のアクセシビリティ対応と、キーボード操作に対応したので、だいぶ良くなったと思います。

しょーご

ちなみに、GPTに一からハンバーガーメニューを作らせても自動でアクセシビリティ対応はしてくれないので、自分で「アクセシビリティ対応して！」と命令する必要があります。

だから前提知識があるのがAIを使いこなすコツということです。

jQuery→JavaScriptへの書き換え

こんな時に大活躍します。

$(function () {
   $('.js-tab-trigger').on('click', function () {
       //まずは全triggerからclass削除
       $('.js-tab-trigger').removeClass('is-active');
       //次に全targetからclass削除
       $('.js-tab-target').removeClass('is-active');
       //次にクリックした要素にis-active
       $(this).addClass('is-active');
       //data属性を取得する
       let id = $(this).data("id");
       //data属性値=idが等しいものにclass付与
       $('#' + id).addClass('is-active')
   });
});

すると、あっという間にJavaScriptに書き換えてくれます。

❸コードを解説してもらう

他人の書いたコードや、GPTに書いてもらったコードの処理の流れが理解できない時に解説してもらうのは便利です。

例えば以下はタブを展開するコードですが、直感的に分かりにくいと感じます。なのでこれを一行ずつ解説してもらいます。

document.addEventListener('DOMContentLoaded', () => {
 const tabTriggers = document.querySelectorAll('.js-tab-trigger');
 const tabTargets = document.querySelectorAll('.js-tab-target');

   tabTriggers.forEach(tabTrigger => {
       tabTrigger.addEventListener('click', (e) => {
           let currentMenu = e.currentTarget
           let currentContent = document.getElementById(currentMenu.dataset.id)
           tabTriggers.forEach(tabTrigger => {
               tabTrigger.classList.remove('is-active')
           });
           currentMenu.classList.add('is-active')

           tabTargets.forEach(tabTarget => {
               tabTarget.classList.remove('is-active')
           });
           if (currentContent !== null) {
               currentContent.classList.add('is-active')
           }
       })
   });
});

すると、丁寧に一行ずつ解説してくれます。

もしこの解説で理解できなくても、

と言えば、更に噛み砕いて解説してくれます。

❹コメントを書いてもらう

人は意外に自分がなぜこのコードを書いているのか覚えていないものなので、コメントを残すのは将来の誰かや自分のためにも重要です。

コメントを書くのは忙しいほど後回しにされがちですが、GPTを使えば秒で終わりますので、自分で書いたコードはもちろん、GPTで書いたコードもコメントを残しておきましょう。

❺エラーの解決

エラーメッセージの解説はもちろん、エラーの発生元の調査もお願いすることができます。

例えばWeb制作では検証ツールのConsoleによくエラーが出ていることがあり、実務ではこのエラーの解消が求められるケースが多いです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intentional Error</title>
    <style>
        .menu {
            display: none;
            background-color: #f1f1f1;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .menu.open {
            display: block;
        }
    </style>
</head>
<body>
    <button id="menuButton">Toggle Menu</button>
    <div id="menu" class="menu">
        <p>Menu Item 1</p>
        <p>Menu Item 2</p>
        <p>Menu Item 3</p>
    </div>

    <script>
        document.getElementById('menuButton').addEventListener('click', toggleMenu);

        function toggleMenu() {
            const menu = document.getElementById('menu');
            menu.classList.toggle('open');

            // Intentional error to demonstrate the ReferenceError
            try {
                if (menu.classList.contains('open')) {
                    openMenuActions();
                } else {
                    closeMenuActions();
                }
            } catch (error) {
                console.error('Caught an error:', error);
            }
        }

        function openMenuActions() {
            console.log('Menu is opened.');
            nonExistentFunction(); // This will cause the ReferenceError
        }

        function closeMenuActions() {
            console.log('Menu is closed.');
            // Additional actions can be added here if needed
        }
    </script>
</body>
</html>

このエラーメッセージをコピペして、エラーがありそうなあたりのコードをコピペして原因を探ってもらうことにします。

すると、予想通りコピペした中にエラーの原因があり、修正後のコードまで提示してくれました。

しょーご

実務ではもっと複雑なエラーが発生することが多いので、エラー調査をお願いする際は、自分でもある程度問題点を絞り込めていることが重要になります。

❻コードをレビューしてもらう

コードの書き換えに似てますが、自分で書いたコードのレビューをしてもらうのも有効です。

例えば私は以前「jQueryによるフォーム制御」の記事を書いてますが、そのコードをレビューしてもらいます。

フォームのsubmitをdisabledで制御し全て入力するまでsubmitできなくする【jQuery】 こんにちは、現在フリーのweb制作者として活動しているしょーご（@samuraibrass）といいます。 みなさん、フォームを制...

すると、なんということでしょう。改善点はもちろん、良い点まで教えてくれるではないですか。AI様、涙がでますよ(´；ω；｀)

結果的にコードはよりシンプルになりましたし、問題なく動作もしました。自分のコードをレビューしてもらうと勉強になります！

❼アニメーションの付与

アニメーションも説明が簡単なものであれば、再現させやすいです。

例えばWeb制作ではスクロール連動アニメーションがよくあるので、以下のような指示を与えてみます。

しかし、初回は要素が隠れたままで出現しなかったので、動かないことを指摘しました。

その結果、うまくアニメーションを再現することができました。

技術ある人間の右腕なのだと理解せよ

ここまでChat GPTを活用したコーディング事例を見てきましたが、最後にコーダーとしてのAIとの付き合い方について少しお話しようと思います。

この記事の読者は比較的初学者の方も多いと思いますが、私はAIを使う際に以下の点を気をつけています。

「AIでコードを生成していたら実力がつかないから辞めろ！！」などという時代錯誤なことは言いません。

むしろAIを毛嫌いして使わない人ほど今後は劣後していくと思います。

ただ、ここまで見てきた通りGPTは、現状は見た目以上にロジック部分が得意なので、

見た目部分は、デザインを忠実に再現するという使命を持ったコーダーが引き続き責任を持って管理する必要がありますし、

エンジニアさん

なんかしらんけど魔法みたいに動く〜

という状態だと、今後全く技術力は上がりません。

実はこれまでも「コピペエンジニア」という存在は結構問題視されてました。WordPressのコードコピペして、なんか知らないけど動く〜という状態です。ギクッとしましたか？（私も。。。）

それが、AIが普及するにつれて、「カンニングを推奨する悪い先生」として助長されていく可能性はあります。

しかし、見てきたようにAIは一方で解説もできるので、「理解できるまでとことん付き合ってくれる良き師」にもなり得ます。

今後はAIの発展に伴ってコーダーとしてはよりスピーディーに、複雑な実装を”AIといっしょに”こなせることが求められてきます。

この記事で一番伝えたかったメッセージは、「AIがあるからこそ、地に足ついたコーディング力を上げよう」ということなので、

エンジニアさん

コーディング力を高めつつ、AIも積極的に取り入れよう！！

というマインドになっていただけたら、とても嬉しく思います。

AI搭載エディター「Cursor」を使おう

ChatGPT以上に便利なCursorを紹介しています。エディター上でAIと一緒にもっと便利にコーディングしたい方はこちらを御覧ください！

Cursorエディタの使い方をCopilotと比較しつつ徹底解説！Web制作での活用事例も本記事ではcursorエディタの使い方を解説。copilot++による強力な自動補完も備えており、AIエディタの中では随一の使いやすさを誇ります。...

模擬案件チャレンジ開催のお知らせ

超実践編では納期厳守の模擬案件を経験し、スキル面以外にコミュニケーションも徹底レビューを受けることができます。

最近は実案件のノウハウも多いですが、「納期が短い案件の中で、丁寧なコミュニケーションを本当に実践できますか？」

この課題では、極限まで実案件に近い状況で、発注者である私とコミュニケーションを取りながら、

1. 見積書提出
2. 実装→初稿提出
3. レビュー→修正
4. 再修正→納品
5. 請求書

この流れを実践していただき、最後にzoomであなたに全体レビューを行います。

• 学習はだいたい終わったけど、納期までに納品できるか不安
• 中々継続と紹介で案件が回らない

このような中級者を飛躍させる超実践編、受講には条件がありますので、詳細はリンク先よりご確認下さい。

しょーご

あなたの挑戦を待っています！！

＼レビューを受けて圧倒的な自信を身につける！／

超実践編の詳細を見てみる