目次

1. 初めに

以前の記事でテーマを適用してから大分改良したので、 画面基準でどこに手を加えたのかをわかりやすくするために一覧化しました。

また、どの程度変化したのか定量的に知りたくなったので、Webサイトを評価するLighthouseなるツールを使ってみました。

2. ブログ変更概要

まずはテーマ適用時と改良後の変更概要です。

後述の一覧が意外と長くなってしまったので、概要も作成しました。

No 実装状況 凡例 適用時 改良後
01 実装済み o 17 36(=17+6+13)
02 不十分な実装(要改良) i 6 0
03 未実装(実装の発案含む) x 13 0

3. ブログ変更一覧

次にテーマ適用時と改良後の変更一覧です。

ブログデザインは体感70%ほど踏襲したので大きな変化はありませんが、 ソースコード(html,md,scss,js)は見やすいように整理したり、できることを増やしたりなど、大改造したので原型を留めていません。

No カテゴリ 画面要素 適用時 改良後 画面要素説明
01 画面共通 FontAwesomeアイコン o o 画面上で項目が何を意味するかわかりやすくするため、アイコンを設置する。
02   下書き保存 x o 記事を投稿する前に下書きとして一時的に保存する。
03   日本語化 x o コンテンツを日本語で表示する。
04   レスポンシブデザイン o o デバイスの画面サイズに応じて表示を最適化する。
05   ダークテーマ o o テーマのデザインがダークである。
06 画面共通 - ヘッダ ブログ名 o o ブログ名を表示する。
07   ナビバー o o ナビバーを表示する。
08 画面共通 - トップ トップ画像 x o トップ画像を表示する。
09 画面共通 - サイドバー 記事検索 x o ブログ内で記事を検索するフォームを表示する。
10   最近の記事 o o 最近投稿した記事を表示する。
11   タグ i - タグをアルファベット昇順で表示する。
12   => 人気のタグ - o タグを記事数降順で表示する。
13   トップへ戻るリンク x o トップへ戻るリンクを表示する。
14 画面共通 - フッタ コピーライト o o 著作権情報を表示する。
15   ソーシャルリンク o o ソーシャルアカウントのリンクを表示する。
16 ホーム画面 記事一覧(簡易) i - 記事一覧(簡易)を表示する。
17   => 記事一覧(詳細) - o 記事一覧(詳細)を表示する。1記事あたりの情報量を多くし、見やすい形式。
18   記事ヘッダ画像 x o 記事の情報を表示する。
19   投稿時間 o o 記事の情報を表示する。
20   編集時間 x o 記事の情報を表示する。
21   タグ o o 記事の情報を表示する。
22   記事説明 i - 記事の情報を表示する。
23   => 記事抜粋 - o 記事の情報を表示する。
24   記事を読むリンク x o 記事の情報を表示する。
25   記事一覧(詳細)のページ送り x o 記事一覧(詳細)のページ送りを表示する。
26 タグ一覧画面 タグ一覧(投稿日昇順) i - タグ一覧を記事の投稿日昇順で表示する。
27   => タグ一覧(記事数降順) - o タグ一覧を記事数降順で表示する。また各項目に記事の件数を表示する。
28 アーカイブ画面 年別アーカイブ i - 年別の記事一覧(簡易)を全て表示する。
29   => 年月別、タグ別アーカイブ - o 年月別、タグ別の記事一覧(簡易)を個別に表示する。また各項目に記事の件数を表示する。
30 タグ別記事一覧画面 タグ別記事一覧(簡易) i - タグ内の記事一覧(簡易)を投稿日降順で表示する。記事を作成する際に新しいタグを使う場合はタグ専用ファイルを作成する。
31   => タグ別記事一覧(詳細) - o タグ内の記事一覧(詳細)を投稿日降順で表示する。タグ専用ファイルは作成しない。
32 プロフィール画面 紹介文 o o 投稿者やブログの紹介文を表示する。
33 記事画面 タイトル o o 記事の情報を表示する。
34   投稿時間 o o 記事の情報を表示する。
35   編集時間 x o 記事の情報を表示する。
36   変更履歴 on GitHub x o 記事の情報を表示する。
37   タグ o o 記事の情報を表示する。
38   記事ヘッダ画像 x o 記事の情報を表示する。
39   目次 o o 記事の情報を表示する。
40   記事内容 o o 記事の情報を表示する。
41   記事内容画像 o o 記事の情報を表示する。
42   記事のページ送り x o 記事のページ送りを表示する。

4. Lighthouse(Webサイト評価ツール)

Google製のWebサイト評価ツールで独自の観点により品質を評価してくれるみたいです。 デベロッパーツールから実行できるので手間いらずです。

実行前に評価項目や点数の見方を簡単に整理してみました。 大体の内容を掴めれば問題ないかと思います。

4.1. 評価項目

Lighthouse公式ドキュメント(WEB.DEV) を基に翻訳して情報を整理してみました。

  • Performance (パフォーマンス)
    • サイト内の処理速度に関する評価
      • ページの読み込み速度
      • 画像の表示速度
      • ユーザーの操作に対するレスポンス速度
      • など
  • Accessibility (アクセシビリティ)
    • 以下に対して最適な作りになっているか
      • サイトの訪問者
      • 検索エンジンのための収集ロボット
      • など
  • Best Practices (ベストプラクティス)
    • パフォーマンス低下に繋がる事をしていないか
      • httpsを使用しているか
      • キャッシュを利用しているか
      • 画像のアスペクト比が適切あるか
      • 古く脆弱性があるAPIを使っていないか
      • など
  • SEO (検索エンジン最適化)
    • 検索エンジンの結果ランキングでページが最適化されているか
      • タイトルタグがあるか
      • メタタグのディスクリプションがあるか
      • モバイルフレンドリーになっているか
      • など

4.2. 点数の見方

色 点数 合否
赤 000 - 049 不合格
オレンジ 050 - 089 要改良
緑 090 - 100 合格

5. Lighthouseによる評価

5.1. JekyllCleanDarkテーマ適用時の評価

本当は自分のリポジトリに適用した時点で評価したかったんですが、 いろいろな理由(要約するとめんどくさい)でテーマのデモサイトで評価してみました。

評価概要を画像で掲載します。 詳細は こちら になります。

適用時の評価

5.2. このブログの改良後の評価

続いて改良後を評価してみました。

評価概要を画像で掲載します。 詳細は こちら になります。

改良後の評価

6. 評価にて感じたこと

これでテーマ適用時と改良後の点数が評価ツールによりわかりました。 所感では大分良くなったと思っていましたが、点数からも良くなったことが分かりました。

後は評価項目以外でも評価できる箇所(各ページの情報の出し方や記事検索など)はあるので、 使ってみてどうなるかというところですね。

これからも改良は続けていきたいです。

7. 余談

テーブルの表示に関してです。

テーブルにスクロールバーを表示させて見出しを固定させたかったのですが、 前者は現状のmd記法(kramdown)では不可能で、独自拡張されたmd記法でないと記述できなさそうです。 もしくはmd記法内でhtml記法のテーブルを直接記述しないと実現できないみたいですが、編集が大変そうで手が出せません。 なので代替案としてON/OFFボタンを設置しました。

7.1. 2021/09/15 追記

現状のmd記法にスクロールバーを表示させる方法があったので、テーブルの表示方法を変更しました。 詳細は このリンク を参照してください。

8. 出典元・参考サイト

  1. Lighthouse公式ドキュメント(WEB.DEV)
  2. Jekyll: How to get markdown parsing inside blocks using Kramdown? - Stack Overflow