サイトの共通UIを整える―ロゴ・スマホナビ・RSS導線を改善

記事が増えると共通UIの細かい違和感が目立ってきた#

記事やカテゴリを追加してPCとスマホで確認すると、ヘッダー、ナビゲーション、フッターのように全ページへ共通して表示される部分の小さな違和感が見つかった。今回は、サイト全体で使うUIの確認を進める。

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

まずロゴ。

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

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

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

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

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

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

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

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

特に気になったのが、

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

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

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

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

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

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

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

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

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

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

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

Home
記事一覧
About

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

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

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

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

カテゴリの内部値がそのまま表示される問題も見つかった#

AI記事を追加したとき、Frontmatterのsubcategory: 'development-support'が画面にもそのまま表示された。記事側の内部値は変更せず、Astro側のtaxonomy定義で表示名を「開発支援」へ変換する問題として扱った。この分類値と表示名の詳細はAstro Content Collectionsのschemaエラーを直す―category・subcategoryの設計を見直すへ分けている。

修正後は、AIカテゴリのサブカテゴリが「開発支援」と表示されることを確認した。

PC・スマホで表示を確認する#

ロゴ、カテゴリ表示、ナビゲーション、RSS導線を変更した後、PCとスマホ幅で記事ページと共通フッターを確認した。狭い画面ではリンクが途中から現れて見えないようにせず、次の行へ自然に折り返される状態を確認する。

共通UIを直して分かったこと#

変更点をまとめる。

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

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

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

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

実際に使いながら、気になった部分をその都度修正していく。