こんにちは、NAEです。
先日ブログ名を変更しました。「ぼくの整理メモ」あらため「NaeNote」をよろしくお願いします。
さて、それにあわせて読み手にとって最高に心地よいを目指してデザインの刷新と高速化を行いました。
ベースとさせていただいたテーマはBrooklynです。レスポンシブ対応かつ高速であることが決め手。
（※2016-10-02追記：現在はCONTENTSというテーマを利用しています）
（※2017-02-22追記：WordPress移行に伴い、デザインを全面刷新しました）
デザイン刷新
デザインコンセプトは読み手を邪魔しないです。
せっかく書いたブログ記事、読んでいただけるのであれば記事の内容そのものに集中してもらいたい。
そのため読みにくさの原因となりうる要素は可能な限り省きました。
共通部分
無駄な要素やスペースをなるべく排除します。
利便性を確保しながらも読み手の邪魔にならないレベルで各要素のサイズを調整します。
- ヘッダーとフッター・・・特に表示させておく理由がないので非表示に。（Pro向け機能）
- ブログタイトル・・・文字のみに変更。スマホでは上部固定。ただし高さは邪魔にならないよう狭めに。
- グローバルメニュー・・・スマホ、PCともに上部固定。高さは狭め。各カテゴリにアイコンをつけてわかりやすく。
- Topに戻るボタン・・・すぐタップできるよう右下に固定。目立ちすぎないよう半透明に。
- サイドバー・・・不要な装飾を取り払ってシンプル化。プロフィール欄の文字の回り込みをPCとスマホで切り替え。フォロー欄のボタン配置（縦並び、横並び）も切り替え。
記事部分
- タイトル・・・スマホ表示のとき、文字と周りの空白が大きすぎるので調整。
- 見出し・・・同じくスマホ表示のときの文字の大きさを調整のうえ、見出し感が出るように変更 → デザインの考え方を記事に書きました
- シェアボタン(記事上下)・・・Brooklyn標準装備のものに「LINEに送る」を追加、若干縮小して中央配置。
- シェアボタン（固定）・・・スマホ表示のときのみ左下に配置。邪魔にならないよう大きさを調整し、隙間をあけ、半透明化。
- フォローボタン・・・白抜きのシェアボタンとくっきり区別できるよう、色埋めにしてコントラストを出す。 →設置方法の記事を書きました
- 関連記事・・・Milliardを利用。もともと6記事表示させていたのを4記事に減らして無駄なページの間延びを減らす。
高速化
いくらデザインを工夫しても表示されるまでが遅いと読み手をイラつかせてしまいます。
そこで、GT MetrixとGoogle Page Insightの分析結果とフィードバックをもとに、ページ表示の高速化をはかります。
SNSボタンはカスタムで配置
はてなブログ提供のSNSシェアボタンやはてなブックマークコメント機能はオフにします。
これら、はてなブログの外部にあるサービスを読み込みに行っているので、表示されるまで非常に時間がかかるんですよね。かわりに、SNSボタンはカスタマイズで配置します。
ただしはてなスターは残しておきます。スターつくと嬉しいので。笑
コピペコードに手を入れる
コピペコード、便利ですよね。
でもそれを多用していると、いつのまにか同じ外部ファイルを何回も読んでいたり、重たいJavascriptがダウンロードされるまでページが表示されなかったりと、表示速度を落とす原因になってしまう場合があります。
Google Page Insightsではそれらの原因となっている部分を教えてくれるので、手を入れられる範囲で1つ1つ対応していきます。
- 同じ外部ファイル（CSSやWebフォント）を複数箇所で読み込みに行っている場合はまとめる
- 読み込むWebフォントは最小限にする（こだわりがないなら使わない）
- JavaScriptの読み込み完了を待たずにページが表示されるように工夫する
- 可能であれば、読み込み部分にasync属性をつける
- そうでないものフッターで読み込ませる
記事の画像を圧縮する
景色の写真やレビューなど主たるコンテンツになる画像以外の高精細である必要がない画像についてファイルサイズを縮小します。
アイキャッチ画像や見出しの下に入れるイメージ画像はその代表例。
スマホ表示ならどうせ縮小されるし、パッと見ただけですぐ飛ばされる運命です。わざわざ重い画像ファイルをダウンロードさせるのは時間を食うだけです。
というわけで、すべての記事のアイキャッチ画像・イメージ画像を横幅480px 品質75%のものに置き換えました。
480pxという横幅にしたのは、スマホ表示なら画面幅いっぱいに表示され、PC表示でもそれなりに存在感があるレベルだったからです。
ちなみにHTMLやMarkdownで画像の横幅を指定しても、それは大きな画像を縮小表示するだけなので、データ量の観点では意味がありません。元ファイルを小さくする必要があります。
JavaScriptや管理画面をいじる
- jQueryの多重読み込みを防いでページを軽くする → はてなブログでjQueryの読み込み時間をゼロにする方法（はてなブログの高速化）
- JavaScript（jQuery）をフッターで読み込ませて遅延を防止する → 魔改造によるはてなブログの高速化。jQuery/JavaScriptをフッターに移動する方法
- Twitterライブラリの多重読み込みを防いでページを軽くする → はてなブログが無駄に重くならないツイート埋め込み方法
- ついでに、管理画面でカエレバやヨメレバが重くならないようにする → はてなブログの記事編集画面が重い原因はヨメレバ・カエレバだった件
- はてブなどデフォルトで読み込まれるJavaScript類を軽くする（失敗） → 実はテキストではない…はてブ数を示す「XX users」の正体
まとめ
個人的にはものすごく納得感のあるデザインができたと思っています。
また高速化もそれなりに突き詰められた感があるので満足しています。
今後も、デザインのカスタマイズや高速化の方法を書いていきたいと思います。
コメント