2019.08.01

行間を基準としたバーティカルリズムをWebデザインに使用してみて

今までWebデザインをする際、垂直方向の余白はベースとなる最小のpxを決め、その数値の倍々になる値を使用してデザインをしていました。
例えば、最小の値を10pxとした場合は、20px/40px/80pxのような規則性です。
しかし、行間を基準としたバーティカルリズムを利用した方がキレイかつ効率的にデザインができるのではと思い、いくつかのプロジェクトで試してきた感想をまとめます。

良かったところ

スマホやブログ記事などのシングルカラム縦積みレイアウトがキレイに見える

垂直方向に一定の規則性で反復することで統一感と安心感を与えられるのがバーティカルリズムの良さのため、スマホやブログ記事のように要素を縦積みにする場合はかなり気持ちいい感じに仕上がりました。
特にスマホの場合は画面を文章が占有していることが多く、縦のリズムがハッキリするためPCよりもスマホで使用した方が、個人的には効果を感じました。

また、ブログ記事などpタグとpタグが並んだ時のマージンを1行空きにすると、メールやメモアプリの1行空きと同等の見慣れた見た目になるため、違和感は感じにくいように思いました。

規則づくりがスムーズ

ベースになるフォントサイズと行間を決めるだけなので、規則づくり自体はあっさりできました。
例えば、文字サイズはちょっと大き目が良いから16pxに、行間は広めの余白が良いから文字サイズの2倍で、という具合に2つの値を決めるだけで済みます。

行間を利用したバーティカルリズムでは、「1行空き」「2行空き」といった具合に、行を活かした余白設計になるため下記のような規則を利用しました。

改行
0.5行
1行
1.5行
2行
2.5行
3行

よく使うのは1行ですが、設計によっては1行空きだとスペースが広がり過ぎてしまう場合も多々あったため、改行や0.5行といった細かい数値もあった方が使い勝手が良いかと思います。

計算で数値を求められる規則なので、あらかじめエクセルやNotionなどのツールで計算式さえ用意しておけば、スムーズに余白設計ができるため効率的で良いなぁと感じました。

「1行空き」などの変数を作ればコーディングが楽

使う余白が限られるため、上記7つ分の変数を作り、デザインに合わせて「1行空き」などを使用すれば良いため、いちいちpxを測る必要がないのでサクッとマージンの指定ができます。
ただ、後述しますがline-heightの仕様上あまりシンプルにはいかないので、そこまで恩恵を受けるような要素ではないかもしれません。

レスポンシブ化しやすい

「1行空き」などの余白をremやemで指定さえすれば、スマホとPCでベースとなる文字サイズを変えるだけで対応が済みます。
また、スマホ・PC共に1行空きにしている場合は共通のコードで実装できるので、特にブログ記事ページなどではスムーズにレスポンシブ対応ができます。
色々な事情でスマホデザインが無いような時も、それっぽい見た目にサクッとできたので、コーディングをかなりスピーディに対応できたような印象があります。

悩みどころ

PCでは効果的じゃないのかもしれない

本文組の行間を基準にしてデザインをしたため、文章量が少なかったり、文章そのものがないようなページでは、基準が見えずリズムを感じにくいため、あまり効果的ではないようにも感じました。

また、Webの特性上、サイトの一部しか画面には表示されないため、基準となるリズムを感じにくいのではないかとも思います。
全体を俯瞰して閲覧できる本や冊子であれば良いのですが、一部しか見えないWebでは少し難しいのかもしれません。

ただ、一部しか見えないということは、部分的に最適化させやすいということでもあると思いますので、コンテンツごとの文章に合わせてリズムを作っていけば良いのかもしれません。

計算、計算、計算

Webにおける行間の仕組み上、計算が必須になります。
ざっくり言うと、文字の上下に余白ができるため、1行空き = 行間の値にはなりません。

下記サイトの「行間の仕組み」を読むとわかりやすいかと思います。
参考：【CSS】line-heightで行間を調整する方法：おすすめの値は？

このような仕組みのため、文字サイズ16pxに行間32pxとした場合、1行空きは48pxとなります。
計算式としては、「行間 + (行間 – 文字サイズ) / 2 」という感じでしょうか。
これをデザイン制作時に意識しながら作ることになり都度計算になるのでかなり大変でした。

僕の場合はNotionのテーブルやPhotoshopのスクリプトを利用して、簡単に算出されるような仕組みを作ったため、計算する手間がだいぶ省かれましたが覚えていられないため、都度確認が必要になる分手間はかかっているように思います。

コーディングでは、1行空き = 48pxとして指定をしてしまうと、行間の仕組みによって余計な隙間ができてしまいます。
そのため、垂直に並ぶ要素の関係を見ながら計算して、上手いこと調整をする必要があるので、計算にしんどさを感じました。
（デザインをきっちり再現しようと思うと、どのみち必要なことではありますが…。）

やっていて思いましたが、計算の兼ね合いからデザインよりもコーディングの方が正直しんどいかもしれないです。

まとめ

Webという媒体の性質上、一つのリズムをサイト全体に使うのは少し難しい場合もあるので、コンテンツに合わせて複数の基準を作っても良いかと思います。
例えば、一番多く使う文章スタイルのリズムをメインに使いつつ、コンテンツごとに画面を占める割合が多い文字のリズムを作り直すという方法です。

キレイに見せるための部分対応はどうしても必要になりますが、部分対応をやり過ぎてしまうとコーディング時にかかる手間が増えてしまいます。
デザインの手間・コーディングの手間、それぞれ折り合いをつけながら、使えそうなところで、ほどほどに使っていけると良いかと思います。

一定のリズムは確かにキレイに感じますし、個人的にはシングルカラムの縦積みや、スマホで効果的な印象を受けたので、もう少し使い方を考えつつ、引き続きバーティカルリズムを使用していきたいと思います。