モデュロールをWebデザインに応用する

モデュロールの仕組み

モデュロールは、身長183センチの人が手を挙げた高さ226センチ、へその高さ113センチなど、人の体の寸法を出発点にしています。

そこから黄金比で割ったり掛けたりして、「赤の数列」と「青の数列」という2つの数の並びをつくりました（モデュロールと黄金比）。

隣り合う数の比は約1対1.618。どの数を組み合わせても、比例が崩れにくいように考えられています。

なぜ画面のデザインに使えるのか

モデュロールの本質は、特定の寸法ではなく、「使う寸法をあらかじめ決めた数の中から選ぶ」という考え方にあります。

画面のデザインでも、余白や文字サイズをその場の感覚で決めると、ページごとにばらつきが出ます。複数の人で作るサイトでは、その差がとくに大きく表れます。

使う数字をあらかじめ決めておけば、誰が作っても同じリズムの画面になります。これは現在の「デザインシステム」と同じ発想です。

ピクセルへの置き換え方

モデュロールの数値をそのままピクセルにする必要はありません。大切なのは数と数の比です。

たとえば基準を16ピクセルとし、1.618を掛けたり割ったりすると、約6、10、16、26、42、68ピクセルという数列ができます。

この中から余白や文字サイズを選べば、どの組み合わせでも比例のそろった画面になります。基準の数を変えれば、数列全体を大きくも小さくもできます。数列を表にして手元に置いておくと、迷ったときにすぐ選べます。

CSSでの使い方

CSSでは、数列の値を変数として一か所にまとめておくと便利です。たとえば「--space-s: 10px; --space-m: 16px; --space-l: 26px;」のように名前を付けます。

余白を指定するときは、必ずこの変数の中から選ぶようにします。数字を直接書かないことが、比例を守るいちばんの近道です。

文字サイズも同じように、本文・小見出し・大見出しを数列の隣り合う値に割り当てると、階層がはっきりします。

文字サイズの具体例

基準の16ピクセルから出発し、比1.25の数列を使うと、13、16、20、25、31ピクセルという並びができます。

本文を16、小見出しを20、見出しを25、ページの大見出しを31ピクセルに割り当てると、段階がはっきりしつつ、急に大きくなりすぎない階層がつくれます。

注記や補足の小さな文字には13ピクセルを使います。すべての文字サイズがこの5つのどれかになるように決めておくのがポイントです。

余白の階層：内側は小さく、外側は大きく

余白を数列から選ぶときは、関係の近いものほど小さな余白、遠いものほど大きな余白にするのが基本です。

たとえば、見出しと本文のあいだは10ピクセル、段落と段落のあいだは16ピクセル、章と章のあいだは42ピクセルといった具合です。

余白の大きさで、どれとどれがひとまとまりなのかが自然に伝わります。建築で部屋と廊下の広さに差をつけるのと同じ考え方です。

黄金比をそのまま使うときの注意

黄金比の1.618倍は、画面の上では差が大きく感じられることがあります。本文16ピクセルに対して見出し26ピクセルは、スマートフォンでは大きすぎる場合もあります。

そのため実際のデザインでは、1.25倍や1.333倍など、もっと小さな比の数列がよく使われます。

コルビュジエも、赤と青の2つの数列を組み合わせることで、細かい寸法を選べるようにしていました。1つの比にこだわりすぎず、中間の値を用意しておくのがコツです。

8ピクセルグリッドとの組み合わせ

画面のデザインでは、すべての寸法を8の倍数にそろえる「8ピクセルグリッド」もよく使われます。

モデュロール風の数列と8ピクセルグリッドを組み合わせるには、数列の値を最も近い8の倍数に丸める方法があります。16、24、40、64のような並びです。

比例の考え方と、実装しやすい区切りの両方を生かせるため、実務では扱いやすい方法です。

カラム幅とレイアウト

2つのカラムを並べるとき、幅の比を約62対38にすると、黄金比に近い分け方になります。本文と補足欄、写真と説明文などに使える比です。

ただし、画面の幅はスマートフォンからパソコンまで大きく変わります。狭い画面では1列に並べ、広い画面でだけ比例の分け方を使うのが現実的です。

比例は、画面の大きさに合わせて使い分けてこそ効果を発揮します。写真の縦横比にも同じ比を使うと、画面全体がそろって見えます。

人の体から出発するという考え方

モデュロールが大切にしたのは、人の体の大きさを基準に寸法を決めることでした。

画面のデザインでも、指で押しやすいボタンの大きさや、読みやすい1行の文字数など、人の体と目に合わせた寸法が基本になります。

スマートフォンでは、指で押すボタンの高さを40ピクセル以上にするのが一般的な目安とされます。

比例の数列は、その上で全体を整えるための道具です。数字の美しさだけでなく、使う人の体を出発点にするという考え方こそ、コルビュジエから学べることです（モデュロール）。

デザインシステムとの関係

近年のWebやアプリの開発では、色や文字サイズ、余白をあらかじめ決めて共有する「デザインシステム」がよく使われます。

決められた値の中から選ぶことで、たくさんの人が関わっても画面の統一感が保たれます。

コルビュジエがモデュロールで目指したのも、多くの人が同じ物差しで設計できるようにすることでした。建物と画面という違いはあっても、発想はよく似ています。

印刷物やスライドにも使える

数列の考え方は、Webだけでなく、チラシや名刺、プレゼンテーションのスライドにも使えます。

文字の大きさの段階と余白の段階を、それぞれ4〜5種類に絞って決めておくだけで、仕上がりの印象は大きく変わります。

「なんとなく」で決めていた寸法に、理由を持たせる。それがモデュロールの考え方を日常の仕事に生かすいちばんの方法です。

よくある誤解

モデュロールは「1945年に完成した」と紹介されることがありますが、研究は1940年代を通じて続けられ、考え方をまとめた本『モデュロール』が出版されたのは1950年です。

また、「黄金比を使えば必ず美しくなる」わけでもありません。比例は、文字の大きさや色、余白の量など、ほかの要素とのバランスの中で働きます。

数列は、判断を助ける物差しであって、答えそのものではない。そう考えておくと、道具として長く使えます。