UI

Astroの初期テンプレートから始めたゆまラボの変更を振り返り、Webサイトの個性をどこに出すと使いやすさを壊しにくいか、逆に独自性を強くしすぎたときに起きる問題を考える。

2026年9月13日の公開中のゆまラボをPCブラウザで開き、ウィンドウを手動で縮められる限界まで狭くした。トップ・記事本文・連載一覧・カテゴリ一覧の折り返しと横方向の破綻を実画面で確認する。

タグ一覧を人気タグとカード型の一覧へ変更し、タグ検索と並び替えを追加。記事末尾には既存Frontmatterから最大3件の関連記事を自動表示し、既存のタグURLやnoindex、連載導線を残したまま動作を確認した記録です。

AstroはMarkdown見出しへ自動でIDを付けるため、追加プラグインなしでもページ内アンカーを使えます。長い技術記事の目次や特定セクション共有で役立つ一方、見出し変更によるURL切れ、UIの増加、固定ヘッダーやコピー機能の注意点もあります。

記事本文のコードブロックへコピー操作を追加し、TOPページの「連載から読む」を3連載のカード表示へ変更しました。Clipboard APIのフォールバック、複数コードブロック、既存の連載カード再利用まで記録します。

カテゴリ・サブカテゴリに残っていた汎用説明を実際の記事内容に合わせて変更し、連載にも共通の説明データを追加しました。/series/を説明・記事数・導線を持つカード表示へ変更した内容を記録します。

記事一覧、カテゴリ、サブカテゴリ、連載詳細で、一覧末尾だけにあったページナビを上部にも追加しました。上下のナビを共通コンポーネント化し、同じpage・sort状態を使うようにした内容を記録します。

TOPページで連載をカテゴリより上へ移動し、記事一覧・カテゴリ・連載詳細へ10件表示、新しい順と古い順の切り替え、最初・前へ・次へ・最後のページ移動を追加した内容を記録します。

Google AdSenseのプライバシーポリシー追記、お問い合わせ先の独自ドメインメールへの変更、全記事へのupdatedAt追加、記事H1とfaviconの小さな修正を行った内容を記録します。

WEB制作・AI・開発支援の説明をtaxonomy側で管理するよう変更し、記事一覧・タグ・連載ページに残っていた本文側の重複ナビゲーションを削除した内容を記録します。

ゆまラボのAboutページへ運営者情報とプロフィール画像を追加し、全記事へパンくずとBreadcrumbListを実装。カテゴリページの重複ナビと記事本文のH1重複も修正した内容を記録します。

ゆまラボのヘッダーへ記事一覧・カテゴリ・連載・タグとサイト内検索を追加。横長の表を表だけ横スクロールできるように修正し、404だったsitemap.xmlも追加した内容を記録します。

ゆまラボのヘッダーへロゴを適用し、新しく追加したサブカテゴリが英語で表示される問題、スマホでナビゲーションが崩れる問題、フッターのRSS導線をまとめて修正した内容を記録します。

独自ドメインで公開したAstroブログの修正前画面を確認し、noteを参考にトップページ、記事一覧、記事本文、Aboutを見直す方針を整理します。