こんにちは。ume-boshiです。
最近、はてなブログの収益化のバナーを見るたびに、ブログの収益化に挑戦し始めようとも考えるようになりました。社会人なので、Pro会員費ぐらいでは少ししか動じません。
とはいえ、収益化を目指す前にはできるだけ改修を施したく、その中でもUIのデザインがどうしても気になりました。デザインセンスが皆無の私にも、視認しづらい箇所があったり、意味の分からない色使いをしていたりと、色々と問題のあるUIだったことに間違いありません。
ということで、今回はブログのUIを更新した話です。
Before Afterから
まずは、直感的にわかりやすいように、BeforeAfterを左右に並べたものをお見せします。
変更前の特徴
まずは左側の旧UIについて、気になる箇所を列挙していきます。
- タイトルの下線が目立たないうえに、謎の配色になっている（h1タグも同様）
- h2タグの使い勝手が悪く、h3タグを乱用したくなる（几帳面でいつも気になっていた）
- サイドバーの背景色が透明で、極めて可読性が低い
- デザインが色々と角ばっている
- わかりやすくするための箇条書きが目立たない
- 強調用の下線の色がドギツい
- タグや引用や目次がなんか寂しい。。。
- 記事と記事の境が判別しづらい
変更後の特徴
次に、右側の新UIについて、どう変えたかを列挙していきます。
- タイトルやh1タグを均一な目立つ線に変更。タイトルは長文でも視認しやすいように上下で挟んだ。
- h2タグとh3タグの階層構造が視認しやすいよう、縦線の色とサイズを変更。タイトル周りは、目立つフォント（Kiwi Maru）に変更。
- サイドバーの背景色を設定し、全体的に影をつけることで背景模様と見分けやすくした。また、サイドバーの各タイトルもフォントや飾りを調節。
- デザインは色々と丸く調節。
- 箇条書きは記号をアイコンフォントに変更し、インデントを加えた。グループ化して視認できるように、行間を少し狭めている。対象に順序列挙では行間を広くとった。
- 下線の色をマイルドな黄色に変更。
- 色付けにより、タグや引用や目次を他から明確に差別化。
- 記事ごとに影付きの枠とし、境界を明暗差で視認しやすく変更。
他にも、改行時の感覚を広げたり、pタグの行間を調節したり、トップバーの背景色を設定したり、画像の最大サイズを変更したりと微調節を加えています。見やすくなったでしょう？
残りの改善点
ここまで偉そうに「改善した！」と述べてきましたが、怠惰な私が細かい調節を無視しないはずがありません。
そんな自分への備忘録のために、問題点を列挙しておきましょう。
おわりに
「こいつネタ切れか？」と心配されているかもしれませんが、ただただ私用も隠したかったり記事を書くのが面倒なだけのサボりです。 私生活のほうではボランティア団体にも所属し始めたので、公私ともに忙しく個人開発がほぼできていないのも事実。。。
分身して作業効率を上げられたりしないかなぁ
