目次
はじめに：AIが「LPを丸ごと作る時代」
かつて、LP（ランディングページ）を作るには
デザイナーがXDやFigmaなどでデザインを起こし、コーダーがHTML・CSS・JSを組み上げる──そんな流れが当たり前でした。
ところが、AIが数分で“HTML / CSS / JS”をすべて自動生成する時代が、もう来ています。
試しに「WebデザインスクールのLPを作って」とAIに指示したところ、下のようなファイルが一瞬で出力されました。
index.html：構造もセマンティックでSEO対応styles.css：BEM命名＋変数定義＋レスポンシブscript.js：IntersectionObserver、スムーススクロール、バリデーション完備
そう、もうデザインから実装まで1人で完結してしまうのです。
実際にAIに出した指令
あなたは一流のフロントエンドエンジニア兼UIデザイナーです。
以下の仕様（BRIEF）に沿って、LP（ランディングページ）を生成してください。
【目的】
・コンバージョン率の高い構成を意識
・スマホ優先（レスポンシブ）
・構成は Hero → Features → Curriculum → Voice → CTA（フォーム）
・プログラミングスクールのLP
【条件】
– 外部ライブラリ・フレームワーク（React, Bootstrap, Tailwind, jQueryなど）を使わない
– ファイルは純粋なHTML / CSS / JSで構成
– 各ファイルを **別々のコードブロック** に出力
– コード以外の説明文は不要 – CSSはBEM命名、:rootにカラーバリアブルを定義
– HTMLはセマンティック構造（header, main, section, footer）
– JavaScriptはプレーンで記述（IntersectionObserver, smooth scroll, form validation など）
【出力形式】
html
<!-- index.html -->
（ここにHTML全体）
css
コードをコピーする
/* styles.css */
（ここにCSS全体）
js
コードをコピーする
// script.js
（ここにJS全体）たったこれだけ。
AIはこれを理解し、構成からアニメーションまで完全自動生成してくれました。
しかも、出てきたコードは人間が書いたものとほとんど見分けがつかないレベル。
コンポーネント設計も美しく、変数管理、メディアクエリ、さらにはモバイル固定CTAまで、全部入っている。
出力されたHTML/CSS/JSの完成度
AIが生成したLPは、次のような特徴を持っています。
| 要素 | 内容 |
|---|---|
| HTML | header/main/footer構造 alt属性・aria-label付きのアクセシブル設計 |
| CSS | 8pxグリッド・BEM命名・変数定義(:root)・シャドウ・カラー管理 |
| JS | IntersectionObserverでフェードイン、スムーススクロール、フォームバリデーション |
しかも、BootstrapもTailwindも使っていない。
純粋なプレーンコードだけでこれを出してくるのだから驚きです。
では、本当に「コーダーいらない」のか？
結論から言えば――「“単純なコーディング作業”は確かにAIで代替できる」です。
たとえば：
- LP構築
- ワイヤーからのHTML化
- ボタンやフォームの実装
- レスポンシブ対応
これらはAIに一瞬で任せられます。
コーダーが「仕様通りに組むだけ」の仕事は、今後急速に減っていくでしょう。
それでも人間が必要な理由
AIがコードを書くのは得意でも、目的や文脈を理解して構成を最適化する力はまだ弱い。
つまり、以下のような領域は依然として人間が必要です。
| 領域 | 理由 |
|---|---|
| UX設計 | ペルソナ・カスタマージャーニーの把握が必要 |
| デザイン意図の翻訳 | 「柔らかい印象」「信頼感ある余白」など抽象表現を数値化する力 |
| ブランドとの整合性 | 色・言葉・トーン＆マナーを含めた体験設計 |
| SEO・CVR改善 | データ分析・A/Bテスト・意図的な文言改善は人間の領域 |
| ディレクション | AIに“正しい指令”を出すスキルこそ、今後の必須能力 |
要するに、AIが「手を動かす人」を代わりにやってくれるだけで、「考える人」――つまりディレクター／デザイナーの頭脳部分は依然として人間の価値だと感じました。
手直しできる人材が必要だよねって話なので、今までより知識を持ったコーダーへの仕事は増えるように思います。
あと、思ったデザインになるようにプロンプト考えるのが地味にダルい。
自分で打った方が早くね？って思える部分もある。
なので、大枠を決めてからそれ以外のコーディング（誰でもできるテンプレ的なとこ）をAIに丸投げするのが正解かなっと。
コーダーの未来：AIを“使いこなす職種”へ
今後のWebコーダーは、「AIに命令する力」を磨く時代に入ります。
これまでの“HTMLを書ける人”から、“AIを正確に動かせる人”へ。
たとえば次のようなスキルが求められます。
- プロンプト設計（AIへの正確な指令文を書く力）
- コードリーディング（生成結果を理解・修正する力）
- アクセシビリティ・パフォーマンス最適化
- デザイン意図の翻訳（FigmaやUX設計との連携）
- SEOに関する知識、洞察力、改善力
つまり、「AIに指示を出す側」に回るほど市場価値が上がる。
AIと共に働くクリエイティブディレクター型コーダーこそ、次世代の主役です。
まとめ：「AIに奪われる人」から「AIを操る人」へ
AIがLPを数分で構築する――
そんな現実を見た瞬間、正直ゾッとしました。
でも同時に、「これを使いこなせる人は最強になる」と確信しました。
ついでに言うと、まだまだ勝ってるなとも確信しました( ´艸｀)
もう“AI vs 人間”ではなく、“AI × 人間”の時代です。
AIはライバルではなく、自分の協働相手と考えましょう。気楽です。
最後に
もしあなたがWebコーディングを学んでいるなら、「AIに仕事を奪われる」のではなく、「AIを使って誰より速く作る」方向へ舵を切りましょう。
AIに正しく指示できる人間こそ、これからのWeb制作をリードします。
むしろ最近のAI動向を見ていると、コーディングよりデザインの仕事の方に危うさを感じています。
生成AI画像のレベルが短期間でメリメリ上がってきているのが、地味の怖い。
生成した画像にPhotoshopでちょこちょこっと修正かけたら自分のレベルを大きく超えていかれました。
コーダーあがりの汎用デザイナーのレベルなんてそんなもんっす。ふぅ・・・がんばろー
