Zennサイトの角丸チューニングによるユーザー体験向上とCSS変数の整理

ZennサイトのUIにおいて、角丸のチューニングを行い、その大きな目的としては、前回のエレベーションのチューニングと同様にユーザー体験の向上を図りました。本稿では、実施した角丸のチューニングがどのようにユーザー体験向上に貢献するかについて解説し、さらにCSS変数の調整による柔軟性にも触れます。

https://zenn.dev/team_zenn/articles/ba9245ff5b92f3

角丸とは

「角丸」とは、オブジェクトの角に丸みを持たせるデザイン要素です。主に矩形のオブジェクトに適用され、CSSのborder-radiusプロパティを使用して角丸の半径を指定します。

角丸が持つ意味は、オブジェクトが丸みを帯びることで、そのオブジェクトがインタラクト（クリック/タップ/ドラッグ&ドロップ/フリック/スワイプ）可能であることを示します。これは物理世界のメンタルモデルと連動し、触れやすさや触れた際の怪我のしにくさを意味します。

https://ja.wikipedia.org/wiki/面取り

Zennの角丸チューニングの経緯と目的

Zennでは、以下の状態を達成し、ユーザー体験を向上させることを目指しました。

• オブジェクトのインタラクト可能性を即座に判断できること。
• オブジェクトを見ただけではクリック可能か判断できない、マウスオーバーして確認する必要がないこと。

これにより、利用者がコンテンツにより集中できる状態になるという仮説が立てられました。

角丸のチューニングの方針

チューニング前に存在していた、分かりやすい課題はタグの角丸です。
角丸の規則が曖昧な場合、オブジェクトのインタラクト可能性が不明確となります。

前提として、タグにはインタラクトできるタイプ、そうでないタイプがありますが、例としてインタラクトできないタイプをあげます。
インタラクトできないタグはスクラップのOpen・Closeなどに使用しています。

インタラクトできないタグの角丸は下記の特徴を持っていました。

• 矩形
• Primaryカラー
• 明らかな角丸

インタラクトできないタグ

一方、インタラクトできるPrimaryボタンは下記の特徴を持っていました。

• 矩形
• Primaryカラー
• 柔らかな角丸

Primaryボタン

つまり、角丸の数値が異なる（＝明らか/柔らか）以外の特徴は同じです。よって、インタラクトできる特徴の条件が曖昧でした。

これを解消すべく、インタラクトできるオブジェクトは明らかな角丸を持つことを統一する方針が採用されました。

角丸の値を０にすることの弊害の考慮

前述の方針に基づくと、インタラクトできないオブジェクトの角丸を０（= border-radiusプロパティを指定しない）とすることが妥当です。
ですが、そこには審美性の考慮が必要になります。言い換えると、合理性・ロジックだけでは扱えない領域の考慮です。角丸を０とすると、見た目の印象が硬くなりすぎます。Zennサイトは適度に柔らかい好印象をもつため、不必要にそれを壊したくありません。
よって、インタラクトできないオブジェクトは角丸を０とせず、わずかな角丸を適用しバランスをとりました。

角丸の緩急を明確にすることのユーザビリティ向上以外の訴求

操作上のメリットに加えて、「明確にする・はっきりすること・中途半端にしないこと」により、玄人志向の演出を高める狙いがあります。
Zennはある種、硬派・実直なユーザー層に受け入れられている傾向をサービスプロバイダーとして感じているため、そのブランド傾向でのプラットフォーム価値にさらに寄り添いました。

CSSの角丸変数の整理

変数を活用して柔軟性を確保するため、以下のCSS変数が整理されました。

--rounded-xxs: 2px;
--rounded-xs: 4px;
--rounded-sm: 7px;
--rounded-md: 10px;
--rounded-lg: 14px;
--rounded-xl: 20px;
--rounded-full: 99rem;
--rounded-publication: 25%;

原則として、以下の方針としました。

• インタラクトできるオブジェクトは--rounded-full（明らかな角丸）が適用されます。
• インタラクトできないオブジェクトは--rounded-xs（とても控えめな角丸）が適用されます。

実装担当のエンジニアとの話し合いの中で、「これらの二つの変数以外は不要ではないか」という点について議論しました。

結果として、二つ以外の変数は原則に対する例外に適用されるため、必要と判断しました。

例外の適用例

プルダウンに含まれるボタン

ボタンではあるが、一般に添った形状を維持し明らかな角丸を適用しない

クレジットカードエリア

物理カードを模倣し、--rounded-smを適用

タグ（サイズ展開があるコンポーネント）

相対的な角丸比の考慮が必要なため、レギュラーサイズでは--rounded-xsを適用し、スモールサイズでは--rounded-xxsを新規導入・適用

結びに

結果として変更なしの部分を含めて開発チームで約200件のレビューを行い、変更点をリリースしました。
前回のエレベーションのチューニングと同様、大きな変更としてのインパクトは大きくないかもしれませんが、細かなチューニングの積み重ねにより、全体の体験向上を目指しました。
これらの変更により、Zennサイトはさらなる柔軟性と一貫性を兼ね備え、ユーザーが直感的かつ快適にサイトを利用できることを期待しています。

角丸チューニング適用サンプル