前からトップページのメニュー周りがもっさりしていてビミョイなぁ…と思っていたので整理することにしました。久しぶりに結構ガッツリやりました。

変更前後


ビフォー

アフター

アイコンをFontAwesomeからFeatherに変更


しました。理由はFontAwesomeよりスッキリ目のアイコンにしたかった(HTMLのサイズ的にも)というのがあります。ちなみにアイコンを探すにはGoogleでググるよりGitHubのTopicでiconsなどで調べた方がいいです。ググって出てくるやつはSVG使うにはサイト登録しないといけないやつとかが多いので…。Featherのサイトは下記です。

Feather

メニュー関連をアイコンで表現するように変更


トップページに配置していたメニューは記事の分類のもの以外はアイコンに置き換えました。個人的に下記の理由により極力アイコンは使いたくありませんでした。

  • アイコンが何を意味するのかわかりづらい
    • 特にカテゴリーとかタグとかアーカイブとか…
  • サイズが大きくなる
    • SVGで埋め込むことでリクエストは回避できるがそれでもHTMLがそこそこデカくなってしまう…

しかし、トップページのモッサリ感を解消するには他に方法がなかったため、適用することにしました。

このサイトに関連するもの(タグとか検索とか)はヘッダーに配置しました。それ以外のもの(つぶやきとか写真とか、要するにサブドメインとか他のサイトのリンク)は最上部の画像の下部にヘッダーのメニューと対角線上に配置するようにしました。また、背景色を若干メインのカラーに比べて濃い目に設定しました。

トップページへのリンクは左上のサムネイル


Featherのアイコンは気に入ったのですが、HOMEのアイコンが野暮ったくイマイチだったので、どうするか非常に悩みました。悩んだ結果、サムネイルをトップページへのリンクとすることにしました。

昨今はとりあえず人の顔なりアイコンなり押せばどこかに遷移するというのは多くのネットユーザーの認識としてあると思います。特にだいたい左上なんで、まあ、わかるでしょう。そもそも、Google Analyticsを設置していた時の記憶では、このサイトは一撃離脱の傾向にあります。回遊率が極めて低い(そもそも個人のブログはこのサイトに限らず回遊率低いと思う)ですし、別段遷移できなくても問題ないでしょう。そこを気にするならもう少し別の施策をとってます。

記事分類のメニューはArticlesの下部に移動


IT・プログラミングなど, サイト, 写真・旅行などという記事分類はArticlesの下部に移動させました。これは最上部の画像の下部に配置したメニューと近すぎると違和感があったからです。

ちなみに、この分類は自分がよく見るやつにアクセスしやすいようにまとめているだけで、それ以上の意図はないです。

夢日記メニューを削除


サイト自体は存在しているのですが、更新していないので一旦リンクを削除しました。そっちに上げた記事はそのうちこのサイトに統合しようとおもいます。継続するの、なかなか難しいですね。ちなみに、今回カテゴリーを削除しようかどうか迷った(アイコン的にも適切なアイコンを見つけるのが厳しい)のですが、できませんでした…。「正直タグがあれば要らないのでは…??」と数年くらい前から思っていたのですが、またもや削除に失敗しました。ブログにカテゴリー不要論はどなたか別の人のブログでも見かけたことがある気がする…

所感


やはりHTMLが膨らんでるので「ウ~ン…」とは思うものの、イイ感じに変更で来たので概ね満足しました。HTMLもCSSもよくわかっていないので、その辺はいつも通り見た目が思った通りになったらOKのスタンスでやりました。デザイン的にも多少は他サイトと差別化できるようなものになったんじゃないでしょうか。たぶん。

とはいえ、飽き性なので1年後くらいには変わってると思います。ねる。おわり。