はじめに & 自己紹介
はじめまして、2023年10月よりZenn運営のデザインを部分的に担当しているfujisawaです。
Zennのデザインに関する施策を継続的に当Publication（Zenn Tech Blog）で発信し、運営としての改善・新規施策・悩んだ部分・その解決策をお伝えしていきます。
立ち上げ人のcatnoseさんとプロジェクト関係者が育てたZennが、エンジニアリング従事者にとってより不可欠な情報インフラとして活用されていくことが、私がプロジェクトに参加しているモチーべションです。
Zennは現在、利用者の皆様がより快適にご利用いただけるように、デザインのチューニングをしています。
本稿では2023年11月初頭に実施したエレベーション（ドロップシャドウ）のチューニングについて解説します。
Zennのデザインガイドライン
catnoseさんからデザインタスクを引き継ぐにあたり、まずはZennデザインの規則性の洗い出しとその整理を行いました。
その目的は下記です。
- デザインの一貫性の向上
- これまでの開発を続ける中で、一貫性が崩れている箇所を抽出
- デザインの意図や定義の言語化
- それをすることでの開発の迷いどころの低減
目的を達成するために、まずは下記の要素を調査しました。
- カラー
- スペーシング（余白）
- エレベーション
- 角丸
- テキスト
- コンポーネント
これらはデザインシステムの整備にも関連しますが、デザインシステムはより広範囲のデザインの定義となるため、まずはデザインガイドラインの作成と位置付けました。
そして、これらの調査・改善は局所的にいずれかの改善を進めるよりも、俯瞰的な視点で全体感を持ち、バランスをとって進めることが要求されました。
なぜなら、これらの要素はそれぞれが単体では存在しておらず、他要素との関係性の中で存在しているためです。
並列で調査・検討を進める中で、まずはエレベーションの一貫性の整備の落とし所が見つかりました。
これは、デザイナーの単独の決定ではなく、プロジェクト関係者と会話・具体的なデザイン変更案の確認を交えた意思決定の結果です。
エレベーション（ドロップシャドウ）のチューニング
Zennサイトはすでにエレベーション（ドロップシャドウ）の全体チューニングをリリースしています。
みなさま、お気づきになられたでしょうか？
ぱっと見の変化に乏しいため、気づかない方も多いと思います。実は、目指した方向としてはチューニング適用に気付けないほどの小さな変化ながらも、ユーザー体験が向上することでした。
逆に、不必要に大きな変化を加えてしまうと、これまで保たれていたユーザー体験を阻害しかねないため、現状の良い部分を保ちつつも細かな改善をすることに細心の注意を払いました。
そもそも、エレベーションとは
デザインでエレベーション(Elevation)の言葉を初めて目にしたのは、Google社のマテリアルデザインです。
その中で、エレベーションはz軸に沿った2つの表面間の相対距離と定義されています。
言い換えると、これは画面に対する奥行きを概念化したものです。
エレベーションを表現する際には一般的に、画面に近い表面（要素）がその背後の表面（要素）に対して、影（ドロップシャドウ）を落とします。これは物理世界での光源とそれに対する影の現象を模倣しています。
奥行きに対する要素ごとの関係性の定義が明確になることで、利用者はその一貫した規則性を意識下で認識することができ、それがユーザーインターフェースの操作上の負担を軽減します。
そのことにより、例えば新機能がリリースされた際にも利用者のユーザーインターフェースへの学習コストを低減させる助けとなります。
エレベーションのチューニングを行った経緯
大目的としては、ユーザー体験の向上です。
Zennでのユーザー体験の向上が意味するところは、利用者がコンテンツ（記事、ブック等）自体に、より集中できる状態と仮説を立てました。
この状態は下記のように言い換えられます。
- コンテンツ以外の部分は見た目として過剰に主張することがない
- 見た目の違和感を利用者に感じさせない。それにより、意識下で暗に生じる認知的なノイズを低減する
今回のチューニングでは2に取り組みました。
具体的な施策
- エレベーションの一貫性の確保
- エレベーションの定義・言語化による、今後の開発の迷いどころの低減
エレベーションの一貫性について、前述の通りまずはサイト全体の調査を行いました。
その結果、一貫性が大きく欠如しているわけではありませんでした。しかし、エレベーション（ドロップシャドウ）の持つ意味を改めて考えたところ、見た目の一貫性はある一方で、機能面での一貫性が乏しい箇所を発見しました。
例えば、関連する情報をグループ化したカードやセクションに対してドロップシャドウが適用されていましたが、表現としての一貫性はある一方、ドロップシャドウ自体の持つ機能的な意味づけ/目的が判然としていませんでした。
そこで、対象をエレベーションさせる目的を見直し、機能面での一貫性を確保するためにエレベーションを適用する条件を再定義しました。
画面に対する奥行きを表現する場合
現時点のZennは２層のレイヤーでエレベーションを表現できることがわかりました。
ですので、画面に対して手前側のレイヤーをエレベーションさせる方針としました。
物理的なオブジェクトを模倣する場合
Zennでは物理的に存在するオブジェクトを模倣した表現が存在します。
例えば、ブックが該当します。これは、物理的なオブジェクトを模倣することで「手に取れる」、実際の本のように「読むことができる」ことを伝える助けとなります。
ですので、物理的なオブジェクトはエレベーションする方針としました。
ドラッグ（＆ドロップ）できるオブジェクトを実装する場合
動かす（=ドラッグ）ことができるオブジェクトは、浮遊した状態を機能的に持つ必要があります。つまり、２層目のレイヤーに該当するため、エレベーションさせる方針としました。
フローティング（スクロールしても画面に対して絶対位置固定）するオブジェクトを実装する場合
画面スクロールしてもその場に表示され続けるオブジェクトは１層目のオブジェクトの上に重なります。よって、２層目に該当するためエレベーションさせる方針としました。
また、原則としてこれらの条件に該当しない場合はエレベーションさせないことにしました。
ですので、結果的には今回のチューニングでは方針に基づいて、ドロップシャドウを削除する作業がメインとなりました。
イレギュラーをどうするか
方針を決めましたが、実際にコードに適用するにあたり、迷う箇所がありました。
例（１）：ボタン
ボタンは「押し込める」ものです。ですので、押す前は２層に配置し、押し込めることをエレベーションとして表現する方法があります。
また、ボタンは物理世界にも存在するオブジェクトです。
結果として、ボタンをエレベーションさせない方針としました。ボタンは物理世界にも存在しますが、現在のデジタルデザインの潮流を踏まえて、あえてエレベーションさせないことにしました。
ボタンをエレベーションさせているサービスも多々存在しますが、全体としてはエレベーションさせていない傾向を感じとりました。
引用元: https://www.apple.com/
引用元: https://m3.material.io
引用元: https://note.com
引用元: https://www.airbnb.jp
引用元: https://www.spotify.com/
また、不必要な見た目のノイズの低減のためにも、可能な限りは装飾（ドロップシャドウ）を排除する方が目的に合致すると判断しました。
例（２）：ヘッダ
いくつかの画面ではヘッダはスクロールしても画面上部に吸着して表示され続けます。
つまり、ヘッダもフローティングしていることを意味し、２層目に置くことが妥当です。ですが、ヘッダーは面積が大きいため、そのドロップシャドウが１層目に置かれたテキストにかかると、テキストの視認性が落ちます。
よって、ヘッダはあえて規則性/一貫性を捨ててエレベーションさませんでした。
つまり、大目的であるユーザー体験の向上をふまえると、視認性の低下を選んでまで一貫性を確保するのは良くないと判断しました。
今回チューニングをした箇所を抜粋したスクリーンキャプチャ
おわりに
Zennでは現在、デザインのブラッシュアップ＆改善のための施策を進めています。
並列進行で施策を進めていますが、まずはエレベーションのチューニングのリリースを終えました。
Zennのエレベーションに関するより詳細な定義・言語化については、今後施策がまとまった段階で、Zennのデザインシステムの公開等の何らかの方法でシェアを行う予定です。
引き続きチューニングを行い情報発信していきますので、ご興味がありましたら是非チェックをよろしくお願いします。
Discussion