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

2017年3月3日

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

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

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

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

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

バーティカルリズムとは

「バーティカル」とは「垂直方向」を意味します。
「バーティカルリズム(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の倍数に設定している」という点がポイントです。
このルールは、「反復」の原則と言われている、デザインの基本原則に関係しています。

「反復」の原則とは、フォントの大きさや配色、形などを繰り返すことでリズムを生むためのデザイン上のコツのことです。
リズムが生まれると、全体が整って見えるので、情報量が多い場合には必ず何かしらの反復を用いてリズムをつけるのが必須です。

そして、先ほど見たタイポグラフィに関するバーティカルリズムは、ページ全体で24pxの余白を繰り返すことによって、リズムを生み出しバランスをとっているのです。

しかし、全てのものを24pxで区切ることは到底難しいでしょう。
そこでオススメしたいのは、24pxの倍数か、24pxを2で割った12pxを使うことです。

各要素のmarginやpaddingをこれらの数字の中から選んで使うことで、無意識的であってもちょうど良いバランスを生み出すことができます。

要約すると、バーティカルリズムが重要なのは、デザインにおける「反復」の法則に従っているからです。
反復はリズムを生むだけでなく、バランスを整え、一体感を出す効果があります。

デザインを行う際には無意識にとっている余白ですが、ぜひ次からは「バーティカルリズム」のことを念頭に置いてデザインしてみてください。