好きな「数値」と「単位」の組み合わせ

デザイナーであれば、デザインするときに無意識に好んで使ってる「数値」や、よくお世話になっている「単位」というのがあるかと思います。
「コンテンツ幅を〇〇にすると気持ちよくデザイできる！」とか「本文が〇〇だとh4のfont-sizeは〇〇が落ち着くなぁ」とか。
様々な場面でデザイナーは「数値」と向き合い、その時に最適だと思われる「単位」でデザインをしています。

今回は僕の好きな「数値」と「単位」の組み合わせをランキング形式で紹介していきたいと思います。

・・・

 第5位｜0.05em

CSSで文字間を調整するletter-spacingの値によく使う組み合わせです。
ベース書体が仮想ボディに対してサイズの大きいメイリオの場合は、もう少し文字間開けたくなりますけど、基本0.05emが気持ちいいですね。
きつすぎずパラパラせずの少し窓を開けて換気するぐらいの文字間。。。
最近、RWDといえばvw, vh, vmin, vmaxなどの単位が人気ですが、文字周りであればやっぱり「em」だよね！というデザイナーも多いかと思います。

 第4位｜1.5（単位無し）

これは審査の対象とすべきか迷いました。
冒頭で「数値」と「単位」の組み合わせのランキングと書いておいて、第4位が「単位無し」とか許されるのか。
他を差し置いて、それでもこの「単位無し」をランキングに入れたのには、ちゃんと理由があります。それは、はじめてline-heightを「単位無し」で指定したときの感動が忘れられないからです。
当たり前のことですが、「単位無し」でline-heightの指定をすると、font-sizeに対して入力した「単位無し」の数値をかけて出た積の値が行間になり、そのかけた数値が親要素から孫要素まで継承されるので各font-sizeの行間比率が均一になります。
……これです！これ！行間を均一にする！
紙のデザインだけをやっていた頃、テキストボックスの幅によって、文字間も行間も読みやすいように数値を変えてはいたんですけど、ある程度各テキストブロックの行間比率を均一にしたいなーと。でも簡単に均一にするやり方がわからなかったので、fontサイズごとに行間が均一になるように毎回電卓叩いて計算していました。
それがひとつ指定すればできてしまうだなんて。衝撃でした。
数値の1.5は、モバイルの行間値です。レイアウトにもよりますけどPCのときは1.8くらいが読みやすくて好きですかね。最近はモバイルだけの案件や、RWDだとしてもモバイルファーストでデザインすることが多いので、馴染みの深い方の値として選出しました。

次からはいよいよベスト3！

🥉第3位｜0.25mm

紙のデザインをやる方であれば、馴染みの深い方もいるんじゃないでしょうか。そうです！0.25mm = 1Q！
「Q」とはグラフィックやエディトリアルなどの印刷物をデザインする際に使用されるfont-sizeの単位（級数）のことです。「Q」は“Quarter”の略で、和訳すると「4分の1」という意味なので、「4分の1」 =「 0.25mm」になるということです。文字は「読むもの」ということ以外に、僕は文字に対して「デザインを形成する最小のオブジェクト」という見方もしているので、紙のデザインをする際は、0.25mm（1Q)を最小の単位として設計します。タイポグラフィの勉強をし始めたデザイナー1年目のときに、僕が一番最初に得た知識でもあるので思い出深い組み合わせですね。

🥈第2位｜750px

ハイお待たせしました！やっと登場「px」さんですね。Webデザインを始めてからというもの見ない日はない単位です。
750という数値は、モバイルファーストでデザインする際のコンテンツ幅の「数値」です。理由は単純に僕がiOSイメージでiphone6~7sを基準にして設計するのが好きなだけです。僕の個人スマホがiphone6sなので、家に帰った後とかに自分のデザイン見てムフムフできるからいいですね。
もちろんエンジニアに実装してもらうときはAndroidでデバックもするし、設計の段階から配色、fontなどは考慮してデザインしてます。
最近では一番馴染みのあるコンテンツ幅ですかね。
Webデザインをはじめた時に最初に出会った「単位」ということもあり、1位にしようかなーと思いましたが、やっぱりこの組み合わせを越えることはできませんでした。

さぁ、ついに第１位の発表です！
（ドロドロドロドロドロドロドロドロドロドロ…ドドンッ！）

🥇第1位｜3mm

です！おめでとうございまーす！！！！
紙のデザインをするときは、もはや無意識に⌘＋Kして数値に3mm入れて薬指でEnterパチコーンッ！してるくらい好きです。

理由は2つあります。
まず1つ目が、エディトリアル的に雑誌サイズ〜A4くらいまでのベーシックな用紙サイズの本文級数は基本12Qが読みやすいと言われていて、12Qをmmに変換すると、12Q = 0.25×12 = 3mmになるというのが1つ目の理由です。

もう1つが、実は難しいA4サイズのデザインをする時に3mmが基準にしやすいからです。
……「A4サイズが難しい？一番ベーシックな判型サイズじゃないの？」と疑問に思った方がいると思いますので、まずはなぜA4のデザインが難しいのか？から説明しましょう。

A判の縦横比は白銀比（短辺：長辺＝1：√2[1.414]）になっているので、比率として心地よく、美しいものとして完成しています。完成したものだからこそ、何も考えずにレイアウトすると不安定で貧弱なデザインになってしまいます。完成した形を壊さないように写真やテキストをレイアウトするのは意外と難しいのです。

そこで3mmの登場です。A判は3mm方眼がきっちり収まる判型なので、3mmの倍数でマージンやグリッドを組んでくと、きっちりと揃う部分が揃い、ホワイトスペースも3mmの倍数でできた白いオブジェクトとなるので、視覚的にも美しいレイアウトとなります。それによって紙面に安心感と安定感が出てくる。魔法の数値ですね。3mmの倍数で設計してバシッとレイアウトが決まると、最高に気持ちがいい。

3mmの倍数であれば6mm、9mm、12mmとかよく使います。3mmより小さい値を使いたいときは1.5mm、0.75mm、0.5mm、0.25mmとか
3mm→0.25mmに基準値をスイッチして使ったりします。

長々と1位の理由を説明しましたが、結局、無意識に⌘＋Kして数値に3mm入れて薬指でEnterパチコーンッ！としてしまう僕の行動に、受賞理由の全てが詰まっていると思います！

ここまでベスト5を紹介してきましたが、残念ながら審査対象外となってしまった普段からとてもお世話になっている「数」があるので、今回は特別に「審査員特別賞」を設けて、その「数」を表彰したいと思います！

 ✨審査員特別賞｜12

第1位発表の時にも触れましたけど「本文級数は基本12Qが読みやすい」とか「RWDの際にグリッドを12分割させる」とか、紙でもWebでも側にいてくれた「12」に感謝を込めてこの賞を送りたいと思います。

・・・

僕の「数値」と「単位」の組み合わせランキングはいかがでしたでしょうか？
人によってお気に入りの「数値」と「単位」の組み合わせがあると思うので、もしよければ「僕は〇〇が好き！」とか「私はline-heightもem派！」とか、いろんなデザイナーの自分ランキングを教えてもらえたら嬉しいです。

さぁ明日も⌘＋Kで数値入れて薬指でEnterパチコーンッ！