AI が Web デザインでできること
"絵が描ける" だけではない。情報整理・コード・UI 雛形・ライティングまで広く使える。
📌 【AI 用途一覧 実装注釈】
要確認・仮テキスト。AI の発展が速いため、この一覧は半年ごとに見直しを推奨。
研修コンテンツで扱う範囲（vol.08〜）と重複させない形にコピー整理予定。
ビジュアル生成
イメージ画像・アイコン・背景素材を自動生成。
コピー生成
ヒーロー文・CTA 文言・メタディスクリプション等。
コード生成
HTML / CSS / JS の実装。デザイナー自身が手を動かさなくても OK。
UI 雛形
ワイヤーフレーム・UI パターンの初稿作成。
情報整理
ヒアリング内容の要約・構造化・FAQ 抽出。
デバッグ
表示崩れ・JS エラーの原因特定をアシスト。
画像生成 AI
ヒーロー画像・バナー・アイコンまで。著作権・商用利用規約だけ要注意。
📌 【画像生成 実装注釈】
要確認・仮テキスト。商用利用可否・学習データの透明性などツール選定の観点を最終版で表組みにする。
代表ツール
プロ用途なら Midjourney / Adobe Firefly。手軽さなら Canva AI / Image Creator。
Midjourney
Adobe Firefly
DALL·E
Canva AI
デザイン生成 AI
UI コンポーネント・画面全体を、プロンプトから出力してくれるツール群。
📌 【デザイン生成 実装注釈】
要確認・仮テキスト。研修 Day 11 で Stitch を実際に扱っているため、本ガイドは概要のみとし研修へ誘導する構成に。
代表ツール
Google Stitch（Figma 連携）、Framer AI（そのまま公開）、Uizard（ワイヤーフレーム特化）。
Google Stitch
Framer AI
Uizard
v0.dev
コード生成 AI
"コードは書かなくていい" を実現する主役。Cursor・Claude Code・GitHub Copilot が中心。
📌 【コード生成 実装注釈】
要確認・仮テキスト。研修 Day 08 / 09 / 10 で Cursor・Claude Code を実習しているため本ガイドは "入口説明" に徹する。
代表ツール
Cursor
Claude Code
GitHub Copilot
Bolt.new
プロンプトの書き方
"良いプロンプト = 良いクライアントブリーフ"。ヒアリングを構造化する感覚に近い。
📌 【プロンプト例 実装注釈】
要確認・仮テキスト。サンプルは研修で実際に使えるコピーに差し替え予定。NG 例／OK 例を並べる構成も候補。
PROMPT SAMPLE
あなたは Web デザイナーです。
以下の条件でヒーローセクションの HTML / CSS を作ってください。
・ターゲット：30 代女性、ハンドメイド作家
・トンマナ：手書き感・ベージュ基調・やわらかい
・含める要素：キャッチコピー / サブ / CTA ボタン
・レスポンシブ対応（768px ブレイクポイント）
以下の条件でヒーローセクションの HTML / CSS を作ってください。
・ターゲット：30 代女性、ハンドメイド作家
・トンマナ：手書き感・ベージュ基調・やわらかい
・含める要素：キャッチコピー / サブ / CTA ボタン
・レスポンシブ対応（768px ブレイクポイント）
研修コンテンツへの誘導
実際に手を動かすパートは、H.K社内研修サイトで用意しています。
📌 【CTA 実装注釈】
要確認・仮テキスト。リンク先は
../vol08-1.html / ../vol09-1.html / ../vol10-1.html / ../vol11-1.html に設定済み。
Phase 3 でサイド導線（研修サイト内から本ガイドへ戻る）も双方向にする。