やりたいこと、できていますか?

読者です 読者をやめる 読者になる 読者になる

やりたいこと、できてる?

努力、忍耐、継続、自己否定の苦しい世界から、ゆるっと楽しく生きる毎日へ。頑張り屋さんを卒業して、あなたの心に従って生きる方法を一緒に探すブログです。

センスがなくてもOK!ブログを論理的にデザインする方法

パソコンのあれこれ

スポンサーリンク

こんにちは!
芸術センスゼロのブロガー、おやすみ星人です!

私はブログを読みやすくするために、この一か月間必死にカスタマイズをしていました。
色んなブロガーさんのカスタマイズ記事を読んだり、本でHTMLCSSの知識をつけました。

けれどもいくらカスタマイズしても、できあがるのは読みづらくてパッとしないブログばかり...

そう、私に足りなかったのはカスタマイズの知識ではなく、デザインのセンスだったんです。
ちなみに私はセンスゼロです。

でもそんな私でも、デザインを論理的に学ぶことで大分改善できました!
例えばこちら。スタバで新商品を予想した時の画像です。

f:id:oyasumin-seijin:20161126155949j:plain

何ということでしょう。匠もびっくりなBefore&Afterですね。
そこで今日はブログをオシャレにする方法を、理論に基づいてご紹介したいと思います!

 

色使いはどうすればいい?

一番悩むのは色使いですよね。
見出しや本文、背景など、どんな色を使うかとっても悩みますよね。
そこで色の選び方をご紹介したいと思います!

●色の選び方の基本

まず色を選ぶとき、落ち着いたものを選ぶのが基本です。
標準色は鮮やかできれいなんですけど、文字色に選ぶと目がチカチカしてしまいます。

f:id:oyasumin-seijin:20161127210736p:plain

●どの色を選ぶといい?

ブログに使用する色は4色にしぼるのが理想です。f:id:oyasumin-seijin:20161127214147j:plain

色を選ぶときは、同じ色でも濃さを変えたり、濃淡が同じ色を2種類使ったり、補色を組み合わせるとすっきりした色合いになります。f:id:oyasumin-seijin:20161127214124j:plain

ちなみに私のブログではメインをオレンジにし、太字に同じ系統の朱色、引用に補色の落ち着いた紺を使っています。

本文の文字は何を使ったらいい?

●フォントはどれがいい?

ブログでは読者さんに長い文章を読んでもらうため、目が疲れるフォントは避けるべきです。

例えばこちらの文章。同じ内容でも読みやすさが全然違います。f:id:oyasumin-seijin:20161127211354j:plain

上のフォントの方が下のよりもなめらかで、より読みやすいのではないでしょうか?

ちなみに私のブログでは游ゴシックを使っています。
フォントの設定の仕方はエジソンさんのブログに書かれています。

●行間はどうすればいい?

文章を読みやすくするためには、行間設定も大切です。
せっかく読みやすいフォントを選んでも、行間設定をおろそかにしたら意味がありません。

理想的な行間を作るには、文と文の間を0.5~1.0字空けるといいようです。 

f:id:oyasumin-seijin:20161128115221j:plain

私のブログでは行間設定を次のようにしています。

PC版は  デザイン>カスタマイズ(工具ボタン)>CSS

.entry-content {line-height: 1.7}

スマホ版は  デザイン>スマートフォン>タイトル下

<style>
.entry-content {line-height: 1.6}
</style>

もし良ければ参考にしてください!
11/27追記:デザインに基づいて、理想的な行間を設定しました▽
はてなブログの行間・改行が広い!狭くする方法をまとめました!



最後に

カスタマイズはデザインのセンスがなければ、なかなか良いブログに仕上がりません。
けれども私のようにセンスゼロでも、デザインを論理的に学ぶことで読みやすくて整ったブログを作ることができます!

ちなみにデザインを論理的に説明してくれるサイトがあります。
伝わるデザイン|研究発表のユニバーサルデザイン

こちらのサイトは研究者向けのサイトで、わかりやすいスライドの作り方を説明しています。
私たちブロガーにもマネできる部分がたくさんあります。

さらにデザインを一般向けにまとめた本がこちら。
上のサイトよりもさらに色んなことが書いてあります。


正直この本は本当にオススメ!
見出しの余白、フォントはどれくらいがいいのか?
・より魅力的な画像の作り方とは?
・読みやすい箇条書きの書き方とは?

この記事には載せきれないくらい、大切な情報がぎゅっと詰まってます。
詳しい情報はAmazonの公式サイトに書いてあるので、良ければどうぞ!

Amazon公式サイト▽

伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール

あと私にはHTMLやCSSの知識がなかったので、こちらの本を参考にしました▽


HTMLやCSSの本は色々ありますが、この本ははてなブログのカスタマイズに特化しているのでわかりやすかったです。
私はデザインの本でデザインの仕方を学んで、この本を読んでカスタマイズをしました。


引用元:
『よい資料を作るためのレイアウトのルール 伝わるデザインの基本』
画像はここから引用しています。

横並びのアドセンスを非表示にする方法も紹介しています▽
アドセンスを非表示に!横並びにも対応させる方法 

アドセンス審査は思ったより厳しくないよ!▽
【アドセンス】間違えて利用規約に同意しなかったけど、合格したよ!

おやすみ星人ってどんな人?▽
初めまして&ブログを始めた理由
26歳女が無職になった理由「何もない自分を信じたかった」
私が「やりたいこと」を忘れた理由?