背景と同色の要素を、明暗2方向の影で押し出したり凹ませたりして立体感を作る。スマート家電・オーディオ・設定画面など「物理的な操作感」を出したいUIに。
向いているプロダクト: スマート家電・IoT、音楽プレイヤー、設定画面、計算機・ダイヤル系UI
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
「柔らかい物質のUI」。画面全体が一枚の柔らかい素材で、ボタンはそこから盛り上がり、入力欄は凹んでいる。触感を視覚で再現する。
触れそうな、やわらかい面。
#E0E5EC要素と同じ色。全ての基準
#FFFFFF左上からの光（-6px -6px 12px）
#A3B1C6右下の影（6px 6px 12px）
#3D4A5C本文。濃すぎる黒は浮く
#8492A6キャプション
#5B8DEFON状態・アイコン・進捗のみに使う
上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。
/* ニューモーフィズム（Neumorphism / Soft UI）のデザイントークン — CSS辞書 /design/neumorphism/ */
:root {
/* カラー */
--color-bg: #E0E5EC; /* 背景: 要素と同じ色。全ての基準 */
--color-shadow-light: #FFFFFF; /* 明るい影: 左上からの光（-6px -6px 12px） */
--color-shadow-dark: #A3B1C6; /* 暗い影: 右下の影（6px 6px 12px） */
--color-text: #3D4A5C; /* 本文: 本文。濃すぎる黒は浮く */
--color-muted: #8492A6; /* 補足: キャプション */
--color-accent: #5B8DEF; /* アクセント: ON状態・アイコン・進捗のみに使う */
/* フォント */
--font-heading: "Nunito", "Zen Maru Gothic", sans-serif;
--font-body: "Nunito", "Noto Sans JP", sans-serif;
/* 角丸 */
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-full: 9999px;
/* 影 */
--shadow-sm: -3px -3px 6px #FFFFFF, 3px 3px 6px #A3B1C6;
--shadow-md: -5px -5px 10px #FFFFFF, 5px 5px 10px #A3B1C6;
--shadow-lg: -8px -8px 16px #FFFFFF, 8px 8px 16px #A3B1C6;
/* 余白の基準・線幅 */
--space-unit: 8px;
--border-width: 0;
/* アニメーション */
--duration-fast: 100ms;
--duration-base: 150ms;
--duration-slow: 200ms;
--easing: ease-out;
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。 プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。
全要素を背景と同色（#E0E5EC系）にし、左上光源の明暗2方向のbox-shadowで盛り上げ・inset影で凹ませること。ボーダーと色分けは禁止、アクセント色は状態表示のみ、光源方向を全要素で固定する。