AIでおしゃれな画面を作るためのデザインシステムを学ぼう！

元記事:Qiita

ブクマ日時:2026-07-07 23:13:45 UTC

はてブ数:53 users

タグ:あとで読む

📝 記事の概要

AI（Claude Design等のAIデザインツール）やデザイナーにおしゃれな画面を作ってもらうために、デザイン初心者でも理解できる「デザインシステム」の考え方を整理した包括的な解説記事。社内キャッチアップ会の資料をベースにしており、各章にそのまま使えるプロンプト例（指定例）が含まれている。

🔑 重要ポイント

Webデザイン依頼で考えるべき全体像（14分類）

分類	概要
目的・ターゲット	何のために、誰に向けて作るか
情報設計（IA）	何を、どの順番で、どう見せるか
ページ構成	画面ブロックの分割
レイアウト	要素の配置方法
ビジュアルスタイル	見た目の流派・表現方法
トーン&マナー	サイト全体の雰囲気
カラー設計	色の選定とルール
タイポグラフィー	フォントの選定と組み合わせ
コンポーネント設計	再利用可能なUI部品
UI状態	通常/ホバー/アクティブ/エラー等
余白・角丸・影	スペーシングとエフェクト
レスポンシブ設計	スマホ/タブレット/PC対応
アクセシビリティ	すべての人が使える設計
デザインシステム化	ルールの体系化と再利用

主要なセクションのポイント

1. 目的・ターゲット

同じ「サービス紹介サイト」でも、目的（登録増/購入/信頼感/採用/ブランド世界観）でデザイン方向性が大きく変わる。ターゲット層によっても好まれるデザインが異なる。

2. 情報設計（IA）

「何を、どの順番で、どのように見せるか」。良い例：ファーストビュー→課題提起→解決策→特徴→利用ステップ→実績→料金→FAQ→CTA。悪い例：最初から機能説明が多すぎる、サービスがわかる前に料金が出てくる。

3. ビジュアルスタイル（20種類以上を網羅）

記事では以下のスタイルを特徴・用途・注意点付きで解説：

フラットデザイン、マテリアルデザイン、スキューモーフィズム
ニューモーフィズム、グラスモーフィズム、ミニマルデザイン
ブルータリズム、ネオブルータリズム、クレイモーフィズム
エディトリアル、コーポレート、ラグジュアリー、ポップ
Kawaii UI、レトロ、Y2K、サイバーパンク、ダークUI
和モダン、オーガニック、アイソメトリック、3D UI
Bento UI、ダッシュボードUI 等

スタイルは組み合わせて指定可能（例：ミニマル × Bento UI、グラスモーフィズム × ダークUI 等）。

4. トーン&マナー

「どんな印象にしたいか」のルール。モダン/ナチュラル/フェミニン/クリーン/プレミアム/フレンドリー/ポップ/シック/カジュアル/コーポレート/エモーショナル/スタイリッシュ等。

プロンプト例（そのまま使える指定例）

ビジュアルスタイル指定例:
ビジュアルスタイルは、ミニマル × Bento UI × カード型UIをベースにしてください。
余白を広めに取り、情報を大小のカードで整理してください。
装飾は控えめにし、色・タイポグラフィ・余白で上品に見せてください。
全体として、モダンで整理された印象にしつつ、親しみやすさも残してください。

💡 記事の特徴

デザイン初心者にもわかるよう、すべての用語に丁寧な解説
各章に「そのまま使えるプロンプト（指定例）」が掲載
スクラッチ開発でデザインシステムがない場合の「何を定義すべきか」を体系化
AIデザインツール「Claude Design」の検証をベースにした実践的な内容

📊 記事の規模

292いいね、非常に充実した内容で、デザインシステムの網羅的なリファレンスとして活用できる。AIにデザインを依頼する際の「チェックリスト」としても有用。