第11回 ゆまラボのUIをさらに修正する―ロゴ、カテゴリ表示、スマホ表示、RSS導線を見直す

第10回までで、カテゴリ、連載、タグから記事を探せる構成まで追加した。

今回はそこから少し見た目と導線を修正する。

対応するのは次の4点。

• ヘッダーへ「ゆまラボ」のロゴを適用
• 新しく追加したサブカテゴリが英語の内部値で表示される問題を修正
• スマホで「次へ」やHomeなどが途中から表示されることがある問題を修正
• フッターへRSSフィードの導線を追加

どれも大きな機能追加ではない。ただ、記事数やカテゴリが増えてくると、このような細かい部分がかなり気になる。

ヘッダーへ「ゆまラボ」のロゴを適用#

まずロゴ。

これまでは、ヘッダー左側にテキストで「ゆまラボ」と表示していた。

シンプルではあるものの、サイト名だけなので見た目としては少し寂しい。

そこで、用意した「ゆまラボ」のロゴ画像をヘッダーへ追加した。

画像の横には「ゆまラボ」のサイト名も残している。ロゴ単体にはしていない。

これならロゴが小さく表示される画面でもサイト名を確認できるし、これまでのヘッダー構成も大きく変わらない。

記事ページでも同じヘッダーを使うため、記事を直接開いた場合にもロゴが出る。

新しいサブカテゴリが英語のまま表示される#

今回もう一つ気になったのがカテゴリ表示。

AIの記事を追加するため、Frontmatterへ次のような値を設定した。

category: 'ai'
subcategory: 'development-support'

内部値として使う分にはこれで問題ない。

ところが実際のトップページを見ると、サブカテゴリ名もそのまま表示されていた。

画面上では、

AI
└ development-support

となっている。

記事の管理用としては英語の内部値の方が扱いやすいが、読者向けの表示まで英語にする必要はない。

ここは「開発支援」と表示したい。

Astroではどこを修正するのか#

今回の問題は、MarkdownのFrontmatterを日本語に書き換えれば解決、という話ではない。

例えば、

subcategory: 'development-support'

はそのまま維持する。

修正するのは、Astro側で内部値を画面表示用の日本語へ変換している部分。

考え方としては次のような対応表を持たせる。

const subcategoryLabels = {
  setup: '初期構築',
  deploy: 'デプロイ・インフラ',
  design: 'デザイン・UI',
  operation: '運用・改善',
  'development-support': '開発支援',
};

記事側は内部値、画面側は日本語表示という役割分担にする。

新しいサブカテゴリを追加したときに英語がそのまま出た場合は、まず記事のMarkdownを直すのではなく、カテゴリ・サブカテゴリの表示名を管理している定義を確認する。

修正後はdevelopment-supportが「開発支援」と表示される。

画面確認時点のAIカテゴリは3件。ここで見るのは件数より、サブカテゴリ名が日本語で表示されている点。

新着記事側でも、

AI › 開発支援

という表示になる。

今後サブカテゴリを増やす場合も、内部値と表示名を分けておけば同じ形で追加できる。

スマホで「次へ」やHomeが途中から表示される問題#

PCでは問題なく見えていても、スマホ幅にするとナビゲーションの表示が崩れることがあった。

特に気になったのが、

• 記事末尾の「前の記事・次の記事」
• フッターのHome、記事一覧、About

など、複数のリンクを横方向に並べている部分。

画面幅が狭い状態で無理に横へ並べると、リンクが中途半端な位置で折り返され、「次へ」やHomeだけが途中から表示されるように見えることがある。

今回は、狭い画面ではリンクが自然に折り返せるようにナビゲーション側を修正した。

重要なのは、PC用の位置をそのままスマホへ押し込まないこと。

横幅が足りなければ次の行へ送る。リンク同士の間隔も残す。このような動きにしておけば、画面幅が変わっても途中から文字だけが現れる状態を避けやすい。

この部分はPC表示だけでは判断できないため、修正後はスマホ幅でも確認する。

RSSフィードへの入口がなかった#

Astro側では以前からRSSフィードを生成している。

ただし、RSSが存在していても画面上にリンクがなければ、普通にサイトを見ている人は気づきにくい。

修正前のフッターにあるのは次の3項目。

Home
記事一覧
About

そこでフッターへRSSアイコンとRSSリンクを追加した。

新しいRSSは作らず、すでに生成しているRSSフィードへの入口を追加する。

ブログをRSSリーダーで追いたい人は、このリンクから更新通知を受け取れる。

サイト内の記事一覧だけでなく、外部のRSSリーダーから更新を追える導線も用意できた。

ロゴ・表示名・スマホ・RSSの変更点#

変更点をまとめる。

• ヘッダーへ「ゆまラボ」のロゴを追加
• 記事ページを含む共通ヘッダーへロゴを反映
• development-supportを「開発支援」と表示するよう修正
• Frontmatterの内部値と画面表示名を分離
• スマホ幅でナビゲーションが不自然に折り返す問題を修正
• フッターへRSSアイコンとRSSリンクを追加

第8回で大きくデザインを変更したあとも、記事やカテゴリを増やすと新しい問題が出てくる。

今回のdevelopment-supportも、新しいカテゴリを実際に追加したから気づけたもの。

ロゴやRSSも、サイトを作り始めた段階では必須ではなかったが、記事数が増えてくると追加したくなる。

一度デザインを決めて終わりではなく、実際に使いながら気になった部分をその都度修正していく。