Webデザイン

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

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

404ページはSEO対策のために作るものではなく、存在しないURLへ来たユーザーをサイト内へ戻すためのページです。AstroとCloudflare Workersで正しい404ステータスを返しながら、Homeや記事一覧への導線を残す構成を確認します。

技術ブログにアイキャッチ画像は必要なのか。noteの見出し画像やサムネイル表示、Google Discoverの画像要件、現在のゆまラボの記事一覧を見ながら考えます。

AIで作成したゆまラボのロゴを例に、モチーフのまとめ方、画像内文字、小さいサイズでの見え方、ヘッダーへ配置するときの確認点を実際の変更前後画面と合わせてまとめます。

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

第9回のFrontmatter整理をサイト側へ反映し、カテゴリ、細分化カテゴリ、連載、タグから記事を探せる構成へ変更。変更前後の画面を比較しながら確認します。

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

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