デザイン・UI

GA4 Data APIの直近30日PVをContent Collectionsの記事と照合し、上位3件をゆまラボのTOPページへ自動表示した。既存ArticleCardを再利用し、PV数や順位は表示しない構成にした。

GA4 Data APIで取得した記事別PVをCloudflare Pagesのビルドでも使うため、サービスアカウント、組織ポリシー、OAuth本番化、ADC再認証、Cloudflare Secret登録までを確認した。

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

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

PCでは問題なく読めたページが、スマホでは画像付近で止まったように見えた経験から、重い画像がモバイル表示へ与える影響を確認します。ゆまラボでAstroの画像最適化、srcset、WebP、遅延読み込みを適用した実測も振り返ります。

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

記事一覧のアイキャッチとSNS共有時のOGP画像を別々に管理せず、1枚の元画像から用途別に出力する方法を考えます。現在のゆまラボのXリンクカードとAstro画像処理を踏まえ、Frontmatter、getImage()、フォールバックまで実装前に確認します。

Astroで作成しているゆまラボの記事本文に、見出しアンカーとURLコピー用のリンクを追加した作業記録。あわせてトップページへヒーロー、連載カード、カテゴリカードを追加した。

AstroブログのheroImageを記事一覧と記事本文へ表示し、同じ画像から1200×630のOGP画像を生成。画像なしの記事との互換性、summary_large_image、一覧レイアウトまで確認した記録です。

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

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

第7回で決めたデザイン方針を実際のAstroサイトへ反映。トップ、記事一覧、About、目次、前後記事リンクを追加し、GitHubへのpush後に発生したCloudflareのデプロイエラーも修正します。

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