和モダン UI の設計原則 — 藍染・伝統色・現代的な余白

なぜ今「和モダン」を選ぶのか

日本市場向けの PWA / モバイルアプリを設計するとき、Material Design のガイドラインや iOS HIG をそのまま踏襲すると、どうしても「グローバル SaaS のローカライズ版」という顔つきになります。 丸められたカード、鮮やかな 500 番台のブランドカラー、8px 刻みのグリッド。悪くはないのですが、「日本人が触って初めて心地よい」と感じる質感 にはなかなか届きません。

特に、習慣トラッキング・和菓子 EC・家族の記録・伝統工芸・地方観光といった領域では、 UI そのものが商品体験の一部です。ここでグローバル UI を輸入してしまうと、 コンテンツと器（うつわ）が噛み合わず、離脱率に直結します。ClearNets が Kotsukotsu （日本語ハビットトラッカー）を設計したとき、真っ先に決めたのは「Material Design を捨てて、和モダンで組み直す」という一点でした。

ただし、和モダン＝「日本語は明朝体」「背景に千代紙を敷く」「桜のアイコンを散らす」 という安直な発想には近寄りません。それは観光アプリの UI であって、 毎日触るプロダクトの UI ではないからです。本稿ではこの区別を軸に、Kotsukotsu で実運用している 9 原則を、具体値と失敗談とセットで書き下します。

原則 1：色は「主色 + 3 補助色」で厳選する

Kotsukotsu では、藍染系 4 色（濃藍・藍鼠・淡藤・白練）だけで UI 全体を組み立てています。この「4 色縛り」は好みではなく、色彩理論と情報量設計の帰結です。 カラーホイール上の split-complementary（分裂補色）の応用で、主色 1 色に対して 隣接 2 色 + 反対側 1 色 を配すると、ハーモニーと視認性が両立します。

UI に色を増やすと、ユーザーは「この色は何かを意味しているはずだ」と無意識に解釈しようとします。 だから 7 色使えば 7 通りの意味付けを迫られる。4 色未満で運用できるかをまず自問することを、私は強く推奨します。逆に言えば 4 色あれば、 Primary / Secondary / Accent / Surface はすべて表現できます。

• 濃藍（#1F2A44 / hsl(222, 38%, 20%)）：主要ボタン・見出し・アイコン濃色
• 藍鼠（#616D89 / hsl(220, 17%, 46%)）：補助テキスト・非活性ボタン・罫線
• 淡藤（#BBBCDE / hsl(238, 34%, 80%)）：達成マーク・進捗バー・アクセント
• 白練（#F5F4EF / hsl(45, 24%, 95%)）：背景・カード・入力欄

企画段階では「桜色（#FEC8D8）」を主色候補に入れましたが、3 週間で撤回しました。理由は季節依存です。桜色は 3〜4 月には映えますが、 7 月に開くと違和感が強く出ます。UI の主色は 12 ヶ月間フラットに耐える必要があるので、季節を強く想起させる色は主色に置けないという結論に至りました。 藍は「作業着・のれん・浴衣」など、日本人の生活に通年で溶けている色なので安全牌です。

Tailwind CSS v4 では、これらを CSS variables として @theme ブロックで宣言し、--color-nasu-1 〜 --color-nasu-4 の 4 段階トークンとして参照します。命名を色名（indigo, blue）ではなく 意味名（nasu = 濃さの段階）にしておくと、後で他プロダクトに転用するときに 色相ごと差し替えられて便利です。

原則 2：純黒・純白を使わない

デジタル UI のデフォルトは #000000 と #FFFFFF ですが、 和モダンの雰囲気を出すには、この 2 色を意識的に避けます。純黒#000000 は RGB を 0 に落とし切った色で、モニタ上ではバックライトが最も コントラスト高く出るため、「金属的」「工業的」な冷たさが生まれます。 Apple の Dark Mode ですら本当の #000 は避けており、#1C1C1E や #2C2C2E の温かいグレーに寄せています。

Kotsukotsu で採用している温かいオフブラック #2B2A28 は、原色に対して R を若干足し、G を若干引くだけで作れます。 HSL 換算で hsl(30, 5%, 16%) 相当。これで「墨」のニュアンスに寄ります。 白練 #F5F4EF も同様で、純白よりわずかに黄を足して生成り（きなり） の質感を作っています。目に対する反射光量が下がり、長時間見ても疲れないのが体感でも分かるレベルです。

• 温かいオフブラック（#2B2A28）：本文・ラベル・アイコンの濃色
• 白練（#F5F4EF）：メイン背景・カード・モーダル背景
• コントラスト比は WCAG AA（4.5:1）以上を保つよう、#2B2A28 vs #F5F4EF で 13.2:1 を確保

なお、Dark Mode に反転する際は 単純に色を反転させないことも重要です。 濃藍 #1F2A44 を背景に、白練 #F5F4EF を本文にすると、 紙面感がそのままダークに移植できます。@media (prefers-color-scheme: dark) でこの 2 変数だけを差し替えれば済みます。

原則 3：余白を「和室の畳」のイメージで取る

和室の畳の目地は、規則的で余裕があります。UI の余白も、この感覚で取ります。 Material Design のデフォルトスペーシング（4 / 8 / 16 / 24）よりも、和モダンでは1 段大きめの 8 / 16 / 32 / 48 をベースにします。理由は日本語の文字密度の高さです。 漢字は 1 文字あたりの情報量が英字より多く、詰めて置くと圧迫感が生まれます。

component 内部の padding だけでなく、component 間の margin にも同じ倍率を適用します。 カードの内側 padding が 24px なら、カード間の margin も 24px 以上取る。 こうすると全体のリズムが揃い、視覚的な「間（ま）」が生まれます。余白は空白ではなく間である——これは茶道の座敷設計から借りた考え方です。

Kotsukotsu の藍染グリッド（月次カレンダー）では、セル間の grid-gap を 12px に設定しています。8px だと詰まって見え、16px だと繋がりが弱くなる。 12px はそのちょうど中間で、藍染布の織り目のような「ゆらぎのある整列」を作れます。 こういう微妙な数値は理論では出せず、実機で 30 分ほど遊びながら確定させました。

原則 4：タイポグラフィは日本語ファースト

多くの UI フレームワークは英語圏を前提にしています。line-height: 1.5 が推奨されますが、日本語は漢字・ひらがな・カタカナが混ざるため、この値では行間が詰まって「壁」に見えます。Kotsukotsu では初期実装で 1.5 のまま出しましたが、 ユーザーテストで「読みにくい」という声が複数出て、1.75 に変更しました。 本文には 1.7〜1.8、見出しでも 1.4 以上を推奨します。

フォント指定は OS 別のシステムフォントを優先します。macOS / iOS は Hiragino Sans、 Windows は Yu Gothic、Android / Chrome は Noto Sans JP。fallback を含めた 推奨スタックはこうです。

• font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
• 本文サイズ：15〜16px（日本語なら 14px でも成立、英字併記なら 16px 推奨）
• 見出し h2：22〜24px、h3：18px、weight は 600〜700
• font-feature-settings："palt" 1 でプロポーショナルメトリクス、"pkna" 1 で仮名の詰め

書体の選び分けの原則はシンプルで、「明朝体は読ませたい時、ゴシックは操作させたい時」。 UI ボタンや設定画面は必ずゴシック、ブログ記事や読み物ページだけ明朝を検討する、 という切り分けをします。縦書き Web CSS（writing-mode: vertical-rl）は 実験的には楽しいですが、UI 用途では非推奨。読ませたい記事の中でだけ、 ここぞの演出として使うと効きます。

濁点・半濁点の位置がずれる問題は、iOS Safari で Noto Sans JP を fallback にした際に 頻発します。font-feature-settings: "kern" 1, "palt" 1; を指定し、 なおかつ Hiragino Sans を第一優先に据えることで回避できます。

原則 5：装飾は「型」から借りる、模倣ではない

和柄（千代紙・江戸小紋・藍染幾何）を UI にそのまま貼り付けると、「観光アプリ」「土産物サイト」 のような雰囲気に一瞬で寄ります。 観光アプリを作りたいなら正解ですが、毎日使うツールでこれをやると、飽きが早く来ます。 代わりに、型の構造だけを借りて、モダンなグリッドに翻訳するのがコツです。

Kotsukotsu の藍染グリッドは、藍染布の織り目の構造を Material Design の カレンダーグリッドに翻訳した結果です。翻訳の手順は次の 3 段階。

1. 伝統柄を写真か図版として集める（麻の葉・市松・青海波・七宝など）
2. 柄の中から幾何要素（六角形・格子・波形）だけを抜き出し、装飾は捨てる
3. 抽出した幾何を、UI が要求するグリッド（カレンダー、リスト、ダッシュボード）に配置する

たとえば麻の葉柄は「6 角形の grid」に翻訳できるので、 タグクラウドや実績バッジの配置に使えます。市松柄は 「2 色 tile の交互配置」に落とせるので、比較テーブルや週表示カレンダーに向いています。青海波は「同心円弧の反復」なので、進捗ローディングや達成率グラフに応用できます。 大事なのは、翻訳後の UI を見て「元の柄が分からないくらい抽象化されている」状態が正解、 ということです。分かる時点で観光アプリに戻っています。

原則 6：アニメーションは控えめに

派手なアニメーションは、和モダンの静けさと相性が悪いです。基本はfade 200ms / slide 300ms / ease-out で 8 割こと足ります。 スケール変化を使うときも 1.0 → 1.03 のようなごく僅かに留め、 Bounce（cubic-bezier のオーバーシュート、cubic-bezier(0.68, -0.55, 0.27, 1.55) のような値）は完全に排除します。バウンドは「跳ねる」印象を生むため、 落ち着いた質感を目指す和モダンとは根本的に相性が悪いです。

アクセシビリティの観点からも、@media (prefers-reduced-motion: reduce) の対応は必須です。iOS の「視差効果を減らす」設定を ON にしているユーザーには、 すべての transform 系アニメを 0ms に短縮するか fade だけ残す実装にします。

Kotsukotsu のマスコット「タビット」は、習慣を達成した瞬間に200ms で 3 度だけ軽くお辞儀します。これも当初は Lottie でジャンプさせる案もありましたが、日次で見るものなので抑制側に寄せました。 「うるさくない祝福」が、継続率にはかえって効きます。

原則 7：シャドウは薄く、多層で

Material Design の box-shadow-elevation 4 以上のような、輪郭のはっきりした ドロップシャドウは和モダンでは避けます。代わりに、blur を大きめに取り、opacity を低くした薄いシャドウを 2 層重ねる のが定石です。

• 第 1 層（近距離）：0 1px 2px rgba(31, 42, 68, 0.06)
• 第 2 層（遠距離）：0 8px 24px rgba(31, 42, 68, 0.08)

こうすると、要素が浮き上がっているのに、影の主張はほとんど感じられません。 和紙を重ねたときの、ふわっとした奥行き感に近づきます。シャドウの色も グレー系ではなく、主色（濃藍）を薄めたトーン を使うのがポイント。 白練の背景に濃藍のシャドウを落とすと、色調が統一されて上品になります。

原則 8：角丸は控えめに

border-radius: 12px 〜 16px を推奨します。24px 以上に取ると、 iOS ネイティブ UI の「大きなカプセル型カード」感が強く出て、Apple の HIG に寄った顔つきになります。和モダンで狙うのは 「障子の桟」や「木箱の面取り」に近い、控えめで幾何学的な柔らかさです。

Kotsukotsu では当初、カードに border-radius: 24px を採用しましたが、 「iOS 感が強すぎる」というフィードバックが 2 週間で溜まり、16px に下げて撤回しました。ボタンは 12px、 入力欄は 8px、カードは 16px、モーダルは 20px、と要素の重要度に応じて 4px 刻みで段階化 すると、統一感が出ます。

原則 9：アイコンは線画・単色

Material Icons の Filled バージョンではなく Outlined バージョン を選びます。線幅は 1.5px〜2px、色は必ず主色 4 色のいずれかに揃えます。 マルチカラーのイラスト風アイコンは、和モダンの静けさを壊します。 Phosphor Icons や Lucide の Duotone / Line ウェイトも相性が良いです。

アイコンサイズは 16 / 20 / 24 / 32px の 4 段階 に絞ります。 ボタン内 16px、リスト先頭 20px、タブバー 24px、空状態イラスト 32px、 といった具合に用途と対応させると、コード上でも管理しやすくなります。

実装 tips：Tailwind と CSS Variables で持たせる

Tailwind v4 の @theme ブロックに、以下のように色トークンを定義します。 こうしておくと、bg-nasu-1 や text-nasu-4 のような 意味的なクラス名で、色ロジックを component から追い出せます。

• --color-nasu-1: #1F2A44;（濃藍）
• --color-nasu-2: #616D89;（藍鼠）
• --color-nasu-3: #BBBCDE;（淡藤）
• --color-nasu-4: #F5F4EF;（白練）
• --color-sumi: #2B2A28;（墨・本文濃色）

Dark Mode 用の反転は、@media (prefers-color-scheme: dark) の中で--color-nasu-1 と --color-nasu-4 を入れ替えるだけで済みます。 追加のトークンを増やさないのがコツです。フォントスタックも--font-sans-ja: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; として @theme に寄せておくと、component からはfont-sans-ja だけで参照できます。

@media (prefers-reduced-motion: reduce) の対応は、 グローバル CSS で * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } を一括適用するのが最短経路です。個別 component で対応漏れを心配しなくて済みます。

失敗談：撤回した 3 つの意思決定

設計原則は現場で殴られて初めて言語化できるので、Kotsukotsu で実際に撤回した 3 件を共有しておきます。

1. 桜色を主色候補に入れた：4〜6 月は良かったが、7 月に入った途端に違和感が出て、 3 週間で藍系に統一。季節依存の色は主色に置かないという原則が生まれた。
2. line-height 1.5 で本文を組んだ：ユーザーテストで「読みにくい」の声が複数、1.75 に変更して即改善。日本語 UI の line-height は 1.7〜1.8 が黄金比。
3. 角丸 24px でカードを設計：iOS 純正アプリに似すぎて「Kotsukotsu の顔」が消えた。16px に下げて独自性が戻った。角丸は控えめに、が鉄則。

他プロダクトへの展開の指針

ClearNets には Kotsukotsu 以外にも、Merci（チップ決済）、Kotodama（AI 占い）、 オシタビ（推し活遠征管理）、Family Safety OS など複数のプロダクトがあります。 これらすべてを同じ色にする必要はありません。Merci はピンク〜ワイン系、 Kotodama はパープル〜藤色系、オシタビは推し色に応じて可変、と色相はブランドごとに変える方針を取っています。

重要なのは、本稿の 9 原則は色に依存しない構造的な指針だ、という点です。 「主色 + 3 補助色」「純黒純白を避ける」「余白 1 段大きめ」「日本語ファースト typography」 「型から借りる装飾」「控えめアニメ」「薄い多層シャドウ」「控えめ角丸」「線画単色アイコン」 ——この 9 つは、色相を差し替えてもそのまま流用できます。実際、Kotodama の LP をリニューアルした際にも、同じ原則を藤色ベースに適用しました。

逆に言えば、この 9 原則を守らずに藍色だけを塗っても「和モダン」にはなりません。 色は表層で、原則は骨格です。骨格から組んだ UI は、色を変えても骨格が生き続けます。 それが、和モダン UI をプロダクト横断で運用するときの最大の利点です。

まとめ

和モダン UI は、伝統的な要素を「そのまま貼り付ける」のではなく、 「構造から借りて翻訳する」ことで実現できます。色を絞る、純黒純白を避ける、 余白を大きく取る、日本語ファーストのタイポ、型から借りた装飾、控えめなアニメ、 薄い多層シャドウ、控えめな角丸、線画・単色アイコン——この 9 原則を守れば、 他のプロダクトでも和モダンな雰囲気を、色相に依存せずに再現できます。

Kotsukotsu の実装は、本稿の 9 原則をひとつずつ具現化した結果です。 まずは自分のプロダクトの色数を数えるところから始めてみてください。 4 色を超えていれば、そこに削れる余地があります。UI を軽くすることが、 和モダン化の最初の一歩です。