もくじ

Webデザインは8の倍数を使うとスッキリきれいに仕上がる!

ハウツー
蛙のicon

こんにちは、蛙です。
最近は一般の方でもWordpressなどを使ってブログを作成することが多くなり、Webデザインへの関心も高まってきていると思います。 自分好みのサイトができるようになると本当に楽しいですよね!
今回は私が日頃行っている「8の倍数を用いたWebデザイン」についてご紹介いたします。 個人的にはかなり気に入っているので、気になった人はぜひ自分のサイトにも取り入れてみてください。

8の倍数を用いたWebデザイン

8の倍数を用いたWebデザイン
ちゃちゃっとサイトっぽいものを作ってみました。 フォントサイズやカラムの横幅、padding、marginなどに8の倍数を使っています。
サイトデザインとしては至って普通ですが、特に不自然に感じる部分もなく無難に落ち着いていると思います。

なぜ8の倍数が良いのか?

おそらく普通の人の感覚だと、5刻みの方が馴染みがあり使い勝手が良いと感じると思います。 実際に他の方の作ったサイトを見てみると、10px、15pxなど5の倍数でデザインされているケースをよく見かけます。
しかし、5の倍数を用いたデザインは不自然な仕上がりになりやすいので、よっぽどデザインに自信のある方以外はやめておいた方が良いように思います。
以下に8の倍数デザインの優れている点を4つ挙げてみました。

remが使いやすくなる

いきなり少し専門的な話で申し訳ありません。 remとはpxと同様に、CSSでサイズを指定する際に使う単位の1つです。
remについて語るとそれだけで1つ記事が書けるくらい複雑なので、今回はこういう単位があるということを覚えておく程度で大丈夫です。 また、界隈では「pxよりremを使った方が良いよ」という意見が多いみたいです。
なぜ文字や余白をremで指定する?その理由はアクセシビリティ!|意識の高い時に雑記
font-size, padding, margin, line-height などは、px単位よりもrem単位で指定する風潮があります。 ではなぜrem単位を使うべきなのか。アクセシビリティの観点から説明します。 アクセシビリティは「情報へのアクセスのしやすさ」のことです。 WEBにおけるアクセシビリティとは、「高齢者・障害者を問わずあらゆる人が情報にアクセスできるようにしましょう」というお話です。 フォントサイズや余白をピクセルで指定すると、「目が悪いからブラウザの文字サイズは大きくないと困る」というユーザーをフォローすることができません。 「目が悪い〜」というユーザーとして想定できるのは、弱視(ロービジョン)の方や、高齢者の方が考えられます。 なぜそういった方をフォローできないかというと、px単位はブラウザの設定でフォントサイズを変更しても、その影響を受けないからです。 例えば、以下のようなCSSで、font-size, line-henight, margin, padding をピクセルで指定します。 html { font-size: 62.5%; } p { background: #eee; border: 1px solid #333; font-size: 16px; line-height: 24px; margin: 10px; padding: 10px; } 設定を変更していないブラウザでは以下の画像のように表示されます。 今度は、ブラウザの設定でフォントサイズを大きく変更した場合です。 以下の画像のようになります。 なにも変化しません。 大きな文字でなければ認識できないユーザーにとっては、情報にアクセスができない(文章が読めない)状態と言えます。 では、次は font-size のみをrem単位に書き換えてみましょう。 p { background: #eee;
https://lifehackdev.com/ZakkiBlog/articles/detail/web13
このremという単位についてですが、何も指示していないデフォルトの状態では1rem=16pxに設定されています。 16px…つまり8の倍数ですね! 8の倍数によるデザインはremとの相性がバツグンなんです。
デフォルト状態でremを使って5の倍数を表現するのは少し難しいです。 remを使わずすべてpx表記で管理するか、ルートのフォントサイズを弄るなどのひと手間が必要になります。

作業時の迷いが少なくなる

実際に8の倍数でデザインしてみると、8というのはかなり絶妙な数字だなと感じます。 数値に対する迷いが少なくなり、作業効率もアップした気がします。
例えば、0~40の中から数字を選ぶ場合、5の倍数だと、
5, 10, 15, 20, 25, 30, 35, 40
上記の8つの選択肢がありますよね。
一方、8の倍数だと、
8, 16, 24, 32, 40
上記の5つです。 5の倍数から選ぶ場合と比べて、選択肢が3つも減りました!
人間は選択肢が増えるほど疲れやすくなるとよく言われます。 数値的な選択肢が減るというのは、作業者の心理的な負担軽減にもなるわけです。

小さな数字もモヤっと感なく自在に取り扱い可能

小さな数字を表現する場合にも、8を基準にすると非常に便利です。 8は偶数なので、半分にすると4、さらに半分にすると2、さらに半分にすると1という風に、どんどん割っていっても端数が出ず綺麗な数字になります。
5は奇数なので、半分にしただけですでに2.5と小数点以下の数字が出てきます。 このような微妙な数字を使ってスタイル管理するのは個人的は不快感があって嫌なのですが、小数点以下を端折って2か3にすると「5の倍数でデザイン」という根本のスタンスから逸れてしまいます。 また、このような妥協を繰り返すと、見た目的にも汚らしいデザインになりやすいです。

画面解像度は8の倍数が多い

PCやスマホのディスプレイの解像度は、8の倍数になっていることが多いです。 Stat Counterによると、現在世界で最も使用されているモニターの解像度は、1,920x1,080となっています。
1,920=240×8
1,080=135×8
縦・横いずれも8の倍数になっていますよね。 8の倍数でサイトをデザインすると、どんなデバイスで閲覧しても端数が出ずにきっちりとした印象のサイトに仕上がります。
💡
最近ではスマホなどの小型デバイスを中心に、8の倍数ではない解像度のディスプレイが採用されるケースも増えてきました。 なので、こちらのポイントはあくまでも参考程度にしておいてください…。

デメリットは?

ほとんどありません。
「8の倍数をいちいち計算するのが嫌」という人もいますが、その点はremを使えば解決します。 remは慣れればかなり直感的に使用できるようになるので、これからWebデザインを始めるという人は率先的に使っていくと良いです。
また、CSSではcalc()という関数を使って、計算式でサイズを指定することもできます。 使い方は以下の通り。
/* pxで指定 */ width: 32px; /* remで指定 */ width: 2rem; /* calc()を使って指定 */ width: calc(8px * 4);
3パターンの記述方法がありますが、指示内容としてはどれも同じことです。 「計算は苦手、でもremも嫌」という人は、calc()を使ってみるのも良いかもしれませんね。 ただ、pxやremを使う場合と比べるとかなり記述量が増えるので、最終手段のような気もしますが…。

まとめ

今回は8の倍数を使ったWebデザインについてご紹介しました。
8の倍数を使えば、センスのない私のような人間でもそこそこ整ったサイトを作ることができます。 自分でスタイルシートを弄ってみたけど、いまいち統一感に欠ける・ごちゃついた印象が拭えないという方はお試しあれ。
蛙のicon
ひょんなことからIT業界に迷い込んだ1匹のカエル。知識ゼロからのスタートで四苦八苦。特にJavaScriptが怖い…。