ブログの見やすさを徹底的に追及中【コラム】

現在、過去に個人ブログで月間 300 万 PV をたたき出したことがある S 氏に毎日ビシバシと当ブログの見直しをレクチャーされています。

• 稼げるブログはタイトルと読みやすさ、プロに思い知らされた【コラム】

本日も日々のブログ更新を行いつつ、S 氏のメソッドが詰まった指示書に沿ってデザインの修正を行いました。

その一例が冒頭の画像です。当ブログは特にモバイル端末からのアクセスが多いのでモバイル表示（レスポンシブ）の修正を重点的に行っているのですが、その中で、モバイル表示のグローバルメニューが見にくいので修正すべきとの指令を S 氏から受け、試行錯誤しつつ S 氏のバックアップも受けながら修正を行いました。

右側が修正前、左側が修正後です。（ドメイン違いますがブログテーマは同じなので気にしないでください）

当ブログが使用しているブログテーマではモバイル表示でメニューアイコンをタッチしてグローバルメニューを表示すると、デフォルトでは画面の 90% 程度を埋め突くしてしまうのですが、これがユーザビリティを下げているとの指摘。またテキストカラーが背景色と似ていてわかりづらいと。

モバイルのグローバルメニューなんてまったく気にしたことがなかったため、徹底してサイトのデザインにこだわるとこんなところまで作りこむのか、と感心しつつなんとか修正しました。その結果が以下。最初は修正前のデフォルトのグローバルメニュー表示で、その後のが修正後です。（ドメイン違いますが…以下割愛）

修正後はグローバルメニューが画面の 45% で止まるようにし、コンテンツの一部も表示されるようにしています。また何気にメニューの背景色を変えつつ、その上の “サイト内検索” のバーもカラーを変更して差別化しています。見やすくなっていますよね？

そのほかに “続きを読む” ボタンもインパクトが薄いとのことで、インパクトのある仕様に変更しました。正直この辺はブログテーマのデフォルトのまま利用していて、またブログテーマにこの辺を変更するメニューなどは用意されていないため、グローバルメニューの仕様変更も含めて CSS をガッツリいじっています。

このほかにもブログタイトルの上下余白を均一にしたり、不要な要素やウィジェットを削除しつつ、必要不可欠なウィジェットを追加したりなどなど、恐らく先週よりもかなり見やすく読みやすい表示に変わっているはず。

私自身、PHP や CSS などは教わったことがなく、自分で調べて “自己流” にいじったことがある程度なので、正直その道のプロである S 氏の指示書はかなりハードルが高くて時にまったく理解できないこともあるのですが、今は泣き言言ってる場合でもないのでなんとか喰らいついています。

まだまだブログデザインの修正は続きます。というかテーマが更新された際にうっかり適用しないように注意しなくては。