AI が Web デザインでできること
"絵が描ける" だけではない。情報整理・コード・UI 雛形・ライティングまで広く使える。
ビジュアル生成
イメージ画像・アイコン・背景素材を自動生成。
コピー生成
ヒーロー文・CTA 文言・メタディスクリプション等。
コード生成
HTML / CSS / JS の実装。デザイナー自身が手を動かさなくても OK。
UI 雛形
ワイヤーフレーム・UI パターンの初稿作成。
情報整理
ヒアリング内容の要約・構造化・FAQ 抽出。
デバッグ
表示崩れ・JS エラーの原因特定をアシスト。
AI が得意なこと
- 素材生成（画像・テキスト・コード）
- パターン化された作業の高速化
- 大量の選択肢からの絞り込み
人が担うべきこと
- ゴール設定（何を作るべきか）
- クライアント・ユーザーとの対話
- 採算・優先度の判断
- 成果物の最終的な品質判断
画像生成 AI
ヒーロー画像・バナー・アイコンまで。著作権・商用利用規約だけ要注意。
使いどころは「完成品を作る」ではなく「叩き台を作って意思決定を早める」こと。たとえばヒーロー画像のドラフト、アイコン/装飾素材、ペルソナのイメージ画像（社内資料用）など。
代表ツール
プロ用途なら Midjourney / Adobe Firefly。手軽さなら Canva AI / Image Creator。
デザイン生成 AI
UI コンポーネント・画面全体を、プロンプトから出力してくれるツール群。
注意点：AI が出力したものをそのまま納品はできない。「叩き台」として使い、人がブランド・UX観点で仕上げるのが現実的。
代表ツール
Google Stitch（Figma 連携）、Framer AI（そのまま公開）、Uizard（ワイヤーフレーム特化）。
コード生成 AI
"コードは書かなくていい" を実現する主役。Cursor・Claude Code・GitHub Copilot が中心。
このサイト自体も、AI を役割分担して作っています。Claude Code（設計・計画）→ Cursor（実装）→ Antigravity（デプロイ）のように、分業すると止まりにくい。
代表ツール
プロンプトの書き方
"良いプロンプト = 良いクライアントブリーフ"。ヒアリングを構造化する感覚に近い。
基本構造は「5点セット」。これを押さえるだけで、出力のブレが激減します。
- 何を作るか（具体的な対象）
- なぜ作るか（目的・用途）
- どう使うか（ターゲット・配置）
- スタイル指定（モダン/レトロ等）
- 出力形式（画像サイズ・コード言語等）
悪い例：「いい感じのバナー作って」／良い例：「30代女性向け化粧品ECサイトのトップ用バナー（横長1200×400px）。白＋ベージュ基調で上品に。コピー『あなたの肌に、やさしい一歩』を中央に配置」
以下の条件でヒーローセクションの HTML / CSS を作ってください。
・ターゲット：30 代女性、ハンドメイド作家
・トンマナ：手書き感・ベージュ基調・やわらかい
・含める要素：キャッチコピー / サブ / CTA ボタン
・レスポンシブ対応（768px ブレイクポイント）
研修コンテンツへの誘導
実際に手を動かすパートは、H.K社内研修サイトで用意しています。
研修サイトの Day08〜Day12 では、Cursor / Claude Code / Stitch を実際に動かす回を用意しています。本ページの理論を、研修で実装に落とし込んでみてください。
AIは「万能な助手」ではなく「優秀だけど指示待ちのインターン」です。的確に指示を出せる人ほど、AIから良い成果を引き出せます。つまり、デザインの基礎知識があるほどAIを使いこなせるということです。