Webサイトのデザインを、AIやデザイナーに「おしゃれにしてください」「いい感じにしてください」だけで依頼すると、完成イメージが大きくズレます。
なぜなら、Webデザインには「どんな情報を・どの順番で・どんなレイアウトで・どんな雰囲気で・どんな色で・どんな文字で・どんな部品で・スマホではどう」という複数の観点があるからです。
この記事では、AIでおしゃれな画面を作るために知っておきたいデザインシステムと、AI・デザイナーへの指示の考え方を、デザイン初心者にもわかるように整理します。そのまま使える「指定例（プロンプト）」も各章に載せています。
本記事は社内キャッチアップ会（AIデザインツール「Claude Design」の検証）で作成した資料をベースにしています。スクラッチ開発ではデザインシステムが無いぶん、AIへの指示で「何を定義すべきか」を知っておくことが品質に直結します。
1. Webデザイン依頼で考えるべき全体像
Webサイトのデザイン依頼では、主に以下の分類を整理して伝えるとよいです。
- 目的・ターゲット
- 情報設計
- ページ構成
- レイアウト
- ビジュアルスタイル
- トーン&マナー
- カラー設計
- タイポグラフィー
- コンポーネント設計
- UI状態
- 余白・角丸・影
- レスポンシブ設計
- アクセシビリティ
- デザインシステム化
それぞれを順番に説明します。
2. 目的・ターゲット
2-1. 目的とは
Webサイトを作る理由です。同じ「サービス紹介サイト」でも、目的によってデザインは大きく変わります。
| 目的 | デザインの方向性 |
|---|---|
| サービス登録を増やしたい | CTAを目立たせる |
| 商品を購入してほしい | 商品写真やレビューを重視する |
| 企業の信頼感を伝えたい | 落ち着いた配色、整ったレイアウトにする |
| 採用応募を増やしたい | 社員の雰囲気や働き方を伝える |
| ブランドの世界観を伝えたい | 写真、余白、言葉のトーンを重視する |
2-2. ターゲットとは
誰に向けたWebサイトなのか、ということです。
- 20代後半の女性
- 中小企業の経営者
- ITに詳しくない個人事業主
- 採用応募を検討している学生
- 子育て中の30代夫婦
- SaaS導入を検討している法人担当者
2-3. なぜターゲット指定が重要か
ターゲットによって、好まれるデザインが変わるためです。同じ「健康管理アプリ」でも、
- 高齢者向けなら、文字を大きく、操作をわかりやすくする
- 若い女性向けなら、柔らかい色や親しみやすさを重視する
- 企業向けなら、信頼感やデータの見やすさを重視する
というように変わります。
2-4. AI・デザイナーへの指定例
このWebサイトの目的は、サービスの内容をわかりやすく伝え、無料登録につなげることです。
ターゲットは、20代後半〜30代前半の女性で、仕事や日常に少し疲れていて、
新しい趣味や気分転換を探している人です。
そのため、押し売り感のあるデザインではなく、やさしく寄り添うような印象にしてください。
3. 情報設計（Information Architecture / IA）
3-1. 情報設計とは
「何を、どの順番で、どのように見せるか」を決めることです。Webサイトは、単に情報を並べればよいわけではなく、ユーザーが自然に理解できる順番で見せる必要があります。
3-2. 情報設計で考えること
- 最初に何を伝えるか
- ユーザーの不安をどこで解消するか
- サービスの魅力をどの順番で伝えるか
- 登録・購入・問い合わせなどの行動をどこで促すか
- 詳細情報はどこまで載せるか / FAQをどこに置くか
3-3. 良い情報設計の例
サービス紹介サイトなら、以下のような流れがよく使われます。
- ファーストビュー … サービスの一番大きな価値を伝える
- 課題提起 … ユーザーが抱えている悩みに共感する
- 解決策 … このサービスで何ができるかを伝える
- 特徴 … 他サービスとの違いや強みを説明する
- 利用ステップ … 使い方を簡単に説明する
- 実績・口コミ … 信頼感を高める
- 料金 … 判断材料を提示する
- FAQ … 不安を解消する
- CTA … 登録・問い合わせなどの行動を促す
3-4. 悪い情報設計の例
- 最初から細かい機能説明が多すぎる
- 何のサービスかわかる前に料金が出てくる
- CTAがどこにあるかわからない
- 似た情報が何度も出てくる
- ユーザーの悩みに触れず、提供側が言いたいことだけを並べている
3-5. AI・デザイナーへの指定例
情報設計は、以下の流れにしてください。
1. ファーストビューで、サービスの価値を一言で伝える
2. ユーザーが抱えている悩みに共感する
3. サービスがその悩みをどう解決するか説明する
4. 主な特徴を3つ紹介する
5. 利用ステップを3ステップで説明する
6. 利用者の声を掲載する
7. FAQで不安を解消する
8. 最後に無料登録へのCTAを配置する
4. ページ構成
4-1. ページ構成とは
Webページをどのセクションで構成するかということです。情報設計が「情報の流れ」だとすると、ページ構成は「その流れを実際の画面ブロックに分けること」です。
4-2. よく使われるセクション
| セクション名 | 役割 |
|---|---|
| Header | ロゴやメニューを表示する |
| Hero Section | ページ最上部で一番重要な訴求をする |
| Problem Section | ユーザーの悩みを提示する |
| Solution Section | 解決策を提示する |
| Feature Section | サービスの特徴を紹介する |
| Step Section | 使い方や流れを説明する |
| Testimonial Section | 口コミや利用者の声を表示する |
| Pricing Section | 料金プランを表示する |
| FAQ Section | よくある質問を表示する |
| CTA Section | 登録・問い合わせなどを促す |
| Footer | 会社情報やリンクを表示する |
4-3. Hero Sectionとは
Webサイトを開いて最初に目に入る大きなエリアです。ここで「何のサイトか」「何ができるか」が伝わらないと、ユーザーは離脱しやすくなります。
含めることが多い要素：キャッチコピー / サブコピー / メインビジュアル / CTAボタン / 補足テキスト / 実績や信頼情報
キャッチコピー：毎日に、ちょっと楽しい趣味を見つけよう。
サブコピー：気分や性格、今いる場所に合わせて、あなたにぴったりの趣味やおでかけを提案します。
CTA：無料ではじめる
4-4. CTAとは
CTAは Call To Action の略。ユーザーに取ってほしい行動を促すボタンやリンクのことです。
例：無料ではじめる / 資料請求する / お問い合わせする / アプリをダウンロード / 相談予約する / 詳細を見る
4-5. AI・デザイナーへの指定例
ページ構成は以下にしてください。
- Header / Hero / Problem / Solution / Feature / Step / Testimonial / FAQ / CTA / Footer
Hero Sectionでは、キャッチコピー、サブコピー、CTAボタン、
サービスの雰囲気が伝わるビジュアルを配置してください。
5. レイアウト
5-1. レイアウトとは
画面内の要素をどのように配置するかということです。同じ情報でも、レイアウトによって見やすさや印象が大きく変わります。
5-2. レイアウトでよく使う用語
| 用語 | 意味 |
|---|---|
| カラム | 縦方向の列 |
| 1カラム | 横幅いっぱいに縦積みで表示する形式 |
| 2カラム | 左右2列で表示する形式 |
| 3カラム | 3列でカードなどを並べる形式 |
| グリッド | 要素を規則的に並べるための基準 |
| 12カラムグリッド | Webでよく使われる12列の設計 |
| コンテナ幅 | コンテンツの最大横幅 |
| セクション | ページ内の大きな区切り |
| ファーストビュー | ページを開いて最初に見える範囲 |
5-3. 代表的なレイアウト
- 1カラム … 縦に情報を並べるシンプルな形式。スマホと相性がよく、LP・ブログ・サービス紹介・採用ページ向き。
- 2カラム … 左右に要素を分ける形式（左テキスト＋右画像など）。情報とビジュアルをセットで見せやすく、比較や説明に向く。
- カードレイアウト … 情報を箱に入れて並べる形式。機能紹介・料金・口コミ・一覧表示に向く。
- Bento UI … 大小さまざまなカードをグリッド状に並べるレイアウト。お弁当箱のように複数情報を整理。モダンでSaaS・AIサービスでよく使われ、情報に強弱をつけやすい。
5-4. AI・デザイナーへの指定例
スマホで読みやすいように、基本は1カラム構成にしてください。
PCでは一部のセクションのみ2カラムにして、メリハリをつけてください。
特徴紹介はカードレイアウト（アイコン・タイトル・説明文／PC3カラム・スマホ1カラム）にし、
機能紹介はBento UIで重要な機能を大きなカード、補足機能を小さなカードで整理してください。
6. ビジュアルスタイル
6-1. ビジュアルスタイルとは
UIの見た目の流派や表現方法のことです。トーン&マナーが「どんな印象にしたいか」を表すのに対して、ビジュアルスタイルは「どのような見た目の作り方をするか」を表します。
同じ「親しみやすいサイト」でも、フラット（平面的）／マテリアル（影や階層）／グラスモーフィズム（半透明）／Bento UI（大小カード）／エディトリアル（雑誌的）で方向性が変わります。
6-2. ビジュアルスタイル一覧
| スタイル名 | 概要 | 主な特徴 | 向いている用途 | 注意点 |
|---|---|---|---|---|
| フラットデザイン | 影や立体感を抑えた平面的でシンプルなデザイン | 装飾が少ない、ベタ塗り、情報が整理されて見える | LP、SaaS、アプリ紹介、管理画面 | シンプルすぎると印象に残りにくい。CTAは色や余白で明確に |
| マテリアルデザイン | Google提唱。紙の重なりや影で階層を表現 | カードUI、影、レイヤー感、状態変化がわかりやすい | Androidアプリ、Webアプリ、管理画面 | 多用すると重い印象。独自性が弱くなる場合も |
| スキューモーフィズム | 現実の物体に似せた質感を再現 | 革・紙・金属などのリアルな質感、強い陰影 | レトロ系、ゲームUI、体験型コンテンツ | 古臭く見えやすい。使いすぎ注意 |
| ニューモーフィズム | 背景と同系色＋柔らかい影で浮き出して見せる | 淡い背景、同系色、柔らかい影、ぷっくり感 | ウェルネス、日記アプリ、実験的UI | コントラストが低くA11yに弱い。押せるか分かりにくい |
| グラスモーフィズム | すりガラスのような半透明パネル | 半透明、背景ぼかし、薄い境界線、透明感 | AIサービス、クリエイティブLP、ダッシュボード | 背景次第で文字が読みにくい。可読性確保が必要 |
| ミニマルデザイン | 装飾を最小限にし余白・文字・写真で魅せる | 余白が広い、色数が少ない、洗練、上品 | ブランドサイト、美容、コンサル、ポートフォリオ | 情報量が多いと整理が難しい |
| ブルータリズム | あえて無骨で荒削りな個性的表現 | 太い線、大胆な文字、強いコントラスト、実験的 | アート、音楽、ファッション、クリエイター | 一般向けには使いづらい。クセが強い |
| ネオブルータリズム | ブルータリズムを現代的・ポップに | 太い黒枠、はっきりした色、ベタ影、遊び心 | 若者向け、個人開発、教育、スタートアップLP | ポップすぎると安っぽい。高級感には不向き |
| クレイモーフィズム | 粘土のようなぷっくり柔らかい立体感 | 大きな角丸、柔らかい影、パステルカラー | 女性向け、子ども向け、趣味アプリ、ウェルネス | 使いすぎると幼く見える |
| エディトリアルデザイン | 雑誌のように写真・文字・余白を美しく見せる | 大きな見出し、大きな写真、余白、読み物感 | メディア、旅行、美容、ファッション、ブランド | 情報量が多いと読みにくい。CTAが弱くならないよう注意 |
| コーポレートデザイン | 企業サイトらしい信頼感・清潔感重視 | 白背景、整ったグリッド、ネイビー/ブルー、控えめ | BtoB、企業HP、士業、コンサル、採用 | 無難になりやすい。写真・コピー・アクセント色で差別化 |
| ラグジュアリーデザイン | 高級感・上質感を重視 | 広い余白、少ない色数、黒/白/ゴールド/ベージュ、細い線 | 美容、ホテル、ジュエリー、高価格帯サービス | 文字が小さく情報が少なすぎになりやすい |
| ポップデザイン | 明るく楽しく親しみやすい | 彩度の高い色、丸み、イラスト、大きなボタン | イベント、教育、エンタメ、若者・ファミリー向け | 派手すぎると安っぽい。優先順位を明確に |
| Kawaii UI | 日本的な「かわいい」を意識 | パステル、丸み、小さなアイコン、手書き風 | 女性向け、趣味、日記、メンタルケア | 子どもっぽくなりやすい。大人向けは彩度を抑える |
| レトロデザイン | 懐かしさ・昔っぽさを取り入れる | くすみカラー、クリーム色、粗いテクスチャ | カフェ、雑貨、音楽、イベント、趣味系 | 操作性は現代的にする必要がある |
| Y2Kデザイン | 2000年代風のデジタル感・光沢感 | メタリック、グリッター、強いグラデ、ピンク/シルバー | ファッション、音楽、SNS、若者向け | トレンド感が強く飽きられやすい |
| サイバーパンク | 近未来・夜・ネオン・テック感 | 黒背景、ネオンカラー、グリッチ、紫/青/ピンク | ゲーム、AI、Web3、テック系、イベント | 可読性が落ちやすい。安心感が必要なサービスは不向き |
| ダークUI | 暗い背景をベースにしたデザイン | 黒/濃紺/チャコール、白文字、アクセントが映える | AI、開発者向け、音楽、映像、ダッシュボード | コントラスト調整が難しい。長文は読み疲れに注意 |
| 和モダン | 和の要素を現代的に整理 | 生成り、墨色、藍色、余白、細い線、和紙の質感 | 旅館、和食、伝統工芸、地域、日本文化イベント | 和風に寄せすぎると古く見える |
| オーガニックデザイン | 自然・手触り・やわらかさ | アースカラー、曲線、不規則な形、自然写真 | ウェルネス、食品、自然体験、女性向け | 素朴すぎると洗練感が弱くなる |
| アイソメトリック | 斜め上から見た立体イラストを使う | 3D風イラスト、仕組みを説明しやすい、SaaS感 | SaaS、BtoB、FinTech、業務改善ツール | イラスト品質に左右される |
| 3D UI | 立体的なオブジェクトやアイコン | 立体感、奥行き、リッチ、先進的 | AI、SaaS、アプリLP、新規性のあるサービス | 読み込み負荷・実装コストが上がる |
| イラストレーション重視 | イラストを主役に親しみやすさを出す | 柔らかい、感情表現しやすい、ブランド感 | 教育、初心者向け、ヘルスケア、ファミリー | トーンが揃わないと統一感がなくなる |
| 写真重視 | 写真を大きく使い世界観や感情を伝える | 大きな写真、余白、短いコピー、感情訴求 | 旅行、美容、イベント、飲食、ファッション | 写真品質に左右される。文字の可読性確保 |
| ダッシュボードUI | データや管理画面に特化 | サイドバー、カード、テーブル、グラフ、フィルター | 管理画面、分析ツール、SaaS、CRM | 情報密度が高い。優先順位と視線誘導が重要 |
| Bento UI | 大小のカードをグリッド状に並べ情報を整理 | カードグリッド、大小の強弱、モダン、Apple/SaaS風 | AIサービス、SaaS、アプリLP、機能紹介 | カードが多すぎると単調。重要度でサイズ差を |
6-3. スタイルは組み合わせて指定する
ビジュアルスタイルは1つだけを選ぶ必要はありません。実際には複数を組み合わせて指定することが多いです。
| 組み合わせ | 印象 | 向いている用途 |
|---|---|---|
| ミニマル × Bento UI | 洗練されていて整理された印象 | AIサービス、SaaS、アプリLP |
| フラット × コーポレート | 清潔感と信頼感がある印象 | BtoB、企業HP、士業 |
| グラスモーフィズム × ダークUI | 近未来的で先進的な印象 | AI、Web3、クリエイティブツール |
| エディトリアル × 写真重視 | 雑誌のように世界観を伝える印象 | 旅行、美容、ライフスタイル |
| クレイモーフィズム × Kawaii UI | 柔らかく親しみやすい印象 | 女性向け、趣味、日記、ウェルネス |
| オーガニック × ミニマル | 自然で落ち着いた印象 | ウェルネス、食品、ライフスタイル |
| ネオブルータリズム × ポップ | 遊び心があり印象に残る | 若者向け、教育、個人開発サービス |
| ラグジュアリー × ミニマル | 上質で高級感のある印象 | 美容、ホテル、ブランドサイト |
6-4. AI・デザイナーへの指定例
ビジュアルスタイルは、ミニマル × Bento UI × カード型UIをベースにしてください。
余白を広めに取り、情報を大小のカードで整理してください。
装飾は控えめにし、色・タイポグラフィ・余白で上品に見せてください。
全体として、モダンで整理された印象にしつつ、親しみやすさも残してください。
7. トーン&マナー
7-1. トーン&マナーとは
サイト全体の雰囲気や印象のルールです（略して「トンマナ」）。同じピンク系のサイトでも、「かわいい／上品／ポップ／大人っぽい／やさしい／高級感」で印象がまったく変わります。
7-2. よく使うトーンの言葉
| トーン | 印象 |
|---|---|
| モダン | 今っぽく洗練された印象 |
| ナチュラル | 自然でやわらかい印象 |
| フェミニン | 女性的で柔らかい印象 |
| クリーン | 清潔感がある印象 |
| プレミアム | 上質で高級感がある印象 |
| フレンドリー | 親しみやすい印象 |
| ポップ | 明るく楽しい印象 |
| シック | 落ち着いて大人っぽい印象 |
| カジュアル | 気軽で親しみやすい印象 |
| コーポレート | 信頼感、堅実さがある印象 |
| エモーショナル | 感情に訴える印象 |
| スタイリッシュ | かっこよく洗練された印象 |
7-3. トーンは組み合わせ、避けたい印象も伝える
トーンは複数組み合わせると具体的になります（例：ナチュラル × 上品 × 親しみやすい、モダン × クリーン × 信頼感）。
希望する印象だけでなく、避けたい印象も伝えるとズレが減ります。
7-4. AI・デザイナーへの指定例
トーン&マナーは、ナチュラルで上品、かつ親しみやすい印象にしてください。
女性向けではありますが、甘すぎる・子どもっぽいデザインは避けてください。
余白を広めに取り、落ち着いた配色で、安心感のあるサイトにしてください。
8. カラー設計
8-1. カラー設計とは
サイト内で使う色の役割を決めることです。色は「なんとなく好きな色」ではなく、役割ごとに決めるとデザインが安定します。
8-2. 主な色の役割
| 色の種類 | 役割 |
|---|---|
| Primary Color | サイト全体のメインカラー |
| Secondary Color | メインカラーを補助する色 |
| Accent Color | CTAや重要な箇所に使う強調色 |
| Background Color | 背景色 |
| Surface Color | カードやパネルの背景色 |
| Text Color | 本文の文字色 |
| Muted Text Color | 補足説明などの薄い文字色 |
| Border Color | 境界線の色 |
| Error / Success / Warning Color | エラー / 成功 / 注意の表示 |
8-3. カラー指定の具体例（女性向けライフスタイル系）
Primary Color：#E8856A サーモンピンク。温かみと親しみやすさ。
Secondary Color：#FAF5EE アイボリー。柔らかく落ち着いた背景色。
Accent Color：#A8C5A0 くすみグリーン。自然感や安心感のアクセント。
Text Color：#2E2420 濃いブラウン。黒よりも柔らかい印象。
Muted Text Color：#7A6A62 補足説明用の柔らかいブラウン。
Border Color：rgba(232, 133, 106, 0.2) 薄いサーモン系の境界線。
8-4. AI・デザイナーへの指定例
カラーパレットは、温かみのあるサーモンピンク、アイボリー、くすみグリーンを中心にしてください。
黒や真っ白のコントラストが強すぎる配色は避け、本文は濃いブラウン系にしてください。
CTAボタンはPrimary Colorを使い、背景はアイボリー系で柔らかい印象にしてください。
9. タイポグラフィー
9-1. タイポグラフィーとは
文字の見た目や読みやすさの設計です。どれだけ綺麗なデザインでも、文字が読みにくいと使いにくいサイトになります。
考える項目：Font Family（フォント）/ Font Size / Font Weight（太さ）/ Line Height（行間）/ Letter Spacing（字間）/ Heading（見出し）/ Body（本文）/ Caption（補足）/ Display（大きな見出し）
9-2. 日本語サイトでの注意点
日本語は英語より文字量が多く詰まって見えやすいため、
- 本文サイズは小さすぎないようにする
- 行間を広めにする / 文字の太さを使い分ける
- 長文は横幅を広げすぎない / 見出しと本文の差を明確にする
9-3. 文字サイズ・フォントの例
H1：40px / Bold / line-height 1.3
H2：28px / Bold / line-height 1.4
H3：22px / Bold / line-height 1.5
Body：16px / Regular / line-height 1.8
Caption：13px / Regular / line-height 1.6
Button：15px / Bold
日本語でよく使うフォント：Noto Sans JP / Hiragino Sans / Yu Gothic / Zen Kaku Gothic New / M PLUS Rounded 1c / Noto Serif JP
| フォント系統 | 印象 |
|---|---|
| ゴシック体 | 読みやすい、現代的、汎用的 |
| 明朝体 | 上品、知的、和風、高級感 |
| 丸ゴシック | やさしい、かわいい、親しみやすい |
| 太めゴシック | 力強い、ポップ、目立つ |
9-4. AI・デザイナーへの指定例
タイポグラフィーは日本語の読みやすさを重視してください。
見出しはやや太めで印象的にし、本文は16px以上、行間は1.7〜1.8程度にしてください。
フォントはNoto Sans JPまたはHiragino Sansを前提にし、柔らかく親しみやすい印象にしてください。
10. コンポーネント設計
10-1. コンポーネントとは
Webサイトを構成する部品のことです（ボタン、カード、入力フォーム、ヘッダー、フッター、タブ、アコーディオンなど）。Webサイトはこうした部品の組み合わせで作られています。
定義しておくとサイト全体に統一感が出ます。ボタンのデザインがページごとにバラバラだと、ユーザーはどれが重要なボタンか迷ってしまいます。
10-2. よく使うコンポーネント
| コンポーネント | 役割 |
|---|---|
| Button | ユーザーの行動を促す |
| Card | 情報をまとまりとして見せる |
| Badge | 小さなラベルや状態表示 |
| Form | ユーザー入力を受け取る |
| Header / Footer | ナビゲーション / 補足リンク・会社情報 |
| Modal | ポップアップ表示 |
| Accordion | FAQなどを開閉表示する |
| Tab | 情報を切り替えて表示する |
| Alert / Toast | 注意・成功・エラー / 一時的な通知 |
| Navigation | ページ移動の導線 |
| Pricing Card / Testimonial Card | 料金プラン / 利用者の声 |
10-3. Button・Card の設計例
Primary Button：最も重要な行動（無料ではじめる、購入する、問い合わせる）
Secondary Button：補助的な行動（詳しく見る、資料を見る）
Text Button：軽い導線（もっと見る、スキップする）
Feature Card：アイコン / タイトル / 説明文
Event Card：画像 / タイトル / 日時 / 場所 / タグ / 詳細ボタン
Testimonial Card：ユーザー名 / コメント / 星評価 / 属性
10-4. AI・デザイナーへの指定例
以下のコンポーネントを設計してください。
- Primary Button / Secondary Button / Feature Card / Testimonial Card
- FAQ Accordion / Header Navigation / Footer / Form Input / Badge
各コンポーネントについて、見た目、余白、角丸、色、状態を定義してください。
11. UI状態
11-1. UI状態とは
ボタンや入力欄などが、ユーザー操作や状況によって変化する見た目のことです。UI状態が定義されていないと、ユーザーは操作に迷います。
| 状態 | 意味 |
|---|---|
| Default | 通常状態 |
| Hover | マウスを乗せた状態 |
| Active | クリック中・押下中の状態 |
| Focus | キーボード操作などで選択されている状態 |
| Disabled | 押せない状態 |
| Loading | 読み込み中 |
| Error / Success | エラー / 成功している状態 |
| Empty State | データがない状態 |
11-2. ボタン・フォーム状態の例
[Button]
Default：通常表示 ／ Hover：色を濃く・影を強める ／ Active：押し込まれたように
Disabled：色を薄くしクリック不可を示す ／ Loading：スピナー表示で二重送信を防ぐ
[Form]
Focus：枠線をPrimary Colorにして入力中を示す
Error：枠線を赤系にしエラーメッセージを表示
Success：チェックアイコンなどを表示 ／ Disabled：薄い背景色で入力不可を示す
11-3. AI・デザイナーへの指定例
ボタン、フォーム、カードには、Default、Hover、Active、Focus、Disabled、Loading、Errorの状態を定義してください。
ユーザーが操作できる要素は、操作可能であることが明確にわかるようにしてください。
12. 余白・角丸・影
12-1. 余白
要素同士の間隔のことです。適切だと情報が見やすく、少ないとごちゃごちゃして見えます。
| 用語 | 意味 |
|---|---|
| Padding | 要素の内側の余白 |
| Margin | 要素の外側の余白 |
| Section Spacing | セクション同士の間隔 |
| Gap | グリッドやカード間の間隔 |
12-2. 角丸（border-radius）
| 角丸 | 印象 |
|---|---|
| 0px | 硬い、シャープ、無骨 |
| 4px | 控えめ、ビジネス向け |
| 8px | 標準的、汎用的 |
| 16px | 柔らかい、親しみやすい |
| 24px以上 | かわいい、アプリらしい、やさしい |
12-3. 影（box-shadow）
| 影の強さ | 印象 |
|---|---|
| 影なし | フラット、シンプル |
| 薄い影 | 上品、自然、軽い |
| 強い影 | 立体的、強調、やや派手 |
| ベタ影 | ネオブルータリズム風、ポップ |
12-4. AI・デザイナーへの指定例
全体的に余白を広めに取り、圧迫感のないレイアウトにしてください。
カードには24pxのpadding、16pxの角丸、薄いシャドウを設定してください。
セクション間の余白はPCで80px、スマホで48px、カード間のgapは24pxにしてください。
ボタンは丸みのある形（ピル型）にし、親しみやすい印象にしてください。
13. レスポンシブ設計
13-1. レスポンシブ設計とは
PC・タブレット・スマホなど、画面サイズに応じて見え方を変える設計です。スマホで見られることが非常に多いため、レスポンシブ対応は必須です。
考えること：PCでは横並び・スマホでは縦積み／スマホでは文字サイズを少し小さく／ボタンを指で押しやすい大きさに／メニューをハンバーガーに／画像がはみ出ない／横スクロールを出さない
13-2. 画面幅の考え方
Mobile：〜767px
Tablet：768px〜1023px
Desktop：1024px以上
Large Desktop：1280px以上
13-3. AI・デザイナーへの指定例
レスポンシブ対応を前提にしてください。
PCでは最大幅1200pxの中央寄せレイアウトにし、2カラムや3カラムで情報を整理してください。
スマホでは1カラムに落とし込み、ボタンは指で押しやすい高さにしてください。
カードは縦積みにし、横スクロールが発生しないようにしてください。
14. アクセシビリティ
14-1. アクセシビリティとは
誰にとっても使いやすいWebサイトにする考え方です（特にBtoCサイトは重要）。視力が弱い人、色の違いがわかりにくい人、キーボードだけで操作する人、高齢者、読み上げ機能を使う人なども対象に含まれます。
考えること：文字と背景のコントラストを十分にする／文字サイズを小さくしすぎない／ボタンを押しやすいサイズに／色だけで情報を伝えない／フォームエラーをわかりやすく／キーボード操作でも使える／画像に代替テキスト
14-2. 悪い例と改善例
[悪い例] エラーを赤い枠線だけで表現する
→ 色の違いがわかりにくい人に伝わらない／何がエラーかわからない
[改善例] 赤い枠線に加えて、具体的なエラーメッセージを表示する
例：メールアドレスの形式が正しくありません。
14-3. AI・デザイナーへの指定例
アクセシビリティを考慮してください。
文字と背景のコントラストを十分に確保し、本文は16px以上にしてください。
エラー表示は色だけに頼らず、具体的なメッセージも表示してください。
ボタンはスマホでも押しやすいサイズにしてください。
15. デザインシステム
15-1. デザインシステムとは
Webサイトやアプリ全体で使うデザインルールをまとめたものです（色・フォント・余白・角丸・影・ボタン・カード・フォーム・状態・レイアウトルールなど）。
メリット：
- デザインがブレにくい
- 実装しやすい / 修正しやすい
- チームで共有しやすい
- AIに追加画面を作らせるときも再現性が高い
15-2. Design Tokenとは
色・余白・フォントサイズなどのデザイン値を変数として定義したものです。
--color-primary: #E8856A;
--color-background: #FAF5EE;
--color-text: #2E2420;
--radius-card: 16px;
--space-md: 16px;
--font-body: 16px;
15-3. AI・デザイナーへの指定例
色、余白、角丸、影、フォントサイズはDesign Tokenとして定義してください。
ボタン、カード、フォームなどの主要コンポーネントは、再利用できるデザインルールとして整理してください。
16. そのまま使える「AIデザイン依頼テンプレート」
Webサイトのデザインを提案してください。
## 対象サービス
サービス名：
サービス概要：
## ターゲット
年齢層 / 性別 / 利用シーン / 抱えている悩み：
## サイトの目的
例：サービス内容を理解してもらう／無料登録してもらう／問い合わせを増やす／ブランドの世界観を伝える
## 希望する印象
例：ナチュラル／上品／親しみやすい／モダン／信頼感がある
## 避けたい印象
例：子どもっぽい／派手すぎる／安っぽい／情報がごちゃごちゃしている
## 希望するビジュアルスタイル
例：ミニマル／Bento UI／フラットデザイン／エディトリアル／カード型UI
## 提案してほしい内容（以下の観点で整理）
1. 情報設計 2. ページ構成 3. レイアウト 4. ビジュアルスタイル
5. トーン&マナー 6. カラーパレット 7. タイポグラフィー 8. コンポーネント
9. UI状態 10. 余白・角丸・影 11. レスポンシブ方針 12. アクセシビリティ 13. Design Token
17. 目的別のおすすめ指定例
SaaS・業務システム系
BtoB SaaS向けのWebサイトとして、信頼感、効率性、わかりやすさを重視してください。
ビジュアルスタイルは、コーポレート × フラットデザイン × Bento UIをベースに。
白背景、ネイビー、ブルー系のアクセントで情報が整理された印象に。
機能紹介はカード型UIで整理し、導入メリットは数字やアイコンでわかりやすく。
美容・高級サービス系
美容系サービス向けに、上品で高級感のあるWebサイトにしてください。
ビジュアルスタイルは、ミニマル × ラグジュアリー × 写真重視で構成。
余白を広く取り、色数は抑え、細い罫線と上品なタイポグラフィで高級感を。
写真を大きく使い、テキストは短く印象的に。
採用サイト系
採用サイトとして、会社の雰囲気、働く人の魅力、安心感が伝わるデザインに。
ビジュアルスタイルは、コーポレート × エディトリアル × 写真重視をベースに。
社員写真やインタビューを大きく見せ、仕事内容・カルチャー・福利厚生・募集職種への導線を整理。
イベント・キャンペーン系
イベントLPとして、明るく楽しい印象を重視してください。
ビジュアルスタイルは、ポップ × カード型UI × イラスト重視に。
開催日時・場所・参加メリット・申し込みCTAがすぐにわかる構成に。
色は明るく、見出しは大きく、スマホでも情報がすぐ伝わるように。
18. 依頼時に避けた方がよい曖昧な表現
❌ 曖昧な依頼
いい感じにしてください。 / おしゃれにしてください。 / 今っぽくしてください。
女性向けっぽくしてください。 / 見やすくしてください。
✅ 改善した依頼
20代後半女性向けに、ナチュラルで上品、親しみやすい印象にしてください。
可愛すぎる・子どもっぽい表現は避け、余白を広めに取り、
サーモンピンクとアイボリーを中心にした柔らかい配色にしてください。
UIはカード型を中心にし、角丸は大きめ、影は薄めにしてください。
19. まとめ
Webサイトのデザインを依頼するときは、単に「おしゃれにして」と伝えるのではなく、以下の分類で整理すると精度が上がります。AIに依頼するときも同じで、「何を定義すべきか」を知っていること自体がデザインシステムです。
- 目的・ターゲット … 誰に、何を伝え、何をしてほしいのか
- 情報設計 … 何を、どの順番で見せるのか
- ページ構成 … どのセクションでページを作るのか
- レイアウト … 要素をどのように配置するのか
- ビジュアルスタイル … フラット、マテリアル、ミニマル、Bento UIなど見た目の流派
- トーン&マナー … ナチュラル、上品、親しみやすいなど全体の印象
- カラー設計 … メイン・背景・文字・アクセント色
- タイポグラフィー … フォント、文字サイズ、太さ、行間
- コンポーネント設計 … ボタン、カード、フォーム、FAQなどのUI部品
- UI状態 … Hover、Disabled、Loading、Errorなどの状態
- 余白・角丸・影 … ゆとり、柔らかさ、立体感の調整
- レスポンシブ設計 … PC・スマホでの見え方
- アクセシビリティ … 誰にとっても使いやすい設計
- デザインシステム … 色や部品をルール化して再利用しやすくする
これらをテンプレートとして渡せば、AIでも「おしゃれな画面」を高い再現性で作れるようになります。
余談
以下のようなプロンプトで、GPT Image2.0で画面デザインを生成すると以下となります！
簡単なプロンプトでもクオリティの高い画面デザインが生成できる時代となり、AIすごいですね
音楽のLiveチケットを予約したり自分の購入したライブチケットや、開催までのカウントダウンなどが表示されるようなWebアプリを作成したい。
フラットデザインとプレミアムやシックなトーンにし、ダークテーマでライブ会場にあったテーマにしてほしい。
Webサイトのホーム画面の画像を生成してください。
