CSS辞書

デザイン方向性集

「どんな見た目にするか」を最初に決めるための13テイスト。 各テイストにはカラー・タイポグラフィ・レイアウト・UIコンポーネント・装飾・アニメーションのルールと、 動くサンプルUIを収録。プロダクト情報を入力すれば、AIにデザイン方針を設計させるプロンプトを生成できます。

AIプロンプトを生成する

プロダクト情報を入力し、テイストを選ぶ(最大3つ・未選択ならAIに選定を任せる)と、 「別のAIやデザイナーが読んでも同じ方向のデザインを作れる」レベルのデザイン方針を設計させるプロンプトができます。 入力内容はこのブラウザに保存されます。

ダークモード
テイスト(0/3)

テイスト一覧

132つを並べて比較

ミニマル

Minimal

要素を削ぎ落とし、余白とタイポグラフィで語るデザイン。情報の優先順位が明確で、ツールやポートフォリオ、ドキュメント系に向きます。

余白 / モノトーン / 静けさ / 精密 / 無駄がないシートを見る

モダン・クリーン

Modern / Clean

SaaSやWebアプリの標準形。白基調に1つのブランドカラー、8pxグリッド、控えめな影で整った信頼感を出します。迷ったらこれ。

整然 / 信頼 / 機能的 / 明快 / システマティックシートを見る

プレミアム・高級感

Premium / Luxury

ダークトーンとセリフ体、たっぷりの余白で「格」を演出。ホテル・ジュエリー・ハイエンドブランド・会員制サービスに。

品格 / 静寂 / 素材感 / 余裕 / 一点豪華シートを見る

カジュアル・ポップ

Casual / Pop

明るい多色、太い書体、大きな角丸で楽しさを前面に。コンシューマー向けアプリ、若年層向けサービス、イベントに。

元気 / 遊び心 / 親しみ / 丸み / 弾むシートを見る

ナチュラル・温かみ

Natural / Warm

アースカラーと生成りの背景、柔らかい角丸で安心感を作る。食・暮らし・ウェルネス・地域・子育て系サービスに。

素朴 / 安心 / 手ざわり / 穏やか / 生成りシートを見る

レトロ

Retro / Vintage

褪せた色、セリフやタイプライター書体、紙の質感で懐かしさを演出。カフェ・雑貨・出版・クラフト系ブランドに。

褪せた色 / 紙の質感 / 活版 / 物語 / 手仕事シートを見る

Y2K

Y2K / Cyber Nostalgia

2000年前後のデジタル文化を現代的に再解釈。メタリックなグラデーション、ピクセルフォント、ネオン色で若年層に刺さる強い個性を出します。

クローム / ホログラム / ピクセル / ネオン / サイバーシートを見る

テック・フューチャリスティック

Tech / Futuristic

ダーク背景にモノスペース、グリッド線、発光するアクセント。開発者ツール・AI・セキュリティ・フィンテックなど「先端」を伝えたいプロダクトに。

精密 / ターミナル / グリッド / 発光 / データシートを見る

グラスモーフィズム

Glassmorphism

半透明のパネルと背景ブラー、鮮やかなグラデーション背景で奥行きを作る。ヒーロー・ダッシュボード・モバイルアプリのオーバーレイに。

透明感 / 奥行き / 浮遊 / 光 / レイヤーシートを見る

ニューモーフィズム

Neumorphism / Soft UI

背景と同色の要素を、明暗2方向の影で押し出したり凹ませたりして立体感を作る。スマート家電・オーディオ・設定画面など「物理的な操作感」を出したいUIに。

柔らかさ / 触感 / 押し出し / 単色 / 静的シートを見る

ブルータリズム

Brutalism / Neo-Brutalism

太い黒の輪郭、原色のベタ塗り、ずらしたハードシャドウ、生のHTML感。個性と主張を最優先するポートフォリオ・クリエイティブ系・スタートアップに。

むき出し / 太線 / 原色 / 非対称 / 主張シートを見る

エディトリアル

Editorial / Magazine

雑誌や新聞の組版をWebに持ち込む。大きなセリフの見出し、多段組、写真とテキストの緊張感。メディア・ブログ・ブランドストーリーに。

組版 / 対比 / 段組 / 大見出し / 読み物シートを見る

和風・和モダン

Japanese Modern

余白・縦書き・和色・明朝体で「間」を作る。旅館・和食・工芸・伝統文化のサイトや、日本発ブランドの世界観に。

間 / 余韻 / 和色 / 縦書き / 素材シートを見る