奥行きは、影だけの話ではない

ダークモードを入れたとき、明るい配色で効いていた影が暗い背景でほとんど消えました。境目が分からなくなり、カードが背景に溶けます。

そのとき初めて、自分が奥行きを影だけで作っていたことに気づきました。手段が1つしかないと、その手段が使えない場面でやり直しになります。

「切り分ける」と「浮かせる」は別の目的#

まずここを混ぜないほうがいいと思いました。見た目は似ていますが、伝えたいことが違います。

切り分けたいだけの場所に影を付けると、本文と同じ平面にあるはずのものが浮いて見えます。逆に、閉じれば消えるものを罫線で区切ると、ページの一部として居座って見えます。

手段を並べて、効かない場面を書き出す#

使える手段はそれほど多くありません。並べたうえで「どこで効かなくなるか」を一緒に書いておくと、選ぶときに迷わなくなります。

いちばん強いのは余白だった#

意外に思われるかもしれませんが、切り分ける力がいちばん強いのは余白です。

近くにあるものは同じ仲間、離れているものは別の仲間、と読み手は勝手に判断します。線も影も無くても、距離だけで境界は伝わります。実際、罫線を引きたくなった場所の多くは、余白を広げるだけで解決しました。

それでも線や面を足したくなるのは、余白が足りていないときです。狭いところに詰め込んだまま境界だけを描こうとすると、線が増えて画面が窮屈になります。順番としては、まず余白を疑うほうが早いと思います。

暗い配色でも残るのは、明度差だった#

ダークモードで見直したとき、最後まで機能していたのは背景の明度差でした。

明るい配色では、白い本文の上に少しグレーがかった面を置くと「一段下がった」ように見えます。暗い配色ではこれが逆になり、背景より少し明るい面が「一段上がった」ように見えます。

影のように配色ごとに作り直す必要がないので、迷ったらここに寄せるのが安全だという結論になりました。

追従するものだけは、別の扱いが要る#

ひとつ例外があります。スクロールに追従して画面に貼り付くものです。

このサイトでは、スマートフォンで目次が画面の上に貼り付きます。ここだけは本文の上を通過していくので、切り分けではなく前後関係を示す必要があります。少し透かして背景をぼかす指定を入れているのは、そのためです。

透けて見えることで「下に本文が続いている」と分かり、ぼけていることで「いま読むのはこちらではない」と分かります。この2つはセットにして初めて意味を持ちます。透かすだけだと下の文字と重なって読みにくくなり、ぼかすだけだと下に何があるか分かりません。

手段を重ねるほど、弱くなる#

ここが今回いちばん腑に落ちた部分です。

ひとつの境界に、枠線を引いて、角を丸めて、背景を変えて、影を落とす。全部やれば強く分かれそうに思えますが、実際には逆でした。どの手段が境界を作っているのか分からなくなり、画面全体がぼんやりします。

手段が増えるほど、他の場所との差も付けにくくなります。すべての箱が同じように装飾されていると、本当に浮かせたい1枚だけを浮かせる余地が無くなります。

選ぶ順番を決めておく#

毎回考え直さなくて済むように、順番にしました。

まず余白で足りないかを見ます。足りるなら何も足しません。次に、それが同じ平面の話なら背景の明度差で分けます。線を引くのは、面で分けると重くなる細かい区切りだけにします。

手前に浮かせたいときだけ影を使い、その場合は明るい配色と暗い配色の両方で見え方を確かめます。追従して本文の上を通るものだけ、半透明とぼかしを使います。

この順番にしてから、装飾で迷う時間がはっきり減りました。決めているのは見た目ではなく、何を伝えたいかのほうだからだと思います。

今回の学び#

まず、奥行きの手段は、配色に依存するものとしないものに分かれること。影だけが光を前提にしていて、暗い配色では成立しません。手段を1つしか持っていないと、配色を増やした時点でやり直しになります。

次に、いちばん強い区切りは、何も描かない余白だったこと。線を引きたくなったときは、たいてい余白が足りていませんでした。描き足す前に、空けられないかを先に見るほうが早いです。

そして、手段を重ねると強くなるどころか弱くなること。全部の箱を同じように飾ると、本当に目立たせたい1つを目立たせる手段が残りません。1つの境界に1つの手段、と決めておくのは、いま作りやすくするためではなく、あとで差を付ける余地を残しておくためでした。