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

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

Kotsukotsu では、藍染系 4 色（濃藍・藍鼠・淡藤・白練）だけで UI を構成しています。この「4 色縛り」は意図的です。色が多すぎると視覚的な情報量が増えて、静けさが失われます。4 色未満で運用できるかを、まず自問することをおすすめします。

• 濃藍（#1F2A44）：主要ボタン・見出し
• 藍鼠（#616D89）：補助テキスト・アイコン
• 淡藤（#BBBCDE）：達成マーク・アクセント
• 白練（#F5F4EF）：背景

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

デジタル UI のデフォルトは #000000 と #FFFFFF ですが、和モダンの雰囲気を出すには、これらを避けます。代わりに使うのは：

• 温かいオフブラック（#2B2A28）：モニタで見たときの「金属的な冷たさ」を消す
• 白練（#F5F4EF）：生成りの温かみを持つ背景色

これだけで、UI 全体の印象がぐっと和らぎます。

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

和室の畳の目地は、規則的で余裕があります。UI の余白も、この感覚で取ります。Material Design のデフォルト（8px, 16px, 24px）よりも 1 段大きめに取ることが多いです。余白は、視覚的な休息を生むという意識で使います。

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

多くの UI フレームワークは英語圏を前提にしています。line-height は 1.5 が推奨されますが、日本語は漢字とひらがなが混ざるので、1.7-1.8 くらい取った方が読みやすいです。フォントは、Hiragino Sans / Yu Gothic のようなヒューマニストな和文フォントを優先します。

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

和柄（千代紙・江戸小紋・藍染幾何）を UI にそのまま貼り付けると、「観光アプリ」のような雰囲気になってしまいます。代わりに、型の構造だけを借りて、モダンなグリッドに翻訳するのがコツです。Kotsukotsu の藍染グリッドは、藍染布の織り目の構造を、Material Design のカレンダーグリッドに翻訳した結果です。

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

派手なアニメーションは、和モダンの静けさと相性が悪いです。fade / slide などの控えめなトランジションを、200-300ms 程度で使います。バウンス・ロータリー・スケール変化のような激しいアニメは避けます。

まとめ

和モダン UI は、伝統的な要素を「そのまま貼り付ける」のではなく、「構造から借りて翻訳する」ことで実現できます。色を絞る、純黒純白を避ける、余白を大きく取る、日本語ファーストのタイポ、控えめなアニメーション — これらの原則を守れば、他のプロダクトでも和モダンな雰囲気を出せます。