見た目で「深さ」を感じてほしかった
このサイトは、地下6階から地上1階まで、スクロールでのぼっていく作りです。
デザインで一番大事にしたのは、説明しなくても「今、地下の深いところにいる」とわかることでした。
そのために使った道具は、色・書体・動きの3つです。
1. 色で深さを表す
最深部と地上、2つの色だけ決める
色は、たくさん選ぶ前に、両端の2色だけを決めました。
- 最深部（B6）：
#07090e… 黒に近い、ほんのり青い紺 - 地上（1F）：
#f6f0e3… 少し黄みのある、あたたかい白
真っ黒（#000）と真っ白（#fff）にしなかったのは、地下に「空気」を、地上に「日差し」を感じてほしかったからです。
その間は、階ごとに混ぜていく
B1〜B5 の色は、手で選んでいません。CSS の color-mix() で、2色を階の深さに応じて混ぜています。
css
background: color-mix(in oklab, #07090e 50%, #f6f0e3);oklab は、人の目に自然に見える混ぜ方です。普通の混ぜ方より、途中の色がくすみにくくなります。
1F だけは、上から光が差し込むように、ふんわりした黄色のグラデーションを重ねました。のぼりきったときの「地上に出た！」という感じを出すためです。
階数ランプは琥珀色
右の操作盤の階数表示は、アンバー（琥珀色、#ffb347）にしました。古いエレベーターの表示板の、あの光る数字の色です。暗い地下でも、明るい地上でも目立つ色として、サイト全体のアクセントカラーにも使っています。
失敗談：真ん中の階が読めなかった
最初に作ったとき、B3 あたりが中途半端な灰色になり、白い文字も黒い文字も読みにくくなりました。暗い色と明るい色をちょうど半分ずつ混ぜると、どちらの文字色とも差が出ないのです。
そこで、記事が載る「かご」の中に照明を足しました。
- 明るい階では、かごの中をさらに明るく
- 暗い階では、かごの中をさらに暗く
外側（エレベーターの通路）は深さどおりのグラデーションのまま、文字が載る場所だけ、はっきり明るいか暗いかに寄せています。これで、どの階でも文字が読めるようになりました。
（ここに修正前と修正後のスクショ）
2. 書体で「機械らしさ」を出す
- 階数・日付：等幅フォント（JetBrains Mono）。数字の幅がそろうので、表示板らしく見えます
- 見出し：太めの日本語ゴシック。遊びのあるサイトでも、タイトルは一目で読めることを優先しました
- 背景の大きい「B6」：文字色を 7% だけ乗せて、うっすら見える程度に。最初は輪郭線だけの文字にしたのですが、線が二重三重に重なって見えたので、塗りに変えました
見出しは、日本語を文節で折り返す設定（word-break: auto-phrase）も入れています。「エレベーター型ブ／ログ」のような変な改行がなくなるだけで、ぐっと読みやすくなります。
3. 動きは「意味のあるもの」だけ
このサイトの動きは、どれもエレベーターで実際に起きることです。
- ドアが開く：そのフロアに着いた合図
- ピタッと止まる：各フロアでスクロールが止まる
- チャイムが鳴る：着いたことを音でも知らせる（スピーカーボタンでオンにした人だけ）
- 階と階の間の縞模様：通り過ぎるコンクリートの床
ドアは 0.9秒かけて、ゆっくり開きます。速すぎると「何か起きた」としか感じられず、遅すぎるとイライラするので、何度か調整しました。
4. 遊びと読みやすさの両立
遊びのあるサイトは、つい「見た目優先」になりがちです。このサイトでは、次のことを守りました。
- パソコンの設定で「動きを減らす」にしている人には、ドアを出さない
- JavaScript が動かない環境でも、普通の縦長ページとして読める
- チャイムは、本人がボタンを押すまで鳴らさない
- フロアの階数ボタンから、好きな階へすぐ移動できる
「全員に同じ演出を見せる」より、「演出がなくても困らない」ことを先に作っておく。そのうえに遊びを乗せる、という順番を大事にしました。
まとめ：遊びは「わかりやすさ」の上に乗せる
- 深さは色で
- 機械らしさは書体で
- 到着は動きで
どれも「エレベーターらしさ」を出すためのものですが、根っこにあるのはどの階でも、誰でも、ちゃんと読めることです。
さあ、もうひとつ上の階へ。
Discussion
No comments yet