【デザイン初心者向け】おしゃれなブログの作り方 〜横幅サイズは8の倍数で作ろう〜

この記事はこんな人にオススメ

ブログ横幅サイズの決め方。結論！

参考にした記事

「ブログのコンテンツやサイドバー、余白は何ピクセルで作ればいいのかな？」と悩んで、いろいろ調べていた時に出会った記事が、

要約すると、iPhone、Android、Mac、Windows、多くは8の倍数による画面サイズであることから、「デザインは8の倍数でつくることができる」という、ひとつの仮説が生まれます。その仮説をさまざまな視点から実証。最終的な結論として、

8の倍数ですべて定義すると「余白選び」や「ブロックのサイズ」「WEBサイトの横幅」に迷うことはなくなる

ということが書かれています（詳しく知りたい方はこちら）。

この記事を読み、

「これでもう数字で迷わないし、ルールにのっとることでサイトが美しく整う！」

とピン！ときたので、実際にブログを8の倍数で作ってみることにしました。

8の倍数ルール ガイドライン

Eight Times UI Guidelineの使い方

1, 横幅を設定する（960 1040 1120 1200 1280)
2, フィボナッチ数列で、上の数字から分解する
3, 最小余白を設定する (8 16 24)
4, バナーサイズを考慮しながら、各サービスに合わせたレイアウトカラムを決定して、一気に解を導きだす

Eight Times UI Guideline 例外ルール

1, 8の倍数で数値が合わない場合は、4の倍数も用いてもよい
2, 罫線の1pxの含め方は都合よく解釈してもよい
3, 8の倍数、4の倍数でも適応が難しい場合は余白ルールを大きく崩さない程度に1px単位で調整してもよい
4, 最終、自分のセンスで判断する

「デザインは8の倍数でできている」より

上記は、参考記事内でまとめられていた、8の倍数ルールを実際に使用する場合の手順。

いくつもルールがありましたが、ワードプレス初心者の私は、8の倍数で作ることだけに意識を傾けました。

ブログの幅を8の倍数ルールで作ってみた

計算機を何度も叩いて出来上がったのが下記のデザイン。

AIが最適な数字を導きだしてくれたらいいのに、、、と思いながらも、夢中で計算をしていました。ピクセル数を調整し、少しずつ秩序あるフレームに変わっていくのが楽しかったです。

スカイブルーで表示されているピクセル数は、Cocoon設定→「ヘッダー」「カラム」「フッター」で全て設定できます。

CSSを編集する必要がないので、初心者でも簡単！

ピクセル数は私個人の考えなのであくまでも参考程度に。もちろんマルッと取り入れてもらってもOKですが、あなたの感覚を最優先に、心地よいな、キレイだな、と感じるデザインにしてもらえたらいいなと思います。

実装しながら感じたこと

参考記事に横幅サイズは1280pxが最適と書いてあったので、全体の横幅サイズを1280にして作りはじめました。しかし、

2カラムの場合、1280は大きすぎてスペースを持て余したのと、作業途中で日本企業のサイトの横幅は950~1000pxが多いと知り、最適値にこだわるのはやめました。

8の倍数ルールは守りつつも自分の感覚を信じ、最終的には1040に。

当初、コンテンツとサイドバーの余白は狭めにしていたのですが、境目がはっきりせずわかりにくいなぁと。

数字を何度も変更した末、しっかりと余白を取った方が、読者にわかりやすく親切という結論に至りました。

ブログ幅を8の倍数で設計してよかったこと

おわりに

ブログをつくるタイミングで、8の倍数ルールに出会えたのは幸運だったと思います。

おしゃれなブログへの道、2歩目になったから。「デザインは8の倍数でできている」の筆者 mama&crowdのデザイナー 長谷川彰之介さんには感謝しかありません。

この記事がブログの横幅サイズに悩んでいる人に届き、迷いがなくなるきっかけになれば嬉しいです。

おしゃれなブログへの道、1歩目が気になる方はこちらをどうぞ。

文章・イラスト： yoko（ @_yoko51_）