はじめまして。
mama&crowdのデザイナー、長谷川彰之介です。
今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して
「最適な値は存在するのか？」
について考えてみたいと思います。
少々長いですが、お付き合いのほどよろしくお願いします。
目次
--------------------------------------------------
【第１部】8の倍数
【第２部】iPhoneのUI
【第３部】グリッドデザイン
【第４部】画面解像度のトレンド
【第５部】黄金比とフィボナッチ数列
【第６部】バナーガイドラインを導入
【第７部】最小余白の設定
【第８部】デザインは8の倍数でできている
【第９部】実例集
【第10部】あとがき
--------------------------------------------------
最初に「余白とブロックサイズ」の説明です。
余白とは「ボックスとボックスとの間」「文字と文字との間隔」を指します。
WEBデザインではマージンやパディングとも呼びます。
ここでは区別せずに、余白と呼ぶことにします。
ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの
ひとつひとつの固まりの大きさ（サイズ）を指します。
【第１部】8の倍数
WEBサイトのUIをデザインしていて悩まされるのが「余白」です。
「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6pxでいこう！」
「10の倍数をベースにしよう。PhotoshopでのShift移動は10pxが基本だし使いやすい」
「9 + 4nをベースにすれば最強かもしれない！」
最適な余白の値は存在するのだろうか？
それとも、好みやセンスの問題でしかないのだろうか？
すぐに答えは出せず、関わるプロジェクトごとに見た感じで決めていました。
8の倍数に気がついたのは、「ディスプレイの解像度別サイズ表」を見ていた時です。
iPhone、Android、Mac、Windows。多くは8の倍数による画面サイズでした。
--------------------------------------------------------
Vector Video Standards2
出典：wikipedia
--------------------------------------------------------
よくみかける数字を、実際に8で割ってみます。
240÷8=30 320÷8=40 480÷8=60 640÷8=80 1024÷8=128 1440÷8=180 1920÷8=240 2560÷8=320
見事に割り切れます。
そしてひとつの仮説が生まれました。
「デザインは8の倍数でつくることができる」
より具体的にいうと、こうです。
「WEBサイトの余白やブロックサイズ、サイトの横幅は、
8の倍数ですべて定義することができる」
これが完成すれば、もう数字で迷わなくなる。
「ゴールはWEBサイトを8の倍数だけで制作できること」
これを実証してみたいと思います。
まずは、この仮説自体をWEBサイト制作の条件とします。
--------------------------------------------------------
１ 余白やブロックサイズは8の倍数で設計
--------------------------------------------------------
【第２部】iPhoneのUI
普段の生活に馴染んでいるもので、8の倍数を基本としたモノがありました。
iPhoneのUIには8の倍数が多く含まれています。
--------------------------------------------------------
Size of iPhone UI Elements
出典：iPhone Development 101
--------------------------------------------------------
iPhone iOS7のホーム画面のアイコンサイズは 120 ×120
iPhone UXガイドラインにおける推奨の最小タップエリアは44px（retinaで88px）
8の倍数でない数字も多く使われています。
しかし、何かベースにできそうな匂いはしてきました。
【第３部】グリッドデザイン
次は「WEBサイトの横幅」に話を移します。
mama&crowdでのデザイン業務は多岐にわたります。
WEBサイトのUIだけでなく、ランディングページやページ内コンテンツも制作します。
そこで、余白同様に難しいのが「WEBサイトの横幅」です。
「YAHOO! は950pxなので、これでいこう」
「最近は横長のディスプレイが多いので1024pxぐらいまでだったらいける」
「ファーストビューを考慮すると、横幅はおさえた方が見やすい」
「最近は横幅を可変にするべき、特に横幅は定義しなくてもOK」
意見は様々で、ネット上を調べても簡単には「この値でお願いします」
という核心的なものに出会えません。
そこでカチリとハマったのが、「960pxグリッドシステム」でした。
WEBサイトの横幅は960pxが適切であると提唱し、そのガイドラインを発表しています。
--------------------------------------------------------
960GRID SYSTEM
出典：960 GRID SYSTEM
--------------------------------------------------------
ちなみに、グリッドシステムとは一定の間隔で縦と横に画面を区切り、
ルールに従ってデザインを行っていくシステムです。
グリッドで情報を整理することで、伝えたい情報が的確に伝わります。
ルールを一部壊すことで、意図的な強弱も作り出すことができます。
--------------------------------------------------------
グリッドシステム-サイトへの有効活用法
出典：coliss
--------------------------------------------------------
この960pxグリッドシステムですが、
WEBサイトの横幅を960pxが理想とする理由に、下記のとおり説明しています。
●最近のモニターは1024x768の解像度を多くサポートしており、
960pxを表示するには十分である。
●960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、
フレキシブルにグリッドの設計を行える
--------------------------------------------------------
ページの幅960pxを基準にして、設計するグリッドデザイン
出典：coliss
--------------------------------------------------------
今回注目した点は、960を分割できる数字として8の倍数を多く含んでいる点です。
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
「8の倍数」を実証するために、WEBサイトの横幅を960pxとして定義できれば、
「デザインは8の倍数でつくることができる」の実証に大きく近づきます。
【第4部】画面解像度のトレンド
ただし横幅が960pxというのは、PCのディスプレイサイズの多くが1024 x 768pxの時代です。
デザイントレンドを掴むには、つねに現状の位置を知り半歩前に進んでいることが肝心です。
現在のPCのトレンドでは、画面サイズは横に長くなってきています。
--------------------------------------------------------
もっとも良く使われるディスプレイ解像度が1024×768から1366×768にアップ
出典：TechCrunch Japan
--------------------------------------------------------
OS別に見てみると、
例えばMacBook Air の11inchで1366×768、
Windows 8の画面解像度は、システム要件として1366×768ピクセル以上と定めています。
今後のことを考慮して、960pxという数字を更新してみます。
1024 : 960 = 1366 : X
X = 1280
解は1280pxです。
この値は偶然か、8の倍数で割り切れます。また1280という数字も見慣れた数字です。
「いきなりこんな大きな画面では作れない」という場合は、
960～1280の間を80の倍数で区切って値を設定してもいいかもしれません。
( 960 1040 1120 1200 1280 )
今回は1280pxを最適値として「デザインは8の倍数でつくることができる」
を実証するための定義として追加します。
--------------------------------------------------------
１ 余白やブロックサイズは8の倍数で設計
２ PCサイトの横幅は1280pxで設計
--------------------------------------------------------
次は、より強固なグリッドシステムを構築するために
話をもっと飛躍させていきたいと思います。
【第5部】黄金比とフィボナッチ数列
自然界でもっとも美しいと言われている比率は、黄金比だと言われています。
黄金比による、美しい長方形の比率は1：1.618になります。
--------------------------------------------------------
黄金比のいろいろ
出典：gakuen
--------------------------------------------------------
次にフィボナッチ数列とは、隣合う数字の和が、
次の数字になって連なっていく数列のことを指します。
1 , 1 , 2 , 3 , 5 , 8 , 13 , 21 , 34 , 55 , 89 , 144 , 233 , 377…
1 , 1 , 2 , 3 , 5 , 8 までを長方形で表すと図のようになります。
この区分の仕方は、最終的にWEBサイト製作の骨子になる重要な比率です。
この比率を使って美しく設計されたとされている、有名なWEBサイトとアイコンの実例です。
--------------------------------------------------------
Twitterのアートディレクター「新デザインは『黄金比』で造られている」
出典：DDN JAPAN
--------------------------------------------------------
--------------------------------------------------------
神秘の調和、アップル社のプロダクトデザインに隠された「黄金比」
出典：DNA
--------------------------------------------------------
話を戻して、
黄金比とフィボナッチ数列の関係をまとめます。
「フィボナッチ数列の隣り合う数字は、黄金比である」
1 , 1 , 2 , 3 , 5 , 8 , 13 , 21 , 34 , 55 , 89 , 144 , 233 , 377…
例) 377 ÷ 233 = 1.61802575107 ≒1.618
以上が黄金比とフィボナッチ数列の関係です。
この黄金比とフィボナッチ数列の関係に、先ほど定義したものを代入します。
--------------------------------------------------------
１ 余白やブロックサイズは8の倍数で設計
２ PCサイトの横幅は1280pxで設計
--------------------------------------------------------
8の倍数はこちらです
8,16,24,32,40,48,56,64,72,80,88,96,104,112,120,128,136,144,152,160…
1280から1.618を割ったあと8の倍数の近似値にします。そして隣り合う数字を減算して数列をつくります。
1280 792 488 304 184 120 64
64より下は計算できません。64を基準として、もう一段階数列をつくります。
64 40 24 16 8 これで8の倍数による2段階のフィボナッチ数列が完成しました。
1280 792 488 304 184 120 64 ｜ 64 40 24 16 8
「隣り合う数字の和が次の数字」となり且つ「8の倍数であること」を満たせています。
最後に、この値をフィボナッチ数列の長方形に代入します。
792 + 304 + 120 + 64 = 1280
にて、4辺の和が1280となりました。
黄金比とフィボナッチ数列の関係も8の倍数デザインの定義として使えそうですので、
3番目の定義にします。
--------------------------------------------------------
１ 余白やブロックサイズは8の倍数で設計
２ PCサイトの横幅は1280pxで設計
３ 隣り合う比率は、黄金比とフィボナッチ数列で設計
--------------------------------------------------------
次は、WEBサイトをつくる上で、抑えておくべき数字の話です。
【第6部】バナーガイドラインを導入
WEBルールの標準として確固たる地位を気づいているバナーガイドライン、
国際ルールとしても共通のものとなります。
代表的なバナーサイズから、参考になりそうな値を抽出します。
--------------------------------------------------------
バナーサイズの国際標準
出典：http://www.yuzuriha.sakura.ne.jp/
--------------------------------------------------------
8の倍数になっている箇所を赤くしました。
実際にどう使うのか、現時点で判断できませんが、無視はできません。
これも、新しい定義に追加します。
--------------------------------------------------------
１ 余白やブロックサイズは8の倍数で設計
２ PCサイトの横幅は1280pxで設計
３ 隣り合う比率は、黄金比とフィボナッチ数列で設計
４ バナーガイドラインを考慮して設計
--------------------------------------------------------
次が、最後の定義です。
【第7部】最小余白の設定
最後に、最小余白の値を設定します。
8の倍数がベースとなっていますので、「8」か「16」か「24」で最小余白を設定します。
最小余白とは「ボックスとボックスとの最小の余白」を指しています。
今回は、最小余白を「16px」に設定します。
【第8部】デザインは8の倍数でできている
WEBサイトを制作する上で、必要な定義がすべて揃いました。
実証の前に、整理をしたいと思います。
まず、今回の目的はこれでした。
具体的な言葉で置き換えます。
そして、使用する定義です。
そして使用する8の倍数の数字たち
それでは、今回はPCの3カラムレイアウトで実証してみたいと思います。
それでは、結果発表のデザインになります。
※クリックで拡大
【結果】
・余白はすべて8の倍数で構成することに成功
・ブロックサイズの90%以上を8の倍数で構成することに成功
・レイアウト構成にフィボナッチ数列と黄金比を盛り込むことに成功
・広告に関しては、8の倍数ではない300x250を入れこんだ
「結論、デザインは8の倍数でつくることができる」
これでもう「余白選び」や「ブロックのサイズ」「WEBサイトの横幅」に
迷うことはなくなります。
マークアップもベースがあれば効率的に制作や依頼できるようになります。
「WEBサイトの余白ルールやブロックサイズ、WEBサイトの横幅は、
8の倍数ですべて定義することができる」
実証は以上になります。
せっかくなので名前とロゴも考えてみました。
Eight Times UI Guideline （エイト・タイムズ・UI・ガイドライン）
実際に使用する場合の、手順です。
例外ルールも設定してみました。
以上となります。これで実証はおしまいです。
最後に、実例集と簡単なあとがきだけ書いて終わりとさせてください。
【第9部】実例集
実際のデザインの現場で試してきた、8Tのガイドラインです。
mama&crowd トップページ
※クリックで拡大
mama&crowd フォームページ
※クリックで拡大
大人のブカツ bk2 スマートフォン
※クリックで拡大
実例は以上です。ルール以上に例外も多く含んでいますので、
「どれぐらい許容してもいいのか？」の参考にはなると思います。
最後はあとがきです。
【第１０部】あとがき
いかがでしたか？
今回は「余白」という切り口で、デザイン思考のプロセスを追いかけてみました。
実は「デザインは8の倍数で間違いない」の証明ではなく、
本題はデザインプロセスの公開にありました。
余白に関していうと、8倍でも6倍でも倍数が混ざっていてもたいした問題ではないです。
情報が整理され伝わりやすく、デザインがキレイであれば基本は言うことありません。
クライアントやプロデューサー、ディレクターがOKを出せばサクっと世に出ます。
されど、余白1つとってもその無限に存在する値の中から選びとるのは
担当するデザイナーであって、必ず理由が存在していると考えます。
色、写真、フォント、サイズ、テイスト、トーン、テクスチャー、グリッド、比率、コピー…
それらは無数にあり、ビジュアルの中に分割されながらも複合的に存在し、
どれひとつとっても、それが正解かどうかの判断が非常に難しいものです。
その反面、多くの経験や研ぎすまされたセンス、あるいは妥協さえしてしまえば
判断は容易です。
さらに、その結果に対しては、ある人は正解だといい、あるひとはNGを出すでしょう。
重要なのは「何故それを選んだのか？」ただひとつの理由だと思います。
それを自分の中で持っているかどうか？考えた時間の総量をもってしてビジュアルに落とし、
勝負できているものがつくれているのか？その上で、仮想敵に挑んでいるのか？
どうせ１つ、たった一つの理由を選ぶなら、デザイナーとしてより良いものを選んでいきたい。
その１つ１つが高精度な選定理由により組み合わさると、
通常のデザインを越える、スーパーデザインを生み出すことが可能となります。
デザインのその先にある、スーパーデザインを生み出すための新しいパーツのひとつとして
今回のプロセスを含めていただけたら、大変光栄なことです。
長くなってしまいました。
また、機会があれば新しいデザインパーツに挑むつもりです。
最後までおつきあいいただき、ありがとうございました。
mama&crowd
designer
長谷川 彰之介
hasegawa_akinosuke@cyberagent.co.jp