以前からやりたいと思っていたので思い切ってやりました。

理由


大きい理由は下記の3つです。

  • よみやすさ
  • インパクト
  • 統一感

まず、これらについて順番に説明していきたいと思います。

よみやすさ


まず、読み易さについてです。下記は以前の記事内のレイアウトです。

どうでしょうか。サイドバーが邪魔ではないですか?このレイアウトではサイドバーがどうしても視界に入ってしまうために、意識がそちらに行ってしまうと思うんですね。なので記事のレイアウトではサイドバーをなくしたいという想いが以前からありました。

余談ですが、このサイトは(UI上の)読み易さをできるだけ向上させたいと思っておりまして、広告も記事終了後の末尾に挿入しているのみです。自分の美しいサイトに広告を載せるということはわざわざ丁寧に手入れしている庭園のど真ん中で自らウ〇コをするということに等しい行為です。(※別にWebの広告を否定しているわけではなくて、私のサイトには極力載せたくないというだけです。まあ、流石に大量にベタベタ貼ってるサイトは個人的にどうかと思いますが)まあ、サーバ維持費くらいは稼げているので、しかたなしで載せていますが、私は基本的に広告とか載せたくないんですよ。これはどっかで別記事で書きたいと思ってます。

インパクト


下記は現時点のサイトの画像です。

前述の画像と比較してみてください。今の方がインパクトがありますよね。かねてより画像を押し出しつつも、記事のページでは内容にフォーカスできるようなレイアウトにしたいという想いがありました。これは1年半くらい前にWordpressの新しいやつ(←よく知らないのですが最近のやつ)のデザインを見たときからずっと考えてました。

統一感


これは変更前の記事以外のページのレイアウトです。

どうでしょうか。記事ページのレイアウトとサイドバーの幅も違うし、統一感もないでしょう。また、サイドバーの幅が違うためか、ページ切り替え時のチラつきも顕著でした。変更後は全ページのトップに同じ高さの画像を表示するようにしているので統一感が出ていると思います。

現状の解説とか実装とかについて


続いてせっかくなので今のレイアウトの解説や実装の過程について書きます。いろいろ悩んだのですが、下記のようにしました。

  • サイドバーとドロワー(横から出てくるやつ)
  • ヘッダーについて

今回大きく変わっているのは上記2つです。

ドロワーについて


以前のレイアウトのサイドバーは全てドロワーに押し込みました。

もともとは記事以外のページにはサイドバーの相当のものを右側に表示しようとしていたのですが(←説明が難しいんですが、感じてください)サイドバー相当のコンテンツを右側に持ってくるには私のCSS力が圧倒的不足していたり、あとはモバイルを考慮するとこの形がベターだと判断しました。

ドロワーの実装はサルワカさんの下記の記事を参考にして若干修正したもので実装してます。

CSSだけで簡単!ハンバーガーメニューの作り方(スマホ対応)

ヘッダーについて


利用しているテーマのhexo-theme-tranquilpeakはもともとヘッダーが実装されていましたが、そのままでは思った通りに動かすのはムリだったのでカスタマイズしました。

まず、常に表示するようにしました。また、全ての記事の上部は画像ですので背景色は透過にしておいてスクロールアップ・ダウンで透過を解除・再透過するようにしました。下記を見て頂くと、スクロールダウンしたときのみグレーの背景色が表示されるのがわかると思います。

これはもともとのJSのコードを少しいじることで実装できました。ヘッダーを常に表示しているのは理由があって、サイドバーをドロワーにしたことによって動線が確保できなくなると思ったからです。とはいえ、サイドバーに常に表示している時に比較すると動線は悪くなるでしょう。また、どうもGoogleAnalyticsを見ている感じだと、もともとサイドバーの項目はそんなにクリックされているようにも見えなかったので、そもそも動線を意識する必要性がないような気がしますが。

加えてBluma CSSのnavbarの必要な部分のみ組み込んでます。高さとかはかなり無理やり合わせてます。各リンクは初めは全て文字列(Menu, Homeなど)にしようかと思ったのですが、味気ないのでアイコンにしました。アイコンにするとあまりITに詳しくない人にとっては解り辛いのではないかと思いました。思ったのですが、最近はブラウザとかSNSもそういうレイアウトなので「まあわかるだろう」というのと、そもそも前述の通りあんまりクリックされてないみたいなので、ええかな。という感じですね。

ただ、このヘッダーは一部のページや操作によっては若干の問題がでるのは認識してます。認識しているんですが、コスト・メリットで考えれば捨ててもいいレベルだと思ってるのでたぶん修正しないと思います。

その他


今回でかなりコードを消したのですが、まだ不要なコードが若干残っているのは認識しており、完全にクリーンアップするまではもう少し頑張らないとダメです。CSSのサイズ的には20KBくらい減ってます。まあ、CSS以前にもっと減らせるところはあるんですが…。その他、今回の変更に乗じてボトムバーの削除とかもしてます。

また、ブラウザキャッシュが10日で設定してあるので、一回来てる人はしばらくは以前のレイアウトで表示されたりすると思います。

なにはともあれ、モダンなレイアウトに置き換わったのではないかと思いますし、サイトの変更は一旦ここで落ち着く[1]んじゃないかと思います。


  1. と、言いながらすぐ変えたがるので、また変更したいところがでてくるとおもう ↩︎