こんにちは。
ここ暫くで、随分書きためてきた記事が溜まってきました。やっぱり、物を書く以上には、より多くの人に読んでもらいたいですよね(^_^;) アクセス数そのものを増やすには、
- 記事をたくさん書く
- 読者登録を増やす
- 検索での流入を増やす
- ホットエントリーに入れて人目につく機会を増やす
などなどの方法が考えられますが、せっかく記事数も増えてきたことですので、セッション別のPV数を増やすために、いろいろと取り組んで見たことのまとめを書いてみます。
何より最初にすべきことはもっと見たいと思わせること
セッション別PV数を増やす、というとまずは何を考えます？普通、サイト内の他の記事への動線をどう良くするのか？ということを考えられるんじゃないでしょうか。そんなことは後回しにしましょう。もっと大事なことは、
『他の記事も読んでみたい！』
と思わせることです。いくら、サイト内の動線が良かったとしても、『別にこのサイトの記事は読む価値無いなあ』と思われたら、全く意味が無いですよね。
じゃあ、どうやってそう思わせるのか、ですね。勿論、記事の品質を上げることが大前提になりますが、あわせて取り組めることが有ります。
まずは読みやすい文章の構成から
『品質の良い記事』って、どんな記事でしょう？勿論、知らなかった為になる情報や、思わず誰かに言いたくなるような話といった、内容が重要であることは間違い有りません。しかし、どんなに内容が良かったとしても、『文章そのもの』が読みづらかったら読み飛ばされてしまいます。
簡単に改善できる『読みやすい構成』のポイントについて、考えてみました。
- 適切なサイズでの章立て
- 過不足のない強調
- バランスの取れた画像の配置
他にも色々あるとは思いますが、まずはこの３点について考えていきたいと思います。
適切なサイズでの章立て
まずは、章立てについて。ここでは大きく『見出しのおき方』と『パラグラフの切り分け』について考えたいと思います。利用しているデザインにもよりますが、『見出し』を設定すると、太字になったり下線が引かれたりした上で、上限段落と空白が置かれます。
見出しを置くことで、『これから何について書かれるんだろう』ということが 明白で分かりやすくなります。また、パラグラフも重要です。はてなブログでは、文章でエンターキーを押すと、『パラグラフの切り替え』として認識され、次の領域との間に空白が作られます。パラグラフが切り替えられることによって、文章の切れ目や、自分が読んでいる箇所がどこなのかが分かりやすくなります。
ちなみに、シフトキーを押しながらエンターキーを押すと、通常の改行になり、パラグラフ内の『次の行』と同じように表示されます。
だいたい、普段わたしが書くときは、３から４行くらいで１パラグラフ、３から４パラグラフの間には見出しを置くようにしています。
過不足のない強調
説明に入る前に、むかしこんな記事が流行したのをご存知でしょうか？
こんちには みさなん おんげき ですか？ わしたは げんき です。
この ぶんょしう は いりぎす の ケブンッリジ だがいく の けゅきんう の けっか
にんんげ は もじ を にしんき する とき その さしいょ と さいご の もさじえ あいてっればじばんゅん は めくちちゃゃ でも ちんゃと よめる という けゅきんう に もづいとて
わざと もじの じんばゅん を いかれえて あまりす。
どでうす？ ちんゃと よゃちめう でしょ？
ちんゃと よためら はのんう よしろく
よく読めば、誤字だらけの文書です。ですが人間は、過去の記憶から推察して、ある程度補完して文章を読むことが出来るため問題ないということだそうです。
ちなみに、本文中の『ケンブリッジ大学の研究結果』というのはデマだそうですが、これは、『ケブンッリジ だがいく の けゅきんう の けっか』なので問題はありません( ･`д･´)
本題に戻りましょう。ここで言いたいことは、『人間は文章を読むとき、そこまで注意を払って読んではいない』ということです。ですので、注意して読ませたいときは、適切な強調が必要です。
このブログで使っている強調の仕方は、
- 色をつける
- 文字を大きくする
の２つです。あまり、強調の仕方の種類を増やすと、何がなんだか分からなくなりますので、あまり文章をカラフルにしすぎるのも考えものです。
『色をつける』については、以前は『青』を太字＋下線で使っていましたが、『リンクと思ってクリックした』という意見を何件か頂きましたので、『緑』を太字＋下線にすることにしました。
色だけでなく、『強調』の量も大切です。パラグラフ中が全て『強調』になってしまうと、もはやそれが『普通』になってしまいますので、だいたい、１パラグラフ内に、１つから２つが、強調の目安でしょうか。
細かいはなしでは有りますが、色を変えるときは、先に文章を書き終えてから変更することをおすすめします。そうすると、後ろの文章を書くときに、元の色に戻す手間が有りません。
もうひとつ、『文字を大きくする』という方法もあります。これは、表示デザインがくずれる可能性があるため、色を使うよりも難しい方法です。わたしの場合、使うときは、必ず１行で収まるよう、短めの文について、特に強調したい時だけ利用しています。
バランスの取れた画像の配置
最後に画像の利用について。ベタの文章だけでは、ぱっとみただけでも、『なんか読むのがしんどそうだなあ』という風に見えてしまいます。このブログでは、統計情報を解説するための補足のグラフなど、多種多様な画像を本文中に埋め込んでいます。
画像を使うことで、表現力が上がるだけでなく、文字だけの圧迫からある程度開放されます。ただし、
- 文字じゃないので、文章として検索ができない
- 文字じゃないので、検索エンジンがキーワードとして拾えない
- 環境によっては、読み込み時間が伸びる
といったデメリットもあります。やり過ぎると、画像まみれになってわけわかんなくなっちゃいますので、だいたい１つの見出しの中に１つを目安にしています。ちなみに、適切な画像が見当たらなかった時は、『他サイトのページ』『Amazonの商品紹介』『リスト』でも、文章の圧迫感を減らす効果を得られます。
横幅と文字の大きさ
では次に、余白と文字の大きさについても考えて見たいと思います。
『内容はいいのかもしれのいけど、何だか読みにくいなあ』というサイトと、『内容はすっかすかだけど、とりあえず読みやすいね』というサイトの違いは、ページ自体の横幅と文字の大きさが関係している場合があります。
横幅が長いと、次の行に折り返すまでの字数が大きくなります。当然字数が多いと、『あれー？今どこまで読んだっけ？』となりがちです。
著名サイトの横幅の平均は616px、余白は35pxだそうです。
本ブログでは、トップにGoogleAdsenseのラージバナーを構えている都合上、横幅はそこまで小さくすることが出来ません(728px)。代わりに、文字のサイズを少し大きくしてみました。（現在16px）
だいたい、目安として35文字くらいがいいとのことですが、基本文章量の多いうちのようなところでは、スクロールも多くなってしまいますので、45文字程度に抑えられる範囲に設定しました。
当たり前だけど読み込み速度は早い方がいい
その次に考えたのは、読み込み速度です。
当たり前ですが、読み込み速度は早ければ早いほうがいいに決まっています。では、何がページの読み込み速度を遅くしているのでしょう？個人的に『画像』は、ただダウンロードするだけなので、あまり問題になることは無いように思われます。はてなブログでの読み込み速度を長時間化する一番の犯人はこいつ。
いわゆる、『ソーシャルボタン』というやつですね。これは、それぞれのサイトに必要な情報を取りに行ってその結果を待たなければならない分、サイトの表示速度を大きく劣化させます。特に、twitterの件数取得が頭の悪いことをやっていそうなため、処理時間が掛かっています。
そっかー、じゃあ外しちゃおっかーって出来ます？
またまたご冗談を！
twitterでのリンクも、はてブでのブックマークも、ページの認知度を高める為の重要な手段です。そこへの重要なアクセス方法であるソーシャルボタンを外せるわけないじゃないですか。こりゃどうしたものかと、頭を抱えていた中、素晴らしい物を見つけました。
いっかすー ♪～ (・ε・)
なかなかセンスの有るソーシャルボタン群です。しかも、はてなブログ標準の、1MBもある、twitterのデータ取得のjavascriptを使わない分、処理速度も随分早そうです。
ただ、何点か『もうちょっとこうだといいなあ』と思うところがありました。
- 件数表示が見えにくい
- 標準では、はてブ/twitterで件数表示→一覧リンク。ボタン→共有表示だったのが、共有表示だけになっている。
と、いうわけでカスタマイズしてみました。
どうでしょう？手前味噌ながら、なかなかいい感じになりました。
はてブのボタンも、件数をクリックすると一覧ページへ、ボタンをクリックすると追加ページに飛ぶようにしておきました。
リンク元のサイトで公開されているものに、ちょちょいと手直しをしただけの代物ですが、ソースコードは不勉強ゆえに『悪戦苦闘』した後が残っているので、ちょっと人にお見せ出来る状態ではありません(´・ω・｀)
ただ、欲しい人が多ければ、公開してみようと思いますので、ブコメ等でご連絡ください。
トップ表示件数の削減と『続きを読む』のボタン化
基本的に、このブログは、『はてブ』や『twitter』からの流入が多く、トップページからのアクセスは余り多くありません。ただ、Google Analyticsの結果を見ていると、『まあまあ』の流入数はあるみたいなんですね。
全体の4%くらいのアクセスはあります。ここを早くする一番の方法は、『表示させる記事の数を減らすこと』ですね。1ページあたりの表示件数は、ここから変えられます。
多分このブログ、はてなブログの中でも『1記事あたりの文章量』だとかなり上位だと思います。ですので、表示数は3記事とかなり少なめにしてみました。
『どれもお勧め』が個人モットーですので、3記事も表示できれば、その中から十分読みたいものを選んで貰えるんじゃないかなあと勝手に考えております(^_^;)
あと、timeline-minimal というテーマを使っているのですが、このテーマのデフォルトでの『続きを読む』はテキスト形式な上に、標準サイズの文字なんですね・・・。自分でも使ってみて
こんなもん押してられっか(#ﾟДﾟ)!!
と思いましたので、
を参考に画像にしてみました(∩´∀｀)∩ﾜｰｲ
流石に大きすぎ？？(；´Д｀) と思いましたが、クリックしやすいことはいいことだの信念のもと、このサイズでいくことにしました。
タイトル画像の変更
タイトル画像についても変更してみました。きっかけは、
にて書かせていただいたのですが、『記事数が増えて、ホットエントリーが増えたのはいいけど、同じ人が書いているって気づかれていないのでは？』というところです。何度か『あ、これ前に見た面白いの書いていた人だ』ってなれば、feedlyなどに登録してくれる可能性もあがるんじゃないでしょうか？
その為に、一目見たら分かるよう、タイトル画像を標準からイケてる感じのものに変更することを考えました。タイトルに使う画像探しは結構たいへんでした。タイトルに使う画像は、以下の要素を満たすものでなければなりません。
- 一番目立つところなので、著作権的にまったくのホワイトでなければならない
- 通常の写真の比率などでは、縦が長くなりすぎるので、横長じゃなきゃダメ
- ブログタイトルが入れられるだけの『空間』があること
これだけの条件をみたすものを探すのは、結構たいへんです。絵心があれば、自分で書けばいいのですが、そんなものないのでひたすらgoogle先生と格闘していました。
結果、なかなかナイスなサイトを見つけることができました。
大変気に入っております。
探し方のコツ（？）ですが、検索キーワードに『パノラマ』といれてがりがり画像検索して、良さそうなサイトを探していました。良ければ試してみてください。
グローバルメニューの設置
次にタイトル周りの改善として、グローバルメニューを設置することにしました。ブログのタイトルの下とかにある、カテゴリへのジャンプメニューですね。これについても、先ほどの id:ftmaccho さんのサイトを参考にしました。
まだまだ、効果は出ていませんが、サイドバーにおいてあるカテゴリよりも、随分と利便性は高まったように感じています。
さて、色々と書いてみましたが、これでサイトのひととおりの手直しについては一段落と致します。何ヶ月後かに、『こんなんなったで！』と皆様にご報告させていただきますので、よろしくお願い致します。( ｀・∀・´)ﾉ
『他の記事も読んでみたい！』
と思っていただくよう、努力していきますので、末永くよろしくお願いいたします。
（大事なことなので二回言いました。）
ではでは、今日はこのへんで
追記：モバイル版の修正忘れていたので一時的に復活。
