本日は、運営している辞書サイトのユーザー体験を向上させるため、Astroプロジェクトの内部構造の整理とデザインの統一作業を行いました。1. 用語詳細と解説記事の紐付け強化まず、用語集(dictionary)と、それに対応する一歩踏み込んだ解説記事(articles)の間で、スムーズに相互移動ができるよう導線を整理しました。
特に、解説記事側の getStaticPaths において、dictionary コレクションからデータを取得して紐付けるロジックを見直しました。これにより、用語ページから「この記事について詳しく読む」といった内部リンクを正確に表示できるようになりました 。2. デザインの一貫性と広告の復旧各ページでバラバラになっていたパンくずリストのデザインを、ol/li 構造に統一しました 。あわせて、一時的に表示が消えていたサイドバーの検索窓や、ページ上下・サイドバーの広告ユニット(忍広告、楽天モーションウィジェット)を適切な位置に再配置しました 。3. 最新の Astro 5.0 構成への適応プロジェクトの心臓部である src/content.config.ts を、最新の loader(glob)を用いた構成に更新しました 。型安全の強化: articles スキーマに ndc_code や related_terms を追加し、TypeScriptのエラーを解消しました。柔軟なデータ処理: フロントマターの日付(date)が文字列であっても、自動的に Date オブジェクトに変換されるよう z.union と transform を組み合わせて実装しました。外部リンクの最適化: 外部リンク用のデータ構造を定義し、サイト名が未入力でもエラーにならないよう柔軟性を持たせました。4. コンポーネントとレイアウトの役割分担今回、既存のファイルの必要性についても再検討しました。BlogCard.astro: 外部リンクを画像や説明文付きでリッチに表示するために継続して採用することにしました 。DictionaryLayout.astro: 1万語を超える用語データを表示するための専用テンプレートとして、今後も重要な役割を担います。特に、基本情報の一覧表示や、Cocoonテーマを継承したスタイル定義を維持するために不可欠なファイルであることを再確認しました 。今後の展望土台となる型定義や共通パーツの整理が一段落したため、今後は表示スピードの高速化や、さらなるコンテンツの拡充に注力していく予定です。最新のAstroの機能を活用することで、よりメンテナンスしやすく、ユーザーにとっても使いやすいサイトへと進化させていきたいと思います。
2026年4月2日:Astroサイトの構造整理と詳細ページの強化


コメント