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

おしゃれなブログの作り方
キップム
キップム

今、自分のブログを作ってるんだけど、コンテンツや余白の幅ってどのくらいがいいのかな?よくわからないんだけど…

yoko
yoko

その気持ちすごくわかるよ。私も何ピクセルにすればいいんだろう、、、て悩んだから。

キップム
キップム

悩みは解決したの??

yoko
yoko

うん!もちろん。この記事を読めば横幅サイズでもう迷わなくなるよ。

キップム
キップム

わー、教えて。早く知りたい!

スポンサーリンク

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

  • ブログの横幅サイズ(全体、コンテンツ、サイドバー、余白など)で悩んでいる人
  • 細部にまでこだわりたい人
  • デザイン初心者
  • Cocoonユーザー

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

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は大きすぎた

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

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

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

余白は大きく取った方がよい

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

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

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

デザイン初心者でも取り入れやすいルールだった

ルールに従うことでサイズに迷わなくなった

・適当に自分のセンスで作るよりは、秩序ができデザインの質が上がった(と思う)

・隅々まで8の倍数で設定することができると気持ちがよかった

おわりに

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

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

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

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

文章・イラスト: yoko(@_yoko51_

Comment