なっつんです。
ブログのデザインについて質問を頂くことが増えたので、今回はWebデザイナーの視点からブログを見やすくデザインする方法をご紹介します。
初心者でも簡単に試せる方法をまとめたので、ブログをイメチェンしたいと思っている方はぜひ参考にして下さると嬉しいです。
ブログは本文と同じくらいデザインが大事
ブログの第一印象ってとっても大事です。
私はブログを自分で書いているだけではなく、他の方が書いたブログを読むのも大好きです。
だからこそ分かりますが、ブログのデザインって読んでくれた方がその後リピーターになってくれるかどうかを左右する大事な要素です。
多少本文が短くても拙くても、素敵なデザインのブログはついつい引き込まれて他の記事も読みたくなってしまったり、ブックマークしてまた訪れたくなったりしませんか？
ぎっしりと文章だけを詰め込んだブログは、その分野のニッチなファンには需要があるかもしれませんが、一般的には画像や色を使って読みやすくしたブログの方が好まれます。
特に女性をターゲットにしたブログや、初心者向けの内容を書いている方は、綺麗・分かりやすいデザインが重要になってくると思います。
「そうは言ってもデザインセンスに自信がない・・・」と言っている方も多いのですが、センスや経験はいりません！
ちょっとした工夫でぐっとデザイン性を向上させることができるのです。
見やすいブログデザインにする方法
①配色を最初に決めて、色を使いすぎない
②サイトイメージを決めて、統一感を持たせる
③イメージ写真を入れる
④文字色を真っ黒（#000）にしない
⑤フォントを変えると「こだわってる感」が出る
⑥画像に文字入れする時は「文字間」「行間」を空ける
1つ1つ説明していきます。
①配色を最初に決めて、色を使いすぎない
1枚目がたくさんの色を多用したサイト。2枚目が色数を控えめに、トーンを合わせたサイト。
なっつんもWebデザイナーになりたての頃によくやらかしていたのですが、色を「なんとなく」選んでは、とにかくカラフルにすれば綺麗に見えるはずという発想で色んな色を使いすぎていました。
基本的に、カラフルなサイトほど高度なデザインセンスが必要です。色にも明度、彩度、色同士の相性などがあるため、それを理解していないと組み合わせるのが難しいのです。初心者がカラフルなサイトを作ろうとすると、雑然として落ち着かないサイトになってしまいがちです。
なので基本的に使う色は3～5色以内がおすすめです。
・ベースになる色
・サブの色
・アクセントになる色
使う色を決めたら、それ以外の色はあまり使わないようにします。
また、色の彩度や明度なども近くしていきましょう。例えば原色に近いビビッドカラーとパステルカラーは合わないですよね。トーンにも統一感を持たせるのです。
するとサイトに統一感や落ち着きが出てくるはずです。
トーンとかよく分からないよ！という方は、配色ツールを使うと安全です。色選びでの失敗はなくなると思います。
私がいつも参考にしているサルワカさんの配色ツールなど、おすすめです。
配色パターン見本40選：ベストな色の組み合わせを探せるツール
②サイトイメージを決めて、統一感を持たせる
テイストに統一感を出す、というのは非常に大事なことです。
ファッション雑誌だって「○○系」と雑誌ごとにテイストが分かれていますよね？海外のハイブランドばかり扱う雑誌にポップなファストファッションを載せても違和感が出ます。Webサイトもそれと同じです。
なっつんはこのブログに「柔らかい」「優しい」イメージを持たせるべく、パステルカラーや優しいフォントを選ぶようにしています。
発達障害というテーマ自体がネガティブなので、できるだけポジティブでほっとする感じを与えたいという気持ちもあります！
そして猫の写真を多用しています。それはこんな理由があるからなのですが。暇があったら読んでみて下さい。
サイトイメージや使うモチーフ、キャラクターなどをあらかじめ決めておくのが大事です。
サイトイメージは、「カッコイイ」「シンプル」「クール」「かわいい」「ほんわか」「アンティーク」「ポップ」など大まかで大丈夫です。
サイトのイメージが定まっていれば、それに合わせて色の温度感やフォント、どんな写真を使うのかそれともイラストを使うのか、決める時に迷いがなくなります。
③イメージ写真を入れる
文章だけのサイトと、イメージ写真を入れたサイト。
これは一目瞭然ですね。2枚目の画像を入れたサイトの方がパッと目が惹きつけられるし、インパクトがありますよね。
また、人間の脳は文章より画像の方が理解がしやすいし、記憶として残りやすいものです。
特に記事本文が専門的な内容になる時は、適度にイメージ画像を入れてあげましょう。読む側も理解がしやすくなります。
画像素材を集めるには、Shutterstockが1番おすすめです。写真だけでなく可愛いイラストやアイコンも豊富にあり、法人サイトにもよく使われています。
しかしこちらは有料になるため、無料で十分という方はPAKUTASOが無料の素材サイトの中ではオススメです。ただし無料ゆえに多くのブロガーさんが使用しているため、他のブログと画像が被りやすいのが難点です。
④文字色を真っ黒（#000）にしない
このサイトの本文は、少しグレー寄りの黒に設定してあるのがお分かり頂けるでしょうか？
試しに真っ黒にしてみると・・・このようになります。
何だか読みづらいというか、ギラギラした感じがしませんか？
実は白地に真っ黒の文字色（#000）はコントラストが強すぎて、読みづらい上に目にも優しくないのです。
なので、多少グレー寄りの黒に設定するのがおすすめです。
業界でよく使われるのは #333 です。黒に限りなく近いグレー。
もう少し淡いイメージにしたいなら、 #555 もおすすめです。
ちなみにこれ、デザインだけでなくメールや文書を書く時にも使えるテクニックですよ。
初期設定の真っ黒ではなく、一段階グレーに近い黒に設定するのです。
読みやすくなるため、相手にこっそりと好印象を与えられます。
⑤フォントを変えると「こだわってる感」が出る
このブログの本文を ①明朝体 ②丸ゴシック に変えてみました。ガラリとイメージが変わりますよね。
①は新聞や本のようですし、②もよく見かけるフォントです。どちらも真面目な印象です。
発達障害に関する書籍、情報をまとめたwebサイトは既にたくさん存在しますが、私は発達障害当事者の心の声を発信したいと思っています。
そのため手書き感があり、柔らかさもあるこのフォントを選びました。
デザイン系の仕事をしている人でない限り、何のフォントが使われているかを意識することは少ないかもしれませんが、フォントはイメージに大きく影響します。画像、色、と並んで大事なのがフォントです。
私たちが普段読む本、雑誌、Webサイト、目にする広告、全てこだわりを持ってフォントが設定されています。見る側は無意識にフォントの持つイメージを受け取っていると言えますね。
そのくらいフォント選びは大事です！フォントを変えるだけで、個性を出すこともできます。
「フリーフォント」で検索すると様々なフォントが出てくるので、自分のブログのイメージに合うものを探してみて下さい。
（ただし、フリーフォントを使う前には必ず利用規約を一読しましょう！また、あまりに奇抜なフォントを本文に使用すると読みづらくなってしまうため注意です。）
ちなみにこのブログはフリーフォントの『フロップデザインフォント』を使わせて頂いています～。
ほんわか、柔らかいイメージだけど読みやすくてお気に入りです。
⑥画像に文字入れする時は「文字間」「行間」を空ける
文字間、行間？？(´・ω・)
PhotoshopやIllustratorを使ったことのない方はピンと来ないかもしれませんね。
理系にはletter-spacingとline-heightと言った方が多分通じます笑
文字間は文字の間の間隔、行間は行の間の間隔の事です。そのまんまの説明ですが。
言葉より画像の方が分かりやすいと思うので、こちらをご覧下さい。
どうでしょうか。文字間と行間を設定した2枚目の方が見やすく、洗練された感じがしませんか？
見やすいアイキャッチ画像を作るには、文字間と行間を必ず空ける。
これを一手間かけるだけでデザインがぐっと綺麗に見えます。
文字入れテクニック
ついでに文字入れをする時のテクニックをもう1つご紹介します。
まずはこちらの画像をご覧下さい。
賑やかな写真のため、文字が読みづらいですね・・・。
これを見やすくするにはどうすればいいでしょうか？
(1) 文字にドロップシャドウを入れる
文字に影を入れることで、文字が浮き出て少し読みやすくなります。
今回のように文字が濃い色の場合は、白を後ろに入れてあげるといい感じです。
けど、これでもまだ読みづらいですね。
(2) 画像にフィルターをかける
ドロップシャドウを入れても文字が読みづらい場合は、画像全体にフィルターをかけると、文字がくっきり読みやすくなります。
やり方は簡単。画像と同じサイズの長方形を画像の真上に載せて、色を黒orグレーに設定し、透明度を下げていきます。
どうでしょう。
これなら文字を入れるスペースのない賑やかな画像でもばっちり文字入れができますね。
フィルターの色を変えたり、グラデーションをかけてもいいですね。こちらは試しにオレンジ色のフィルターをかけてみました。
写真全部を覆いたくない場合は、一部だけ背景を入れるやり方もおすすめです。
ただ、アイキャッチ画像はササッと短時間で作ることも重要だと思います。
バナーを作るようにデザインにこだわりすぎるとキリが無くなりますし、アイキャッチ画像に1時間かけるなら記事を書くのに1時間かけた方が間違いなく効率的です。
こだわりすぎずにササッと一手間加えることが大事だなと思いました。
ちょっとした工夫でブログは見栄えが良くなる
以上、ちょっとした工夫をするだけでブログのデザインがぐっと良くなる！ということを書かせて頂きました。
まとめると、どんなイメージのブログにしたいのか方向性をきちんと決めて、色・画像・フォントの3つに統一感を持たせる。アイキャッチ画像に一手間加える。これだけです。
これだけで見栄えが良くなるはずです。デザインが良くなれば、読者の印象も間違いなくアップするので、この機会にぜひデザインについて考えてみてくださいね。
最後に、誰でも分かりやすくデザインを勉強できるおすすめの本を3冊ご紹介します。
ブログを作ってみたい！と興味のある方は、こちらの記事もあわせてお読み下さい。
センス ＜＜ テクニックと知識、です！