はじめに
少し前ですが、デザインレビューでこう言われました。
「なんかごちゃごちゃしてますね」
ごちゃごちゃ。
自分では「リッチなUI」のつもりでした。グラデーション、カードシャドウ、ホバーアニメーション。
でも言われてみれば確かに、見た目は派手なのに何も伝わってこないんですよ。
試しに、いっそのこと装飾を全部消してみることにしました。
制約はタイポグラフィと余白だけで、UIを成立させる。 これだけです。
結論から言うと、想像以上に難しかったですが、想像以上に面白かったです。
ぜひお試しを
装飾は「情報の弱さ」を隠す道具だった
ドロップシャドウを厚くするとき、自分は何をしようとしていたのか。
それは"情報の構造の曖昧さ"を隠そうとしています。
グラデーションがあれば視線は引ける。アニメーションがあれば注意は強制できる。
うまく整理されていなくても、派手にすればなんかそれっぽくに見える。
装飾は、めちゃくちゃ便利な嘘です。
タイポグラフィと余白だけで成立させようとすると、この逃げ道が消えてしまいます。
ごまかしの道具がないので、結構困ります。
バウハウスの話をすると「またその話か」と言われそうなので手短に
「形態は機能に従う」は、ミニマルデザインの文脈でよく使われる言葉です。
ただ、バウハウスの実践は「シンプルにしよう」ではありません。
マルセル・ブロイヤーが鋼管椅子を作ったのは、当時の工業技術と本気で格闘した結果で、「装飾を減らそうと思ったから」ではなく、素材に正直に向き合ったら、装飾が要らなくなった。という順番です。
これはコードにも同じことが言えますよね。
「依存を減らす」を目的にするより、「タイポグラフィと余白だけで成立するUIにしよう」と思ったら、結果としてブラウザのネイティブ機能だけで完結した。みたいな感じです。
原因と結果を逆にしないことが大事なのだろう、と思います。
余白は「何もない場所」ではない
これを始めるまで、余白は空白ではない。ということに気づいていませんでした。
ゲシュタルト心理学に「近接の法則」というものがあります。要するに、近いものは「関係がある」と脳が勝手に判断する。つまり余白は、関係性の宣言となります。
:root {
--space-xs: 0.25rem; /* 4px */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 2rem; /* 32px */
--space-xl: 4rem; /* 64px */
}
4の倍数の等比スケール。これを使うと、いちいち考える必要もなくて楽です。
ボーダーラインで「線を引く」のと、marginで「空ける」のは、情報設計としても全然違います。
描かれた線は押しつけがましいですよね。
こっちで余白を開けて、ユーザー自身に読んでもらいましょう。
フォントサイズは「なんとなく大きめ」で決めていた
H1を大きくして、H2を少し小さくして、本文はまあこのくらい…かな？
ウェイトとサイズのコントラストが、読者の視線の通り道を決める。その設計を「なんとなく」でやっていたら、どこかで破綻します。
なので、数学的な比率を使ってみます。
H1: 2.441rem (base × 1.25⁴)
H2: 1.953rem (base × 1.25³)
H3: 1.563rem (base × 1.25²)
p: 1rem (base)
sm: 0.8rem (base × 1.25⁻¹)
1.25倍の等比数列（Major Third）。
音楽の比率をフォントサイズに使う、と聞いたとき「意味わからん」と思いましたが、使ってみると意外とそれっぽくなるので楽しいもんですね。
気づいたら、コードもシンプルになっていた
UIをシンプルにしたら、コードも減りました。（まぁそりゃそうなんですが）
| 装飾 | 依存しているもの |
|---|---|
| 背景のグラデーション | 「派手さ」による注目 |
| アイコンフォント | 視覚的な意味補助 |
| アニメーション | 動きによる注意の強制 |
| ライブラリ | 回避しているもの |
|---|---|
| styled-components | CSS設計の複雑さ |
| Framer Motion | CSSアニメーションの記述コスト |
| UI Component Library | デザイン決定の労力 |
構造は同じです。
どちらも「本質から逃げるための道具」になっているとき、依存は制約に変わるということです。
タイポグラフィと余白だけで成立するUIは、CSS Custom PropertiesとSemantic HTMLだけで動きます。フレームワークが廃れても、color と font-size は残り続けます。
長寿のコードは、長寿の思想から生まれます。
ただし、これはすべての文脈に当てはまるわけではない
ですが、「装飾＝悪」という話ではありません。
- ゲームのUIは没入感のために装飾が必要
- 子ども向けのアプリは視覚的な豊かさが情報そのもの
- ブランドのLPは感情を動かすことが機能
問うべきは「なぜこれが必要か」だけです。
答えられるなら、それはもう装飾ではなく機能ですよね。逆に、答えられないなら、削りましょう。
バウハウスの言葉を正確に受け取るなら、「シンプルにせよ」ではなく「すべての要素に理由を持て」ということになります。