ブログをリニューアルしました(2017年1月)

Web Design

Posted  Updated 

明けましておめでとうございます、小倉です。

まだ開設から間もないブログですが、当初は Web 関連記事のみにするつもりがうっかり LGBT 関連のことも書きはじめ、むしろ後者での検索流入が多いというよく分からない事態を経験した 2016 年でした。
本年も「8beat Studio」と小倉をどうぞよろしくお願いいたします。

さて、このたび「STINGER PLUS+」ベースのままで当ブログをリデザインしました。
いくつか変更点をかいつまんでご紹介します。

リニューアルの目的

STINGER シリーズは人気テーマであるがゆえ、そこかしこで似たデザインのブログを見かけます。
当ブログの Ver.1 にあたる前デザインは気をつけて見てやっと「もしかしてSTINGER?」程度にはなっていたとは思うのですが…

PCビュー
PCビュー
スマホビュー
スマホビュー

正直いって辟易していました、色が違うくらいでそこかしこで見たデザインの多くのブログに。WordPress カスタマイズ徹底解説!とか素敵なデザインまとめとか参考になるエントリを書いていても、その発信する情報の信憑性が薄いですよね。ほんとにデザイン知ってるの? どっかからコード拾ってきただけじゃ? と。

かつて界隈を賑わせた病院のサイトとかいい例です(あれは素人の患者さんが好意で作成したもののようですが)。デザインは使いやすさ、見やすさだけではなくブランドイメージにも直結します。

私は「デザイン」が好きだからこそ、その中の人だけの、そのブログだけのデザインというのを重視してしまう傾向にあります。

  • 独自性をだす
  • いま自分が持つ技術を極力さらけ出す
  • 次回につながる試みをする

もっと自分の色を出さねば!という念に駆られ、この目標に近い目的をたててリニューアルに取りかかりました。

ユーザビリティの向上

サイドバーをグローバルメニュー化

STINGER PLUS+ はヘッダにナビゲーションメニュー(カスタムメニュー)を1つ設定できます。
スマホなどの画面が小さいデバイスでは、これがドロップダウンするハンバーガーメニューに変化する仕様です。

私の場合、このメニューにはいくつかのカテゴリページとメールフォームへのリンクを設定していました。が、これらのリンクは既にサイドバーにあるわけです。
それならスマホ用メニューの代わりになり得るのでは?と考えました。

当のサイドバーはスマホビューだと記事本文の下に回り込んでしまい、あまり陽の目を浴びられません。そこでサイドバーをまるごと横からスライドしてくるドロワーメニューにしました。

ハンバーガーメニューには賛否両論あり、STINGER PLUS+ 標準メニューも今回私が採用したドロワーメニューも「ユーザーが使いにくいゴミ」と一蹴される可能性はあります。
しかしスマホでのアクセスが非常に多い今では、Facebook をはじめとしたアプリの利用経験からユーザ側でも「三本線のアイコン=メニュー」というリテラシーが高まっていると考え、実験的に採用しました。

ドロワーメニューは jQuery プラグインも豊富ですが、今回は CSS のみで実装しています。軽量化と管理のしやすさを重視…というのは建前で、私自身が他言語より得意だからです…。

投稿(ポスト)一覧をカード型に変更

この一番の目的は、どのデバイスからもほぼ同じ見た目を実現することでした。

まずは抜粋文を削除しスペースを確保。また、PC ビューのみ表示していた各 SNS でのリアクション数は運営者にとって必要な情報でも、ユーザにとっては不要ということで、まとめて表示させることで占有スペースを小さくしました。

1ページにループ表示させる投稿は最小公約数の12個に変更。
PCもしくはタブレットでは1行に3記事、スマホでは1行に2記事というレスポンシブ特有の空きスペースをなくし、当初の目的を達成しました。

画像表示サイズの最適化

記事本文に載せる画像は、1から作成するならアイキャッチに則るようにしています。ただ iPhone のスクリーンショットなど縦長にならざるをえない場合もあり、そうするとスマホで見た場合にあまりにも大きすぎるんですね。
そこで、縦長の画像のみ縮小表示するよう Javascript で対応しました。

Googleに更新日時を通知

STINGER PLUS+ では公開日のほうを通知するコードになっています。

当ブログで現在もっとも検索流入が多い記事は「LGBT女性のためのiOSアプリ「LING」を使ってみたまとめ」ですが、アプリの使い方や注意事項などがメインの記事であるため、バージョンアップに気付いたら修正を加えています。更新日時を検索エンジンに通知することで、検索結果を見たユーザに新しい情報であることを伝える施策。

とはいえ、情報が少なくきちんと反映されるのかは不明です…更新日だけの表示にすれば確実らしいのですが、公開日は明示すべきだと思うので悩ましいところ。

「もくじに戻る」を自動生成

もくじが必要=記事が長い=もくじ(見出し)を確認したいケースも多い。

トップに戻るボタンだともくじまではまたスクロール操作が必要になり不親切です。<h2>ごとにもくじに戻るリンクをつけました。
毎回リンクを書き込むのは面倒なので自動生成一択です。今後の管理を考えて jQuery を使いました。

URL が変わるとシェア時に不適切だったり、前ページに戻りたいときに何度もブラウザバックしなければならないため URL 末尾のアンカーは非表示に。
また、親テーマ標準のページトップに戻るボタンとスムーススクロールの挙動を合わせ違和感をなくしました。

ローディングアニメーション実装

もう少し軌道に乗れば有料サーバにする予定ですが、現状は制約の多い無料サーバで運営しています。そのため、高速化の対応もできることは少なめ。
手を加えられない部分を補うため、ユーザのストレス軽減を目的に実装しました。

ブログ名にエイトビートというワードを入れているので、音量のようなデザインのアニメーションにしています。この部分が重いと無意味なので、画像は使わず CSS と jQuery のみで構成しました。

表示の高速化と軽量化

モバイルファーストのコーディング

STINGER PLUS+ のブレイクポイントはPC・タブレット・スマホの3つですが、先に触れたメニューを見るとタブレットとスマホがハンバーガーメニューになっています。
フォントサイズなどの細かな指定はほとんど親テーマ側で指定してくれているので、私のカスタマイズにおいてはメニューに則りブレイクポイントを2つとして無駄を省きました。時短ともいいます(笑)

どこかのサイトからコードをコピペしてカスタマイズしていくと、ブレイクポイントがバラバラになったり、共通するコードを何度も書いていたりと「本来の意味でのモバイルファースト」が崩れがちです。そのあたりも点検しすっきりさせるようコードを修正しました。

プラグインの再選定

リデザインのときに限らず時々しているのですが、今回も改めて厳選しました。具体的にはできるだけプラグインを減らし自分で最小限のコードを書くということです。

たとえば、コードを見やすく表示するシンタックスハイライト系プラグインは多機能で便利な反面、デメリットとして読み込みの遅延が挙げられます。
これは Prism.js に変更し、ショートコードで使えるようにしました。

セルフブランディング

アニメーションで印象づけ

自分好みであるミニマルデザインとトレンドであるフラットデザインのいいとこ取りを目指した結果、リンクが分かりにくくなってはいけないので一部のマウスホバー時にアニメーションを加えました。
コードが長くなるためモバイルファーストを遵守して記述し、そのほとんどはPCビューのみに適用しています。

ロゴがふわふわ浮かぶエフェクトのみ全デバイス共通で、遊び心の演出とあわよくば覚えてくれないかなぁという願望が表れています。

プロフィールを増設

元はフッターのみに表示していました。
プロフィールは記事を読んだあとに気になるものなのでフッターのままでもよかったのですが、これまでのデザインだとPCビュー以外は回り込みが解除されたサイドバーがフッターとの間に鎮座。スマホでは…ほぼ見ないですよね、きっと。

フッターから記事直下に移動させ、更にサイドバー兼ドロワーメニューにも表示させるようにしました。
サイドバーはウィジェット、記事直下はテンプレートファイルに関数直書きで実装。

SNSボタンをまとめる

以前書いた「その大量のSNSシェアボタン、本気で要ると思ってる?という話」というエントリ。画面を広く占有するほどのボタンは、SNSサービスを選べる面でユーザビリティに配慮したものという建前にしかなり得ず、実際はユーザの邪魔である場合が多いといった内容です。

この考えは変わっていませんが、まだSNSを絞り込めるほどのデータがありません。そこで、リアクションのカウント数など不要なものは削除したまま、タップ可能領域のサイズを保ちつつ1行にまとめました。
シェアボタン、プロフィール、フォローボタンの3つでこの大きさなら許容範囲内。
フォローボタンはオーバーレイを敷いた記事下部のプロフィールに組み込むことで目立たせています。

今後の課題

実験的なリデザインを行った箇所も多いのでおそらくまた変わってくるとは思いますが、タスクとしてのメモです。

  • STINGER PLUS+ の HTML 構造を修正
  • Retina に対応した画像の出力を考える
  • AMP 対応は様子見、できるだけ軽量化
  • Jetpack パブリサイズ共有で Google+ の公開範囲を修正(なぜかG+側に項目がない…)

やりたいなーと特に思っていたことは大体試せたかなと思います。
このリニューアルが吉と出るか凶と出るかは、しばらくしたら直帰率や回遊率が教えてくれるでしょう。

今後とも 8beat Studio をどうぞよろしくお願いいたします。