【AI×Web制作 爆速ワークフロー④】コーディング速度・クオリティをAIで向上させる
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。
AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。
（無料公開、限定100名、2月22日まで）
» 今すぐ億を稼ぐマニュアルをゲットする
Web制作の中でも、好き嫌いが分かれるコーディング。
誰しも、初心者・新人の頃は「デザインを見せられたけど、どこから書けばいいのか分からない」と悩んだ経験がある部分です。デザイン同様に白紙からの作成になるので、学習と実務との「壁」を感じる１つのポイントでもあります。
今回は、そんな状態を抜け出すために、AIを使ってコーディングを効率よく進める方法を紹介します。 「AIにデザインを渡してコーディングしてもらったけれど、デモみたいに上手くいかなかった」なんてことはありません。実務レベルでのコーディングに活用するための、現実的であり、誰もが再現できるAIの使い方をお教えします。
【AI×Web制作 爆速ワークフロー】について
この連載では、AIを使ってWeb制作を“爆速化”するリアルな制作フローを、ひとつの架空案件を通して紹介していきます。
テーマはAIを使って、1ヶ月分の仕事を3日で終わらせる。
なお、この連載は「AIに丸投げして作っちゃおう」という話ではありません。
これは、実際のWeb制作ではクライアントの要望を理解し、Webサイト（ページ）に落とし込んでいく必要があるためです。
我々Skillhubがお伝えしたいのは、Web制作の仕事を請け負う中でのAI活用術です。
- 実際の制作フローの中で、AIをどのように活用するか？
- 失敗を防ぎ、AIを効果的に使うには？
- AIが優秀な今、人間（Web制作者）側に必要なスキルは何か？
今回は、前回作成したデザインを元に、HTML/CSSでのコーディングを行います。
AI×Web制作 爆速ワークフロー
第4回｜HTML＆CSSコーディング編
コーディングが「つらい」と感じる理由
コーディング業務をつらく感じて、嫌になる理由。
大きく分けると以下の２つ、どちらか（もしくは両方）ではないでしょうか。
- 何からコーディングし始めればいいかわからない
- 上手くいかない部分が、延々と解決しない
まず、悩みすぎてスタートを切れない。
頑張って作業をしていても、前に進んでいる感覚がない。
そして時間だけが過ぎていく…。
初心者がつまずく原因の多くは、ここにあります。
今回やること
第4回では、まず「何からコーディングし始めればいいかわからない」状態を、AIを使って解消します。
デザインを渡して、ページ全体の土台となるHTMLとCSSを、AIに作ってもらいます。
ここで念頭に置いてほしいのは、AIにデザインを完璧に再現させるのが目標ではないという点です。
構造がある程度できている状態を用意することで、「次に何を直せばいいか」が見える状態を作ります。
そして、直しながら、うまくいかない部分はAIに相談する。
「ベース作り」 + 「コーディング相談役」 としてAIを活用することで、作業時間を短縮させつつ、クオリティの高いコーディングを目指します。
AIを活用する｜ベースになるコードを作る
1. 使用するAIについて
作業の流れが分かりやすいように、 VSCode（Visual Studio Code）とプラグインのCODEXを使用しています。同様のことはこちらの記事で紹介しているCursorなどのAI搭載エディタでも可能です。
また、下図のようにWeb版AIアプリ（ChatGPT, Geminiなど）にデザイン画像を添付して送る方法でも、HTMLとCSSを生成させることができます。
この場合は、出力されたコードを作業中のHTML/CSSファイルに貼り付けて反映させます。
ご自身が使いやすい環境で試してみてください。
2. いざ、AIによるコード生成
では、AIにデザイン画像と指示を渡してみましょう。
デモでは以下のようにプロンプトを書きました。
添付したデザイン画像と同じ見た目のWebページを、HTMLとCSSでコーディングしてください。
JavaScriptは使わず、構造が分かりやすいHTMLと、修正しやすいシンプルなCSSでお願いします。条件
- デザイン幅は1400px。それ以上のブラウザ幅で見ても問題なく表示できるようにする。
- コンテンツ幅は最大で1200pxとする。
- 使用する画像はimagesフォルダにあります。
最後の使用画像は、Webアプリ画面を使うなら「画像パスは自分で入れます」などでも良いと思います。
条件として、コンテンツ幅やフォントなどを書くと理想に近い形になります。
もちろん後から指示をする・コードで生成後に自分で調整しても構いません。
プロンプトを考えるところで止まってしまっては意味がないので、完璧を目指さず、ある程度指示が出来たら送ってみましょう。
実際にAIにリクエストを送ってみます。
（※以下は待ち時間を編集でスキップしているので、実際にはもう少し時間がかかります）
セマンティックなHTML構造と、最低限のレイアウトや余白を持ったCSSが生成されました。
HTMLの構造を作って、クラス名を考えて、ベースのCSSを書いて……これまで3時間以上かかっていた作業が、数分待っているだけで終わる。これはとても助かりますね。
では、肝心の表示はどうか。
ブラウザで表示させてみましょう。
【デザインカンプ】
【AIがコーディングしたHTMLページ】
正直に言うと、「デザインの完璧な再現」には程遠いです。
レイアウトや配色は大まかに合っているものの、細部を見ると調整が必要な箇所は多く残っています。
プロンプトを細かく書けば、再現度を高めることも可能です。
ただ、個人的な経験として、AIだけでデザインカンプ通りの完璧なコーディングを仕上げるのは現実的ではありません。出来るとしたら、BootStrapのようなCSSフレームワークがある前提、かつ、フレームワークにガッチリとはまるデザインの場合くらいです。
デザインツールとWebページの書き出しが一体になっているアプリケーションと比べると、コードによる再現精度はどうしても見劣りします。
ですが、それでまったく問題はありません。
目的は「AIを使ってWeb制作の効率を上げること」だからです。
HTML/CSSコーディングの基礎知識があれば、すべてAI任せでなくとも調整は出来ますよね。
我々にとって重要なことは、AIによる作業の補助です。
何もない状態から書き始めるのではなく、土台がすでに用意されている。
この安心感があるだけで、その後のCSS調整や修正作業は格段に進めやすくなります。
ポイント｜人の手でデザインに近付ける
ここからは人間の目で確認しながら、HTMLとCSSでデザインの再現度を高めていきます。
上手くいっていないところをAIに依頼して再度調整させても、自分で修正しても良いです。効率の良い方法で進めていきましょう。
■ 自分で直したほうが早い部分は自分で
すでにAIがデザインカンプを見て、コードを出してくれています。
ブラウザ表示を見れば「この余白を直したい」「文字サイズが違う」など、直したい箇所がどんどん見つかるでしょう。
ここでAIのチャットボックスに「h1のフォントサイズは48pxで、字間が25%で、太さは…」と逐一書いていく必要はありません。自分でCSSファイルを直したほうが早い部分も多いと思いますので、そのへんは手作業で直していきましょう。
最初にAIにコーディングをさせているのて、HTMLとCSSの下地は出来ている状態です。
ゼロから全部自分でコーディングしようとすると難しい…という方も、かなり作業は進めやすいでしょう。
■ もちろんAIに相談しながら進めてもOK
分からない部分があれば、その箇所をAIに聞くこともできます。
全体を丸ごと投げるよりも、部分的・具体的に聞いた方が、精度の高い答えが返ってきます。
例えば、下記の画像は、Figmaのデザインファイルで白背景がついたまま使っていました（乗算で配置）。素直に画像を書き出して、imgで表示させるとこうなります。
これは良くないですよね。
でも、逐一Photoshopなどで透過するのも面倒。
なんかやり方あるかなー…と思ったら、即AIに聞くことができます。
reasonsに使われている画像は、白い背景色が付いています。 デザインツールでの「乗算」のように、CSSを使って背景色に馴染ませるためには？
mix-blend-modeを使う、という答えが返ってきました。
ただ、下図で実際にAIに投げてみましたが、これだけだと残念ながら透過風の表示にはなりません。
ちなみに透過風の表示にならない原因は、親要素に背景色が必要だからです。
ピンとくれば自分でサクッとCSSを直すと早いですね。
なぜ思った表示にならないのか、原因がわからなければ追加でAIに聞くと教えてくれます。
■ 大幅な変更・追加はAIに任せると「楽」が出来る
クラス名の命名ルールを変えたい、レスポンシブにしたい（スマホ幅用のCSSを追加したい）など、大きな変更が必要な場合はAIに依頼すると早く・楽に作業を進められます。
以下の記事では、レスポンシブ化の簡単なプロンプト・結果を公開しています。
どのようにレイアウトを変更したいか、要素の並び順はどうしたいか、などの要望をプロンプトに入れると、イメージに近いコードが出てくる可能性は高まります。
デザインに合わせてAIへの要望を整理しながら、効率よくコーディングを進めていきましょう！
Skillhubブログ
なお、グローバルナビゲーションの固定やスマホ向けの調整は、次回のJS編でもご紹介します。
ぜひ参考にしてみてください。
まとめ
AIを活用すれば、効率的にコーディングはできる
AIを活用することで、コーディングにかかる時間は従来よりもかなり短くなります。
ただし、現場レベルの制作でいうと「デザインカンプをAIに丸投げして、秒で終わる」とは言えません。
人間はデザインの意図や細かなニュアンスを理解し、状況に応じて調整することができます。
今のところ、AIはまだその域には到達していません。
AIを使用することで作業時間が短縮できるのは、AIが作業ベースを作ったり、解決策の提案をしてくれることで「どうしよう・・・」と考える時間が、ほぼなくなるからです。
■ AIを活用するメリット
AIがあることで、私たちは考え込む、実装方法を調べる時間を大幅に短縮させることができます。
今回のコーディングでも、AIがベースを作ることで「何から始めるか」を考える時間が、ほぼなくなることが伝わったかと思います。
さらに、「どういう方法があるのだろう？」「こうしたいけれど、うまくいかない」とハマってしまうポイントも、AIに相談することで解決法のアドバイスを受け取ることができます。
現時点で、AIは、コーディングを全て代行してくれる存在ではありません。
スタート地点を用意してくれる、もしくは整備をしてくれる便利なツールだと考えるとよいでしょう。
■ AIを使用する注意点
コーディングでAIを活用する注意点としては、大きくは以下の３つに注意しましょう。
- 個人情報や機密情報が記載されているものは、そのまま渡さない
- AIは画像からの文字起こしもしてくれるが、間違うこともあるので必ずチェックをする
- HTML構造やCSSクラス名などは、必要に応じて自分で整理し直す
また、上でのデモでお察しの通り、全てAI任せだと速度とクオリティの両立は出来ません。
上手くいかないところを全てAIにチャットで丸投げしていたら逆に時間がかかります。
AIを使う、人間が自分でやる、必要に応じて最適な方法を選ぶことがポイントです。
次回予告
次回は、HTMLとCSSでコーディングしたWebページに、JavascriptとCSSを追加して「機能」と「動き」を付けていきます。
実は、AIは今回行ったデザインカンプからのフルコーディングよりも、JSを書かせたほうが優秀。
JSがほとんど書けない方でも、今のWebページにプラスの機能・動きを実装できます。
お楽しみに！
Skillhubのご案内
この連載で紹介しているフローは、基礎があってこそ再現できるものです。
Skillhubでは、以下のようなことを、初心者向けに体系的に学べるカリキュラムを提供しています。
- Webサイトの構造の考え方
- なぜその構成・デザインになるのか
- AIが出したコードや提案を“理解して直せる力”
基礎知識を学べる無料講座もご用意しています。
この機に、AIを活用するために必要な基礎力を身につけちゃいましょう！
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
2月22日まで