2016.05.16

8の倍数でWebデザインしてみてわかったメリット・デメリット

Webデザイナーのみなさんこんにちは。Maromaroの私です。

Webサイトをデザインする際、余白やブロックの値に5の倍数を使用するのが一般的です。
私も基本的に5の倍数でデザインをしていましたが、何年か前にこちらの記事を読みました。

デザインは8の倍数でできている
http://ameblo.jp/ca-1pixel/entry-11837685575.html

この記事の内容は、サイトデザインの際に8の倍数を基準にすると良いよ、ということが書かれています。
要点としては以下のようなものです

・様々なディスプレイが8の倍数でできている
・ iPhoneのUIも8の倍数でできている
・ 8の倍数を基準にしたデザインのガイドラインがあれば、それに従ったデザインは合理的でかつ美しくなる
・また、優れた造形に共通する数値である黄金比も導入する
・ガイドラインがあることで、サイト幅、余白、ブロックのサイズに悩まなくなる
※詳しくは記事を読んでくださいね

記事を見た私は、当時自分のサイトデザインは根拠に乏しいと感じていたこともあり、「こいつぁ～いいぜ！」と早速実践してみました。その後何年か、状況に応じて8の倍数ガイドラインを実践してみて分かったことを紹介します。

実践したこと

まず、記事内では最終的に下記のような、8の倍数デザインガイドラインが出来上がります。

Eight Times UI Guidelineの使い方
1. 横幅を設定する（960 1040 1120 1200 1280）
2. フィボナッチ数列で、上の数から分解する
3. 最小余白を設定する（8 16 24）
4. バナーサイズを考慮しながら、各サービスに合わせたレイアウトカラム決定して、一気に解を導き出す
例外ルール
1. 8の倍数で数値が合わない場合は、4の倍数を用いてもよい
2. 罫線の1pxの含め方は都合よく解釈してもよい
3. 8の倍数、4の倍数でも適応が難しい場合は余白ルールを大きく崩さない程度に1px単位で調整してもよい
4. 最終、自分のセンスで判断する

これを、以下のような感じで実行しました

1. 余白やブロックサイズは8の倍数で設計
2. PCサイトの横幅は960px。
3. 960pxを最大値とした8の倍数の近似値によるフィボナッチ数列（960 592 368 224 136 80 … ）を用意。これは隣り合う数字が黄金比なので、バナーなどのサイズに使用。
4. 最小余白は8px
5. おまけに、フォントサイズやlineheight（行送り）の値も極力8か4の倍数で設定

以下は、制作したとあるサイトのワイヤーフレームの再現です。

まあ、ふつうじゃない？ってかんじですね。

こんな感じで8の倍数が使われております。
意外と、隅々まで8の倍数だけで設計することができます。ちょっと気持ちいい。

結果

デザインが美しく、素早くなった

まず、元記事の言う通り、数値で悩みにくくなるためデザインが早くなりました。0から100までの間に、5の倍数は20ありますが、8の倍数は12です。つまり、何かのサイズ決めるとき、8の倍数の方が選択肢が少ないので悩む時間が短くなり、早く仕上げられます。5の倍数の場合、余白は20pxがいいのか、25pxがいいのか悩むところで、8の倍数だと24px一択になります。

また、8の倍数の方が、5の倍数よりも割り切りやすいため、デザイン上で端数が出にくいです。これは便利だった点です。例えばコンテンツエリアを余白を入れつつ複数に分割するようなとき、5の倍数基準だとわりとすぐに小数点になってしまったりしますが、そのような端数が出にくいです。

そして、より美しくなりました。値の選択肢が少ないということは、最終的に採用される数値の数も少なくなるということです。余白を統一するというのはすべてのデザインにおける大前提的なテクニックですので、仕上がりが良くなります。

この辺りが、最も大きなメリットだと言えます。

もちろん5の倍数で美しくすることだって当然可能なのですが、あまり慣れていなくても手軽に美しくできるということです。なんだか化粧品の宣伝みたいになってきましたね。

コーディングはやはり大変

最終的に使われている数値が少ないということは、コーディングでも使う数値が少ないということです。その点ではコーディングが楽だと言えます。

ただ、やはり8の倍数を使用したコードは見にくいです。

margin:20px 10px 40px;
padding:30px 20px;

まあ、整然としていて手を加えやすいです。

margin:32px 16px 64px;
padding:32px 24px;

ちょっと戸惑いますね。「余白を1.5倍ずつ増やしたいな…」というときなど非常にわずらわしいです。

慣れれば問題ないかもしれません。実際私は、2-3サイトコーディングするうちに慣れてきて、スピードもさほど変わらなくなりました。ただ、掛け算九九で8の段に苦戦した人などは結構大変なのではないでしょうか。

これが8の倍数でデザインする大きなデメリットです。

そもそもなぜ5の倍数が一般的かというと、数字自体が十進法だからです。根本的に5の倍数はコーディングにおいて合理的であり、ゆえに基準なのです。これはデザイン段階でもいえることで、デザインソフトの数値入力や移動も十進法が基準なので、8の倍数デザインは操作の点では手間がかかります。

また、コードが見にくいということは、複数人でサイトを管理する場合の障害にもなります。制作者が複数いたり、サイトが自分の手を離れる場合、他の担当者と数値のガイドラインについて意識統一をすることが必須であり、でなければ「592×368」という数字を見て、すげー適当に数値を決めてるんだと思われてしまいます。

黄金比はよくわからん

そしてフィボナッチ数列を使用した黄金比ですが、これはいまいち価値を感じませんでした。

メインスライドとかバナーのサイズに黄金比を検討したりしましたが、最終的にはやめることが多かったです。適応がめんどくさいわりに効果が感じられないように思います。上記のサンプルでも、結局黄金比の矩形は使用していません。

最近は以下の記事にあるような、黄金比に懐疑的な意見も散見されますし、鉄球を回転させる以外にはあまりあてにしない方がいいかもしれません。

「黄金比」はデザイン史における最大の都市伝説なのか？
http://gigazine.net/news/20150414-golden-ratio-biggest-myth/

鉄球の回転の意味が分からない人はこちらから。鉄球が登場するのはこちらの第七部ですが、第一部から読むことをお勧めします。
[amazonjs asin=”B005IW5U5U” locale=”JP” title=”STEEL BALL RUN ―ジョジョの奇妙な冒険Part7 コミック全24巻完結セット (ジャンプコミックス)”]