余白・縦書き・和色・明朝体で「間」を作る。旅館・和食・工芸・伝統文化のサイトや、日本発ブランドの世界観に。
向いているプロダクト: 旅館・温泉、和食・日本茶、工芸・伝統産業、日本発ブランド
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
「間（ま）と余韻」。埋めないことで語る。和色の抑えた彩度と明朝体、縦書きの一部使いで、静かで奥行きのある空間を作る。
語らぬところに、余韻がある。
#F5F1E8生成り・和紙色
#FBF8F1カード
#1F1D1A墨
#7C7568利休鼠のようなグレー
#B7282E朱。印・ボタン・強調（小面積で）
#2E4A3F松葉色。リンク・成功
#D9D2C3罫線
上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。
/* 和風・和モダン（Japanese Modern）のデザイントークン — CSS辞書 /design/japanese/ */
:root {
/* カラー */
--color-bg: #F5F1E8; /* 背景: 生成り・和紙色 */
--color-surface: #FBF8F1; /* サーフェス: カード */
--color-text: #1F1D1A; /* 本文: 墨 */
--color-muted: #7C7568; /* 補足: 利休鼠のようなグレー */
--color-accent: #B7282E; /* アクセント: 朱。印・ボタン・強調（小面積で） */
--color-secondary: #2E4A3F; /* サブ: 松葉色。リンク・成功 */
--color-border: #D9D2C3; /* ボーダー: 罫線 */
/* フォント */
--font-heading: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
--font-body: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
/* 角丸 */
--radius-sm: 0;
--radius-md: 2px;
--radius-lg: 2px;
--radius-full: 0;
/* 影 */
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: none;
/* 余白の基準・線幅 */
--space-unit: 16px;
--border-width: 1px;
/* アニメーション */
--duration-fast: 400ms;
--duration-base: 600ms;
--duration-slow: 1000ms;
--easing: ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。 プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。
和紙色・墨・朱（小面積）の3色と明朝体、行間2.0の広い余白で「間」を作ること。縦書きは見出しやキャプションの一部のみ。純白・純黒・原色・太いゴシック・和柄の全面使用は禁止、動きは600ms以上でゆっくり。