こんにちは
余白を広め隊、隊長のSayuです☺
おしゃれなブログを目指すうえで一番大切な事。
それは、「 よ は く 」です。
断言します。
余白を制する者はデザインを制する！！！
余白がないことは、実はブログがダサくなる原因に💦
余白を作って、オシャレ & 読まれるブログを目指そう！
この記事はこんな人におススメ▼
- おしゃれ & 見やすいブログにしたい人
- せっかく書いた記事を最後まで読んでもらえない。と悩んでいる人
- Cocoonブロガー (他のテーマでも使えるので、ぜひ読んでみて下さい)
- アイキャッチ画像作成に自信がない人
私は余白を意識するようになってから離脱率が下がって、
最後まで読んでくれる人が増えました☺
それでは今回は、「余白で垢抜けたブログを作る方法」についてご紹介します☺
おしゃれで見やすいブログに必要な「余白」とは
余白とは単純に、「何もない空間」のこと。
実はデザインにおいて、一番大切と言われているポイントなんです。
余白は、「空間をデザインする」と言われているよ！
「余る白」と書きますが、決して無駄にしてはいけない部分！
まずは、余白がもたらす効果についてご紹介します☺
おしゃれで見やすいブログ｜余白の効果
文が読みやすくなる
文章の周りに余白がないと、
「読みにくい記事」になってしまいます。
例えばこちら▼
パッと見たときに「読みたい！」と思うのはBではないでしょうか。
Aは文字が詰まっててウッってなる💦
Aは一つ一つの文字は大きいですが、
そのせいで互いに干渉しあってしまい、逆に見ずらい文章に。
「文字が大きくて詰まっている」よりも
「文字が小さめでも余白がある」方が見やすいんです！
”文字が大きい”＝”見やすい”
じゃないんだね！
そして不思議なことに、
AよりBの方が文字数が少なく見えませんか？
文字数が少ない方が読者はストレスを感じないから、
「読まれるブログ」に！
コンテンツが分かりやすくなる
文字の間だけでなく、
コンテンツとコンテンツの間にも余白は重要です。
余白の有り無しでこんなに違います▼
Bはグループごとに分かれていて見やすい！
また、「ゆったりした心地よいデザインになる」というメリットも♪
記事と記事。写真と写真の間隔が狭いと、
Aのように圧迫感が出てしまいます。
Aのデザインはスーパーのチラシなどでよく見られ、
「暑苦しい、ごちゃついたイメージ」に。
Bのように余白を多く取り入れると、
「エレガントさ、高級感」のあるサイトに仕上げる事ができますよ☺
目立たせたいところを際立てる
余白は、アピールしたい部分を際立たせる効果があります。
タイトルや大事な部分はなるべく大きくしてインパクトを出したいところですが、
あ・え・て 周りに余白をとりましょう！
余白ありとなしを比べると、、▼
文字の大きさは変わらないのに
見やすさが全然違う！！
このように、余白には情報を引き立たせる効果があるんです！
次に、サイトに余白を取り入れる方法を見ていこう！
cocoonをおしゃれにカスタマイズ｜余白の作り方
「Cocoonに見えない！」と言われるおしゃれなサイト型HPを作る、
余白の取り入れ方をご紹介します☺
Cocoonカスタマイズ：文と文の間に余白をつくる
まずは記事内の文章に余白を取り入れましょう。
文の間隔を開けるために、
「行間と行の高さ」を調節していきます。
「行間と行の高さ」は以下の部分を指します▼
Cocoonの初期設定は、行の高さ 1.8 / 行間 1.4em になっています。
文字の間にゆとりを持たせるため、当サイトでは
行の高さはそのままで、
行間を1.4em→３emに変更しています。▼
行間が広い方が読もう！って思えるし
内容もスッと入ってくるね☺
「Cocoon設定」→「本文」で、行の高さと余白を変えられます▼
好みに合わせて余白の幅を調整してね♪
Cocoonカスタマイズ：区切りをなくす
つぎに、”セクションごとの区切りを無くして空間を作る” という方法。
Cocoonでは、サイト背景色を好みの色に設定できますが、
メインカラムとサイドバーの背景は白いまま残ってしまいます▼
これだと、「The ブログ、The Cocoon」！って感じがしませんか？
おしゃれサイトのホームページ風にするために、
当サイトではメインカラムとサイドバーを、全体の背景色と統一しています▼
仕切りを無くすと、広々としたおしゃれなサイト型デザインに👍
仕切りを無くす方法を解説します♪
.main,
.sidebar,
.footer {
background-color: #カラーコード;
}
- バックアップを保存しておく
- 元のCSSコードをメモ帳などに保存しておく
- 当コードによるデザインの崩れや動作不良があっても、責任は負えませんのでご了承下さい
バックアップの方法が分からない💦
という方は以下を参考にしてください。
初心者向けにわかりやすく解説されています☺▼
【Cocoonのバックアップ方法】
【Cocoon】設定のバックアップ保存と復元の手順｜WordPress
【Wordpressのバックアップ方法】
【WordPressのバックアップ】BackWPupの使い方を徹底解説！
次に、CSS追加の手順を説明するよ♪
②「追加CSS」を選択
③「コードを張り付ける」→「公開」！
「薄めのカラー」がおススメです☺
淡いスモーキーカラーで「優しいイメージ」を出しています。
サイトの背景色が決まらない💦
という方には、「3色だけでセンスのいい色」がおすすめ。
簡単にオシャレな配色が見つかります☺▼
私は配色について自信がなかったのですが、
簡単にイメージ通りの色を決める事ができました！▼
クール、ポップ、ナチュラルなど、それぞれのイメージごとに合う色を教えてくれて、あなたが作りたいサイトのイメージを実現することができます。
Cocoonカスタマイズ：背景色を統一して余白を作る
サイト全体に余白を取り入れる為、
ヘッダー、グローバルメニュー、おすすめカードの背景を統一する。
という方法です。
それぞれの名称 & 位置は以下を参考にしてください▼
※当サイトはグローバルメニューをヘッダー上に設定しています
グローバルメニューとおすすめカードの設置方法は
ヒトデさんのYoutubeで分かりやすく説明されています▼
それでは本題に入りましょう！
ヘッダー、グローバルメニュー、おすすめカードの色が
サイト背景色と異なる場合がこちら▼
すべてのエリアがくっきり分かれていますね。
余白がないせいで、余裕のない見た目になってしまっています。
おすすめカード同士もくっついていて、なんか窮屈だな。。
と感じたので、思い切って全ての背景色を統一してみました！▼
さっきより余白ができて、すっきりした見た目になったね☺
柔らかいイメージのサイトに仕上がりました♪
背景色を揃える方法を解説していくよ♪
背景をサイト全体のカラーと統一して作りましょう。
私はCanvaを使っています♪
以下の手順でヘッダーとグローバルメニューの色を統一できます。
(オリジナル画像を作成した方も、同じ方法でグローバルメニューの色を変更可能です)▼
サイト全体の次は、アイキャッチにも余白を取り入れて、
読まれる記事を目指そう！
アイキャッチに余白を取り入れる
サイト全体や記事だけでなく、
記事の顔とも言える「アイキャッチ」にも余白は重要です。
裏ワザを紹介しちゃうよ♪
アイキャッチ：視線の先に余白をとる
アイキャッチに人物画像を使いたい場合、視線の方向に余白を取りましょう！
視線の先は「未来」、反対側は「過去」を表します▼
未来の方に大きく余白をとることで
「喜び、可能性、明るい未来」を表せるので、
「ポジティブな印象」を与えるアイキャッチに仕上がります。
アイキャッチ：素材のトリミングを工夫する
食材の画像を使う場合は、あ え て素材を全て写さないようにし、
余白を作りましょう。
2種類の画像を比較すると、、
【素材をすべて移した場合】▼
なんかさみしい、、迫力に欠けるね💦
【素材をカットした場合】▼
迫力満点！おいしそう～！
このように、あえて目立たせたい部分を見切らさせて
周りに余白を作ると、主役を引き立たせる事ができます。
アイキャッチ：文字にも余白を
文字周りにもしっかりと余白をとりましょう。
文字と文字の間に「半角スペース」を取ると、
かなり見栄えが良くなります！
【余白なし】▼
【余白あり】▼
ゆとりが出て、見やすくなったね！
おしゃれで見やすいブログのカスタマイズ
ブログデザインにおいて、余白は「命」と言えるぐらい
大切にしたい部分という事ですね。
「けっきょく、よはく」では、素人でも「垢ぬけたデザイン」を作る方法が学べます
▼
悪いデザインと良いデザインが比較されていて、
どうしたら「見やすいデザイン」が作れるのかが一目でパッと分かります。
余白だけでデザインが桁違いによくなるんだ！
と気づかされました。
余白だけでなく、配色やフォントについても豊富に紹介されている。
という点でもポイントが高いです👍
アイキャッチやブログの参考になるので、気になる方は是非☺
見やすい！余白を取り入れた参考ブログ
この記事を参考に余白を取り入れてくれた
ブロガーさんを紹介するよ！
当記事を参考にして下さり、ありがとうございます！
感謝の気持ちを込めて、サイトをいくつかご紹介します♪
デザインの参考にして下さいね☺
「ブログ全体の余白」と
「記事内の余白」で分けて紹介するよ！
「ブログ全体の余白カスタマイズ」参考サイト
いいねこ。blog
主婦、いいねこさんの「いいねこ。blog」は
好きなこと、趣味、や生活にちょっと役に立つことなどを発信する雑記ブログ。
引用元：いいねこ。blog
当ブログと同じCocoonを使用されています☺
この記事で紹介した「区切りを無くす方法」を活用してくれているので
全体的にゆとりのある広々としたデザインに♪
ヘッダーとブログ全体の背景色も統一されているね！
オレンジ・グリーン・ベージュの３色がサイトカラーで
温かい印象を与えてくれるおしゃれブログです☺
徳島・田舎ブログ
主婦、naoさんの「徳島・田舎ブログ」は
徳島県に旅行する時は絶対に見ておきたいブログです。
雑記記事も楽しめます♪
引用元：徳島・田舎ブログ
全体は少し暗めのベージュで統一されています！
特に「おすすめカード」が可愛い💛
四角いはずのおススメカードですが、ブログの背景色と合わせることで
イラストが浮かび上がっているように見えますね☺
余白が沢山あって見やすい！感動です！
mapleblog
サラリーマンの生活、趣味のサッカーなどについて発信されている
「mapleblog」もおしゃれ過ぎる！
引用元：mapleblog
ヘッダー、おすすめカード、記事の背景すべてを
淡いブルーで統一されています。
なんと、
おすすめカードの外枠と、
カテゴリーごとのアイキャッチの色がそろってる！
アイキャッチの色がカテゴリーごとに違うから
見やすい！
かなり手の込んだデザインに感激しました！
our comfy home
古民家平家暮らしのkasakoさんが運営されている
「our comfy room」は犬との暮らしや古民家暮らしについての情報が満載です。
引用元：our comfy room
グレーをメインに、白と黒で統一された
何ともシンプルでおしゃれなブログ！！
ヘッダー、メインカラムと全体の背景色と合わせる事で「余白」が生まれています。
いろんな種類のグレーでまとめられていて、
シンプルだけど個性のあるブログに♪
おおきど日和
OLのおおきどさんが運営されている「おおきど日和」は
美しいもの、おいしいもの、プレゼント選びなどを発信されている雑記ブログです。
引用元：おおきど日和
おおきなヘッダー画像が印象的ですね☺
ヘッダーが画面いっぱいでも、余白のおかげで圧迫感がない！！
余白のある画像をつかった
アイキャッチも参考になる！
全体が淡いグレーで統一された、おちついた雰囲気のブログです。
たらまよログ
主婦、まよさんが育児・転勤生活・ブログ等について発信されている
「たらまよログ」
引用元：たらまよログ
淡～いパステルカラーでまとめられている、優しい印象のブログですね！
おすすめカードに余白があるから
お花のボタンみたいで可愛い💛
ふんわりしたイメージに仕上げたい方は
こんな風に薄めのブルーを背景に使うと良いですね👍
まんもすばなな
元保育士で2児のお母さん、まんもすばななさんの
「まんもすばなな」は日常についての雑記ブログです。
引用元：まんもすばなな
まっしろな背景に「まんもすばなな」の大きな文字がド～ン！と構えています！
それでも全く圧迫感を感じさせないのは、余白でゆとりが生まれているから！
アイキャッチの背景も白で統一されていて、余白たっぷり♡
アイキャッチのイラストめっちゃ可愛くない？！
記事内でも可愛いイラストがお出迎えしてくれます♡
保健師にっき
看護師経験をお持ちの保健師さん、ゆんさんの
「保健師にっき」は、看護師や保健師の仕事や転職についてのブログです。
引用元：保健師にっき
オレンジをメインに、丸い図形、丸いフォントで統一されている
「温かい印象」を与えてくれるブログです☺
グローバルメニューの色も背景と同じだから、
とってもゆったりしたデザインに♪
まるでおしゃれなホームページみたい！Cocoonに見えない！
アイキャッチも統一されていて見やすいです☺
テルテルブログ
現役美容部員、テルさんの「テルテルブログ」では
接客業・コスメなどをメインに発信されています。
引用元：テルテルブログ
ヘッダー画像も時点で、余白が活用されていますね！
余白が多ければ多いほど、中の文字やイラストに目がいくんです！
使用テーマは、
SWELLなんだって！
どのテーマでも、余白は取り入れられるので参考にして下さいね☺
テルさんはかなりデザインやカラーにこだわられていて、
この素敵なデザインにたどり着くまで、
かなりの試行錯誤をされています！
当ブログも参考にしていただけたようで嬉しいです(照)
mochishiro blog
主婦、もちしろさんの「mochishiro blog」はとにかく可愛い。。。💛
主婦さんのためのお役立ち情報が満載のブログです。
引用元：mochishiro blog
全ての背景の色がブルーで統一されていて、まるで海の中みたい！
魚たちとぷかぷか浮いてる気分になりますね☺
余白を活用してこんな表現もできるなんて、感動です、、、
余白の可能性を感じる！！
アイキャッチも可愛すぎて罪なの💛
エンくら
OL兼クライマー、きゃりーさんの「エンくら」は
楽しく暮らすためのアイデアや、クライミングについてがメイン♪
引用元：エンくら
おすすめカードを丸いボタン風にするワザを活用してくれています♪
小石が並んでいるみたいで、
クライミングにピッタリのデザイン！！
背景は薄いベージュで統一されていて
ヘッダー、おすすめカード、アイキャッチはカラフルなので
メリハリのあるオシャレブログです☺
色の取り入れ方が完璧すぎる、、！
rinakoblog
お花やリボンを使った可愛いラッピングが得意なrinakoさんの「rinakoblog」
では、ラッピング方法や女子力UPの秘訣などを発信されています☺
引用元：rinakoblog
背景はホワイトで、ところどころにアクセントでベージュが使われています。
「淡色女子」っぽさ満載で可愛い💛
記事とブログの背景色を統一することで、余白が生まれていますね！
ヘッダー、おすすめカード、アイキャッチすべてに
お花のイラストが入っているのがポイント！🌸
大人のやりなおし英語
独学で英語を勉強されている、レモンさんの
「大人のやりなおし英語」は
TOEICやオンライン英会話といった英語についての特化ブログです。
引用元：大人のやりなおし英語
こちらも目一杯、余白を取り入れてくれていますね！
特に、おススメカードと背景を同じ色にして
「マグカップ」のように見せるテクニックが素晴らしい！！
ほっこりした雰囲気のブログだから、
やさしい先生が英語を教えてくれるみたいで
気軽に記事が読めるの♡
上司が嫌いブログ
仕事のストレス解消法をメインに発信されているぶなまみさんの
「上司が嫌いブログ」
引用元：上司が嫌いブログ
ヘッダー、記事の背景、ブログの背景の色がうすいグレーで統一されていて
余白がたくさん見られます☺
アイキャッチも統一されていて、とってもおしゃれ！
アイキャッチのタイトルに
読者を引き寄せるワードをうまく取り入れててすごい！
ぶなまみさんのアイキャッチのような、
「思わずクリックしてしまうタイトル」を心掛けましょう☺
「記事内の余白カスタマイズ」参考ブログ
行間に余白があると、見やすくなる！
これから紹介するブログを参考にしてみてね♪
Tetsu blog
副業をメインに発信されている、Tetsuさんの「Tetsu blog」
行間を広くとることで読みやすい記事に！
１文１文が長くない、というのもスラスラ読めちゃうポイントです👍
ブロガー向けの記事が多いから
勉強になる！！
ごんまな子育て通信
元保育士で、子育てブログを運営されているmanaさんの
「ごんまな子育て通信」
まなさんの記事は、行間をかなり広めにとられています。
また、吹き出しを多用することでさらに見やすい記事に♪
文字が詰まっていると、読むの疲れちゃう💦
そんな時は、吹き出しを取り入れよう！
てりまろの英会話
初心者でも楽しく始められる英会話を発信されているじゅんさんの
「てりまろの英会話」
行間を広くとり、１文も短いのでスラスラ読めちゃいます☺
画像や表がたくさん出てくるから、読むのに疲れない！
気づいたら読み終わっている！
そんなブログです♪
ゆう坊のこれ知ってる？
見るだけで分かる資産形成をメインに書かれているゆう坊さんの
「ゆう坊のこれ知ってる？」
丁度いい行間の広さでとても読みやすいです。
また、ゆう坊さんの記事は文末に「。」がないのが斬新で面白い👍
ブログ全体のデザインもこだわられていて
すごくオシャレなの💛
読者に問いかける表現が多いから
自分に話しかけてくれているような気分になる、
そんな親近感の溢れるブログです☺
お菓子のギフト
パティシエ歴１０年のベテラン、ゆうみさんの
「お菓子のギフト」
窮屈にならないように、行間をすこし広めにとられたそう♪
長い文は改行されているから
読みやすい！！
改行を積極的に取り入れる、というのも
読みやすい記事を作るポイントです👍
はなゆりだんごブログ
アニメ・漫画・ゲームを主に発信されているはなゆりさんの
「はなゆりだんごブログ」
当サイトは行間を 1.4em→３emに変更していますが、
はなゆりさんは2.5emに設定されたそうです！
３emが広すぎると感じる人は是非参考にしてね☺
いろんな行間の幅を試してみて、好みの広さを見つけて下さいね♪
おしゃれで見やすいブログのカスタマイズ【まとめ】
今回は余白の話をしました。
空間を生かしてデザインスキルをUPしましょう！
この記事が、デザインについて分からない方のお役に立てたらな。と思っています(´艸｀*)
普段は英語学習についての記事を書いているので、ぜひ覗いてみて下さい。
最後まで読んで頂きありがとうございました。
皆さんのブログがもっと充実しますように♥
コメント
こんにちは、きゃりーと申します。
いつもブログカスタマイズの記事を参考にさせていただいております。
今回、私のブログでカスタマイズについて記事を書いたのですが、記事内でU Love English様を「参考になるブログ」としてご紹介させていただいたので、ご報告いたします。
今後もブログ記事を楽しみにしております。
きゃりーさんコメントありがとうございます☺
記事拝見しました！とっても嬉しいです！！♡
私も【エンクラ】の記事更新、楽しみにしています(^^♪
これからもよろしくお願いします！
こんにちは、こなきあと申します。
Sayuさんのブログを読ませていただいて、余白の大切さを改めて理解しました。早速、ブログに書かれていたことを参考にブログを変更しているのですが、ロゴ周りに段差のようなものができて消えないのですがどうしてでしょうか？背景色もちゃんと合わせているのですが消えません。私の操作でミスがあるのでしょうか？初めましてで質問してすみません。
こなきあさんコメントありがとうございます♥
ブログ拝見いたしました。余白を最大限に活用されていてとってもおしゃれです！
ロゴ部分につかう画像の背景を透過してみてはどうでしょうか？当サイトでは透過した画像を使用しています☺
removebgという無料サイトで透過するのがおススメですうまくいく事を願っています！
Sayuさん、ありがとうございます。
ロゴ部分は背景を透過してあるのですが、もう一度、removebgを使って透過してみます。
Sayuさんのブログを参考にして、余白をもっと使って素敵なブログになれるように頑張ります。
Sayuさんのブログを私のブログで紹介させてください！
はじめまして、magと申します。
初めてのBLOG作成にあたり、sayuさんの記事をたくさん参考にさせて頂きました本当に感謝しかありません(>_<)✨
一点質問です。
こちらのHPのヘッダーは、どのようなサイズで作成されていますか？
私のサイトでは左右が見切れてしまっていて・・・
教えていただけたら嬉しいです♩
magさんコメントありがとうございます！早速ブログ拝見しました(照) ブラウンベースの配色お洒落でめっちゃ好みです～！余白も参考にして下さったのですね！本当に嬉しすぎます！(歓喜) ヘッダーはかなり前に作成した画像なので記憶があいまいなのですが、おそらく横1600PX：縦300PXかと思われます。もし違ったらすみません(汗)今後ともよろしくお願いいたします♪