見やすい・読みやすいデザインを極めたいなら「バーティカルリズム」を学ぼう

デザインが上手い、あるいは下手というのは何によって決まるのでしょうか。

もちろんデザインにセンスが必要である、という主張は存在します。
ある部分までは、経験と勘から湧き出る発想もあるかもしれません。

しかし実際には、デザインには美しく見せるためのルールが存在しています。
熟練のデザイナーの製作した作品は、彼らが知っているにせよ無意識的に学んできたにせよ、ほとんどの場合はそうしたデザインルールに従っているので、結果的に美しく見えるのです。

その中でも、「バーティカルリズム」という言葉を聞いたことはありますか。
バーティカルリズムはデザインを学ぶ上で知っておきたいキーワードの一つです。

今回は、レイアウトを美しく魅せるために知っておきたい「バーティカルリズム」について紹介します。
リズムという言葉をデザインの世界で使うのは珍しいと思う人もいるかもしれません。
実際のところ、どのような意味で使っているのでしょうか。
ぜひ、確認していきましょう。

バーティカルリズムとは

「バーティカル」とは「垂直方向」を意味します。
「バーティカルリズム(Vertical Rhythm)」は、ページの要素同士の縦のスペースをリズミカルに揃えていくことです。
印刷時のタイポグラフィに起源を持つ言葉だと言われています。

バーティカルリズムに気をつければ、単に整っているだけでなく自然な感覚で空間を捉えることができます。

タイポグラフィにおいてバーティカルリズムが重要な理由

バーティカルリズムはデザインにおけるさまざまなところで見かけますが、とりわけ重要なところは、タイポグラフィに関するリズムです。
文字組みに関していうと、バーティカルリズムを整えるのに、一貫したスペースを作成するための共通の基準であるベースラインを活用することが多いです。

実際、下記のように、プリントアウトしたページにベースライングリッドを重ね合わせて、ベースラインを可視化することもあります。

Web上でのベースラインに関しては、line-leightというプロパティを使って調整を行います。
紙上で見るのとは違って、ベースライングリッドに関しては以下のように見えるはずです。

印刷物とホームページ上のベースライングリッドには若干のずれがありますが、これはWebブラウザの性質によるものなので、あまり気にしなくても構いません。
少し違って見えますが、バーティカルリズムを考える上での根本的な考え方は同じです。

このように、タイポグラフィにおけるバーティカルリズムを考える上で重要なのは、ベースラインとベースライングリッドであるということがご理解いただけたかと思います。
次に考えていきたいのは、「一体全体、ベースラインをどのようにして決めていけばいいのか」ということです。

先述した通り、ホームページにおけるベースラインは、line-heightプロパティによって決定されます。
例えば、本文のline-heightが24pxだとすると、ベースラインも24pxということになります。
その場合、バーティカルリズムを適用する際に、次の2つのルールを押さえればいいのです。

1. 要素間の縦の空白を24pxの倍数に設定する。
2. すべてのテキスト要素のline-heightを24pxの倍数に設定する。

この2つのルールを単純に実装すると、以下のようになります。

h1 {
　　line-height: 48px;
　　margin: 24px 0;
}
	 
p {
　　line-height: 24px;
　　margin: 24px 0;
}

このルールを適用すると、以下のように自然な行間で段組みを行うことができます。

左側と右側で、どちらのほうが読みやすいと感じますか？
おそらく右側と答える方が多いでしょう。

なぜこの2つのルールは、これだけシンプルなのにもかかわらず、印象を大きく変えてしまうほどの力があるのでしょうか。

再度、2つのルールを確認してみましょう。

1. 要素間の縦の空白を24pxの倍数に設定する。
2. すべてのテキスト要素のline-heightを24pxの倍数に設定する。

もうお気づきでしょうか。
「24pxの倍数に設定している」という点がポイントです。
このルールは、「反復」の原則と言われている、デザインの基本原則に関係しています。