WebデザイナーのAI活用｜初級から上級まで15のプロンプト

Webデザイナーの仕事は、使いやすく美しいWebを作ること。 でも、ワイヤーフレーム、コピー、仕様書…デザイン以外の作業も多い。

この記事では、レベル別にプロンプトを紹介します。

🔰 初級編｜コピペするだけでOK

ダミーテキストを用意

「Lorem ipsum」より実用的なダミーを。

以下のWebサイト用のダミーテキストを作成してください。

サイトの種類：[コーポレート/EC/サービス紹介など]
必要な箇所：
・ヘッドライン（3パターン）
・サブヘッド（3パターン）
・本文（100文字×3）
・CTA（5パターン）
・ナビゲーション項目

トンマナ：[ビジネス/カジュアル/高級感など]
業種：[業種]

CTAのコピー

クリックされるボタンを。

以下のWebサイトのCTAボタンのコピーを10案出してください。

サイトの目的：[問い合わせ/購入/資料請求/無料トライアルなど]
ターゲット：[ターゲット]
ページの内容：[概要]

パターン：
・アクション系（〇〇する）
・ベネフィット系（〇〇を手に入れる）
・緊急性系（今すぐ〇〇）

各案に「効果的な理由」を一言。

色の提案

カラーパレットを。

以下の条件でWebサイトのカラーパレットを提案してください。

業種：[業種]
ターゲット：[ターゲット]
イメージ：[信頼感/親しみやすさ/高級感/先進的など]
既存ブランドカラー：[あれば]

出力：
・メインカラー（HEX値と使用場所）
・アクセントカラー（HEX値と使用場所）
・背景色（HEX値）
・テキストカラー（HEX値）
・カラー選定の理由
・アクセシビリティの確認ポイント

エラーメッセージ

ユーザーに寄り添うエラー文。

以下のエラーシーンのメッセージを作成してください。

エラー種類：[404/入力エラー/サーバーエラー/タイムアウトなど]
サイトのトンマナ：[トンマナ]

出力：
・エラータイトル
・説明文
・次のアクションの提案
・イラストや画像のイメージ

ユーザーを責めない、前向きな表現で。

📈 中級編｜カスタマイズして使う

ワイヤーフレームの構成

設計の指針を。

以下のページのワイヤーフレーム構成を作成してください。

ページ種類：[LP/トップページ/詳細ページ/フォームなど]
目的：[コンバージョン/情報提供/ブランディングなど]
ターゲット：[ターゲット]
主な要素：[必要な要素をリストアップ]

出力：
・セクション構成（上から順に）
・各セクションの目的
・配置する要素
・ユーザーの視線の流れ
・CTAの配置ポイント

デザインコンセプトの言語化

クライアントに伝える。

以下のデザインのコンセプトを言語化してください。

デザインの方向性：[モダン/ナチュラル/ミニマルなど]
クライアントの業種：[業種]
ターゲット：[ターゲット]
参考にしたサイト：[あれば]

出力：
・コンセプト文（100文字）
・デザインキーワード（5つ）
・配色の意図
・タイポグラフィの意図
・写真/イラストの方向性
・与えたい印象

クライアントに提案できる形式で。

マイクロコピー

細部の言葉を。

以下のUIのマイクロコピーを作成してください。

画面：[ログイン/登録/設定/決済など]
UIの要素：
・ボタンラベル
・入力欄のプレースホルダー
・ヘルプテキスト
・成功/エラーメッセージ
・確認ダイアログ

トンマナ：[トンマナ]

ユーザーを迷わせない、親切な表現で。

デザインレビューの依頼

フィードバックをもらう。

デザインレビューを依頼するメッセージを作成してください。

レビュー対象：[ページ/画面の説明]
確認してほしい点：[レイアウト/配色/文字サイズなど]
期限：[日時]
共有方法：[Figma/XD/画像など]

出力：
・依頼文
・具体的なフィードバック項目
・回答フォーマットの提案

アクセシビリティチェック

誰でも使えるデザインを。

以下のデザインのアクセシビリティをチェックしてください。

対象：[サイト/アプリの概要]
現状のデザイン：[概要]

チェック項目：
・色のコントラスト
・フォントサイズ
・クリック/タップ領域
・代替テキスト
・キーボード操作
・スクリーンリーダー対応

各項目の確認ポイントと改善案を。

🎯 上級編｜ガチで使いこなす

デザインシステムの設計

一貫性のあるデザインを。

以下の条件でデザインシステムの構成を設計してください。

プロダクト：[プロダクト名]
規模：[ページ数/画面数]
チーム構成：[デザイナー/エンジニアの人数]

出力：
■ カラートークン
■ タイポグラフィスケール
■ スペーシングルール
■ コンポーネント一覧
■ 命名規則
■ ドキュメント構成

仕様書の作成

開発者に伝わる仕様を。

以下のデザインの仕様書を作成してください。

画面：[画面名]
要素：[要素リスト]

各要素について：
・サイズ/余白
・フォント（種類/サイズ/色）
・インタラクション
・レスポンシブでの変化
・アニメーション（あれば）

エンジニアが実装できるレベルで。

プレゼン資料

デザインを説明する。

クライアントへのデザイン提案プレゼン資料の構成を作成してください。

提案内容：[デザインの概要]
クライアント：[業種/担当者]
懸念点：[コスト/スケジュール/ブランドとの整合性など]

出力：
・スライド構成
・各スライドのポイント
・想定される質問と回答
・承認を得るためのキーメッセージ

ユーザビリティテストの設計

改善点を見つける。

以下のサイト/アプリのユーザビリティテストを設計してください。

対象：[サイト/アプリの概要]
テストの目的：[何を検証したいか]
参加者：[人数/属性]
時間：[1セッションの時間]

出力：
■ テストシナリオ
■ タスク設計
■ 観察ポイント
■ 質問リスト
■ 成功基準
■ 分析方法

🏆 番外編｜これができたらプロ

デザイン批評

自分のデザインを客観視。

以下のデザインを批評してください。

デザインの説明：[概要、URL、または画像の説明]
目的：[何を達成したいか]
ターゲット：[ターゲット]

観点：
・ビジュアルヒエラルキー
・一貫性
・ユーザビリティ
・アクセシビリティ
・ブランド表現

良い点と改善点を具体的に。忖度なしで。

まとめ

Webデザイナーの本業は、使いやすく美しいWebを作ること。 でも、コピーや仕様書に時間を取られて、デザインに集中できないのは本末転倒。

このプロンプト集で、作業を効率化して、 もっと「良いデザイン」を考える時間を作ってください。