Was macht muji-design?
UI を生成・改修するときに使うデザインスキルです。日本的デザインのベースを無印良品の思想に置き、核を「最適化」とします。空間文法は和室の建築から取り、色は 46 色のパレットをベースにします。
核 ― 最適化
無印良品の三つの視点を、UI の営みに翻訳して使います。
- 素材の選択 ― 色と質感は素材由来のものをそのまま使います。生成り、無垢の木、畳、石、苔、桜。色はこのパレットの範囲から選びます。
- 工程の見直し ― 操作の手順と画面遷移から無駄を省きます。目的の操作は少ない手数で届く場所に置きます。
- 包装の簡略化 ― 枠・バッジ・装飾という「包み」を減らし、中身を直接見せます。
判定軸はひとつです。「この画面は、無印良品の棚と画面に置いて違和感がないか」。迷ったときはこの問いで決めます。
進め方
- 主役を決める ― 画面ごとに主役は 1 つです（床の間）。他の要素はすべて引き立て役に回ります。
- 間を確保する ― 最初に、何も置かない領域を確保します。余白は残り物ではなく、最初に置く要素です。
- 骨格を引く ― 桟と格子で区切ります。区切り線、リストの行、ナビゲーションの縦線は細く、色は木の色系から取ります。
- 面を置く ― 区画は敷居と段で示します。面の色を一段変えるだけで区切り、強い枠線と強い影に頼りません。
- 差し色を 1 点置く ― 生け花のように、差し色と意匠は 1 画面に 1 箇所だけ、中心を外して置きます。
- 自己点検する ― 下記の点検を通し、要素を減らす修正を 1 回行ってから提出します。
第 1 層 ― 数値（決め値）
色
パレットはベースです。実際の画面では役割ごとにこの値を使い、プロジェクトに合わせて多少ずらします。ずらす際の目安は、彩度は低く抑えること、暖かいニュートラルの範囲に留めること、明暗の階段と役割を保つことです。
役割への割り当て（既定）
| 役割 | 色 | HEX |
|---|---|---|
| 背景 | 生成り色 | #FBFAF5 |
| 面（カード・パネル） | 障子の白 | #F5F5F4 |
| 面（一段下げ） | 拡散光 | #E5DCD7 |
| 区画の段 | 淡い畳影 | #D5C0B0 |
| 本文の文字 | 梁の濃茶 | #2E1E12 |
| 補助の文字 | 利休鼠 | #888E7E |
| 区切り線・桟 | 桟 | #9F7153 |
| 木の要素 | 木肌 | #B3987E |
| 強い面・見出し帯 | 梁の中茶 | #745E4A |
パレット全 46 色
- 参考画像からの実測: 障子の白
#F5F5F4/ 拡散光#E5DCD7/ 淡い畳影#D5C0B0/ 畳#BEB09A/ 木肌#B3987E/ 桟#9F7153/ 梁の中茶#745E4A/ 梁の濃茶#2E1E12 - Tatami Morning Light:
#F7F3EA/#E0D2B5/#C1A879/#8E6B3F/#5A4A38 - Japanese Minimalism: 白練
#F5F0E8/ 藁色#E8DFC8/ 生成り#EDE0C4/ 抹茶#7A8C5E/ 墨染#6B6B6B/ 勝色#1C1F2B - 和色: 生成り色
#FBFAF5/ 練色#EDE4CD/ 白茶#DDBB99/ 胡桃色#A86F4C/ 利休茶#A59564/ 利休鼠#888E7E - Misty Tatami:
#F2EFE6/#D9D1C1/#B7B0A2/#7C776E/#3F3C37 - 植物: 松葉色
#839B5C/ 苔色#6C8253/ 若竹色#6B9362/ 鶯色#928C36/ 松の影#3D4F3C - 水・空・石・土: 水浅葱
#80ABA9/ 藍色#165E83/ 砂礫#E8E3D6/ 濡れた玄武岩#35393B/ 土色#BC763C - 桜: 桜色
#FEF4F4/ 薄桜#FDEFF2/ 桜鼠#E9DFE5/ 灰桜#E8D3D1/ 撫子色#EEBBCB/ 紅梅色#F2A0A1
色の使い方
- 画面の主役は障子・畳・木のニュートラルです。自然色（植物・水・桜）は差し色として 1 画面に 1 色だけ、面積は全体の 1 割まで に絞ります。桜系は最も面積を絞る色です。
- 色の面は平らに塗ります。色同士の関係は明暗の階段で作り、グラデーションは光の表現が必要な箇所だけに使います。
- CSS 変数の一式は
references/design-tokens.cssにあります。
余白・寸法
- 余白の段: 4 / 8 / 16 / 24 / 40 / 64 (px)。要素間の余白はこの段から選びます。
- 画面端の余白は広く取ります。コンテンツ幅は詰めず、間の比率を保ちます。
- 要素の高さは低く揃えます（低い水平線）。行高とコントロールの高さは画面内で段を揃えます。
線・角・影
- 区切り線は 1px、色は桟
#9F7153系を薄く使います。 - 角丸は 最大 4px。丸みは素材の角の丸み程度に留めます。
- 陰影は面同士の明暗差で作ります。影を落とす場合は拡散光のように柔らかく、広く、薄くします。
書体
- 見出しは 明朝体（
'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif）。 - 本文と操作系は ゴシック体（
'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif）。 - 文字サイズの段: 12 / 13 / 15 / 17 / 22 / 28 (px)。太字は見出しと主役の要素だけに使います。字間は見出しでわずかに広げ、本文は標準に保ちます。
動き
- 画面遷移は引き戸の動きです。横へ滑る静かなスライドを基本とし、継続時間は 200–300ms、イージングは滑らかな減速（
cubic-bezier(0.22, 1, 0.36, 1)）を使います。 - 動きは状態の変化を伝える箇所だけに付けます。
第 2 層 ― 判断（数値で測れない部分）
数値は土台です。仕上がりは次の判断で決まります。
- 間 ― 何も置かない場所が意味を持っているかを見ます。要素を足す前に、間が崩れていないかを確認します。
- 静けさ ― 画面全体が静かかを見ます。色の数、線の数、動きの数が増えるほど静けさは失われます。
- 素材感と光 ― 色番号の再現に留めず、畳や木肌の温かみ、柔らかく回る光の感じまで含めて素材感と呼びます。面の色選びと明暗差で表現します。
- 引き算 ― 何を置くかより、何を置かないかの判断が仕上がりを決めます。迷う要素は置かない側を選びます。
良い状態と崩れた状態の対比
| 観点 | 良い状態 | 崩れた状態 |
|---|---|---|
| 主役 | 一目で主役が分かる | 全部が同じ強さで並ぶ |
| 余白 | 間に呼吸がある | 要素が端まで詰まる |
| 色 | ニュートラルが支配し、差し色が 1 点光る | 差し色が複数競合する |
| 区切り | 面の段差で静かに区切られる | 枠と影が重なって騒がしい |
| 視線 | 上から下へ迷わず流れる | 視線の行き場が複数ある |
自己点検（提出前に必ず通す）
- 主役は 1 つに定まっているか。
- 詰め込み感はないか。端まで要素が詰まっていないか。
- 視線が迷わないか。最初に見る場所と、流れる方向が決まっているか。
- 画面は静かか。色・線・動きの数を数え、多い場合は減らす。
- 差し色は 1 色・1 箇所・面積 1 割以内か。
- 判定軸（無印良品の棚と画面に置いて違和感がないか）に照らして合っているか。
点検で見つけた問題は、要素を足す方向ではなく 減らす方向 で直し、修正を 1 回行ってから提出します。
参照
references/design-tokens.css― 役割色・余白・書体・動きの CSS 変数assets/japanese-color-palette.png― 46 色パレットの見本assets/cover-mincho.png― 様式の象徴画像（障子・畳・低い机・一点の生け花）