明るい多色、太い書体、大きな角丸で楽しさを前面に。コンシューマー向けアプリ、若年層向けサービス、イベントに。
向いているプロダクト: 学習・習慣アプリ、若年層向けサービス、イベント・キャンペーンLP、ゲーム系
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
「触ると楽しい」。彩度の高い色と丸いフォルム、跳ねる動きで、使うこと自体を遊びにする。ただし色数はルール化して散らかさない。
触りたくなる、弾むUI。
#FFFBF0クリーム色のページ背景
#FFFFFFカード
#1E1B3A濃紺。真っ黒は使わない
#FF5C8Aプライマリボタン・強調
#FFC93Cバッジ・ハイライト
#3ED6C0成功・セカンダリ
#6C63FFリンク・情報
#1E1B3A2pxの太い輪郭線
上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。
/* カジュアル・ポップ（Casual / Pop）のデザイントークン — CSS辞書 /design/pop/ */
:root {
/* カラー */
--color-bg: #FFFBF0; /* 背景: クリーム色のページ背景 */
--color-surface: #FFFFFF; /* サーフェス: カード */
--color-text: #1E1B3A; /* 本文: 濃紺。真っ黒は使わない */
--color-primary: #FF5C8A; /* メイン: プライマリボタン・強調 */
--color-secondary: #FFC93C; /* サブ1: バッジ・ハイライト */
--color-tertiary: #3ED6C0; /* サブ2: 成功・セカンダリ */
--color-quaternary: #6C63FF; /* サブ3: リンク・情報 */
--color-border: #1E1B3A; /* ボーダー: 2pxの太い輪郭線 */
/* フォント */
--font-heading: "M PLUS Rounded 1c", "Nunito", sans-serif;
--font-body: "M PLUS Rounded 1c", "Nunito", sans-serif;
/* 角丸 */
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-full: 9999px;
/* 影 */
--shadow-sm: 2px 2px 0 #1E1B3A;
--shadow-md: 4px 4px 0 #1E1B3A;
--shadow-lg: 6px 6px 0 #1E1B3A;
/* 余白の基準・線幅 */
--space-unit: 8px;
--border-width: 2px;
/* アニメーション */
--duration-fast: 150ms;
--duration-base: 200ms;
--duration-slow: 300ms;
--easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。 プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。
メイン1色+サブ3色に限定し、太いラウンドゴシック・大きな角丸・2pxの濃い輪郭線・ぼかさないオフセットシャドウで統一。動きはオーバーシュートで跳ねさせること。