こんにちは、ねこまるです。
突然ですが、あなたのブログ読みづらくなってませんか？
記事本文が読みづらいと、読者がページをすぐに閉じてしまうかもしれません！
せっかくページを開いてもらったのにそんなのもったいないですよね？
もっといろんな記事読んでってほしい！
今回は、私が読みやすいブログを目指して変更した点を紹介していこうと思います。
・ブログを始めようと思ってる方
・ブログデザインをいじってない方
・客観的に見て自分のブログがどう見えるのか知りたい方
何を元に変更したのか
ブログを初めて2週間の私ですが、当初よりは記事執筆の速度も上がってきました。
最初は書き方を調べながら進めていたので、初投稿記事は8時間くらいかかってたかも…
そんなこんなで、執筆以外にもやっと目を向けるようになりました。
最近はツイッターで色んな方のブログを渡り歩いています。
自分の知らない知識を目にするのは楽しいですし、何よりブログデザインの勉強になっています。
その結果私は、自分のブログ読みづらいかもと思いました。
私の反省点は、
- とにかく記事を増やすことに注力しすぎた
- 自分が書いた内容なのでスラスラ読めると勘違い
この2つです。
どうしても自分のブログを客観的に見ることは難しいので、
他の方のブログを見て、「これ読みづらいな」と思ったら自分のブログも確認する。
そうやってすぐ変更が可能な部分は直していきました。
改良点
フォントの変更
まず、フォントをCocoonの設定から変更しました。
変更前が初期設定かどうかは定かではないのですが、私の場合はこうなってました。
- 色：#000000
- 種類:
ヒラギノ角ゴ,メイリオ - 文字の太さ: 400
- 色: #474747
- 種類:
游ゴシック,ヒラギノ角ゴ - 文字の太さ: 500
文字色
比べてみると結構色違いますよね？ 黒からグレーよりの黒に変更しました。
黒の時より背景の白とのコントラストが和らぎ、眼に優しい印象があります。
#474747に特に意味はないです、私の感性で選びました。
大手サイトは#333333を使用している所が多いのでそちらでもいいですし、自分のブログの雰囲気に合う色を探してみましょう。
種類と太さ
元々設定してあったヒラギノ角ゴより、游ゴシックの方が柔らかい印象を受けたのでこちらに変更しました。
ちなみに画像の游ゴシックは太さ500,ヒラギノは400です。
また、太さは游ゴシックにした場合、400だと少し細い印象を受けたので500に変更。
フォントの種類や太さに関しては、ブログの雰囲気や個人の感性に依るところが大きいです。
可読性が高いと言われるゴシック体や明朝体の中で、自分のブログに合ったフォントを選ぶのがよいと思います。
OSによってフォントの雰囲気が変わることもあるし、こだわりすぎはよくないね。
空間の使い方
適度な行間
ひたすら文字が詰め込まれた文章と、適度に行間がある文章どっちが読みたいですか？
きっと後者の方が読みたいと思えるし、読んでいて疲れないですよね。
パイレーツシリーズ第5弾。主人ジャック・スパロウに復讐の念を燃やす、”海の死神”サラザールは魔の三角海域からよみがえり、ジャックヘの復讐の機会を伺っていて、その復讐を阻止するためにはジャックは、海の秘宝”ポセイドンの槍”を手に入れなければならない。
一方、かつてジャックと冒険を共にしたウィル・ターナーの息子ヘンリーは”ポセイドンの槍”を手に入れて父の呪いを解こうと旅を共にするが、道中ではジャックの宿敵バルボッサや毎度おなじみ英国軍との対決も待ち受けていた。
この文章、1文が長いので状況の整理がしづらく読んでいて疲れます。
1文の長さをもっと短くして、句読点で適度に改行を入れるとこうなります。
主人公ジャック・スパロウに復讐の念を燃やす、”海の死神”サラザール。
サラザールは魔の三角海域から蘇り、ジャックへの復讐の機会を伺っていた。
その復讐を阻止するためには、海の秘宝”ポセイドンの槍”を手に入れなければならない。
一方、かつてジャックと冒険を共にしたウィル・ターナーの息子ヘンリーはというと、
“ポセイドンの槍”を手に入れて父の呪いを解くため、旅を共にしようとジャックに取り入っていた。
道中ではジャックの宿敵バルボッサや毎度おなじみ英国軍の登場もーー。
だいぶ読みやすくなりましたよね？場面の切り替わりでは多めに行間を取るのも効果的です。
私は声に出して読んでみて、息継ぎがしやすい文章を作れるよう心がけています。
スペーサー
画像やリンクの挿入をした時は、前後にスペーサーで空間を作っています。
スペーサーなしだと圧迫感を強く感じたからです。
スペーサーを使っての空間があるかないかの違いはこんな感じです。
特に注目してほしい画像がある場合は、空間を適度に取っておくと見やすくなります。
吹き出し前後にスペースあったほうがいいかもって指摘を受けて最近初めてスペーサーの存在を知ったねこまるです。
使いすぎたらそれはそれで読みづらくなるので、適度にね。
目次のデザインと位置
デザイン
次に読みづらいなと思ったのは目次のデザインで、数字が多い時。
こんな感じの目次です。段落分けはされてるけどなんとなく見づらい。
H2とそれ以外の見出しは出来るだけ差別化した方が目次は見やすいと思っていて、
今のスタイルの目次デザインに落ち着きました。
目次の位置
長い記事の場合に限るんですが、サイドバーの追従目次は必要だと感じました。
読んでる最中に「あれ、ここどうだっけ？」ってなった時、すぐ目的の項目まで戻れるボタンがあると便利です。
特に手順紹介の記事だと、サイドバーに目次がないと絶望を感じる…(基本的にねこまるは面倒くさがり
サイトホームのデザイン
カラムのコンテンツ幅の変更
メインカラムのコンテンツ幅を800から750に変更しました。
下記画像、オレンジ色矢印部分のことです。
幅が広すぎると目線の移動が増えて、読み疲れするかなと思ったので変更しました。
前より若干ですがすっきりして結構気に入ってます。
ヘッダーのデザイン
ヘッダーロゴは出来るだけシンプルなものを再作成しました。
サイトホームを開いたときに、記事が一番最初に目に入るようにしたかったからです。
ちなみにロゴサイズの幅を指定して、未設定の時よりも小さめに表示させています。
変更前と変更後の変化はこんな感じ。
ロゴを目立たせたいかどうかにもよるので、一概にどちらが良いのかとは言えませんが。
ヘッダー部分はカスタマイズし足りない所がたくさんあって勉強中です。
リンクの開き方
ブログを読んでいるときに、「あ！この記事も後で読もう」ってなる時ありますよね。
手順紹介で該当のホームページ開くために、外部リンクをクリックしたりーー。
そういう時、クリックして同じタブで開かれると少し煩わしいと感じませんか。
リンクは基本新規タブで開く設定にしてほしいと思ってる面倒くさがりのねこまるです、どうも。
最近は結構、”右クリックからの新規タブで開く”をする癖がついてるんですが、
それでもワンクリックで新規タブで開いてくれるならそっちの方がいいです。
というわけで、当ブログではリンクは新規タブで開く設定にしました。
参考にしたい点
その他、ブログサーフィンをしてて注意したいと思った点や、取り入れたいと思った点について簡易的にまとめてみました。
注意したい点
・マニアや専門家しか分からない単語は避ける
読者がブログを読みながら、都度単語を調べるなんてことにならないような文章を心掛けたい。
・引用文と他の分の差別化はかなりしっかり目に
・アイキャッチの文字の読みやすさ
遠くから見てもなんとなく分かるくらいのアイキャッチにはしておきたい。
特に文字の色と背景の色が同系色になって読み取りづらくならないように。
・手順紹介する時の写真の数に注意
写真はあった方が分かりやすいけど、載せすぎは逆に見づらかった。
手順紹介の時はスクロールが出来る限り少ない方が読みやすい。
今後取り入れていきたい点
・アイキャッチの枠の色をカテゴリーごとに分ける
新着記事の並びを見たときに、視覚的に分かりやすくて良かった。
・自分の強みはもっとアピール
例えば、「ブログ1ヶ月で〇〇PV稼いだ私がコツを教えます！」とか。
自分の持ってる資格や他の人にない強みはどんどん前面に押し出していくべきだと感じた。
まとめ
ブログはそもそもページに足を運んでくれる人がいないと意味ないです。
足を運ぼうと思う理由の大部分が記事の内容なので、ブログのデザインや仕様は凝りすぎ注意です。
ですが、ある程度整えておかないと持続的な読者の獲得には繋がらないです。
内容が1番なのは大前提として、時間のある時に自分のブログに合ったデザインや読みやすい・使いやすいと思う設定にしてみてはどうでしょうか。
デザイン整えると、記事執筆のモチベも上がるし結構オススメ。
コメント