Astro辞書サイトの改善作業記録

# Astro辞書サイトの改善作業記録

2026年4月10日

## はじめに

本日は、Astroで制作している辞書型サイト「知識の備忘録」の改善作業を、Claude(Anthropic社のAIアシスタント)と一緒に進めました。作業は大きく「コードの品質向上」「コンテンツデータの修正」「自動生成スクリプトの改善」の3つに分かれ、のべ230件以上のファイルに手を入れることになりました。この記事では、どのような問題を発見し、どのように解決したかを振り返ります。

## サイトの概要

このサイトは、NDC(日本十進分類法)という図書館で使われている分類体系をベースに、さまざまな用語の意味を調べられる辞書サイトです。Astroという静的サイトジェネレーターで構築しており、現在230件以上の用語ページを公開しています。コンテンツの一部はGemini APIを使って自動生成しており、そのスクリプトも合わせて整備しています。

## 今回対応した改善内容

### 1. ipa・synonyms・summary_boxフィールドの表示追加

スキーマには定義済みなのに画面に表示されていないフィールドが3つありました。`ipa`(発音記号)はタイトルの直下にモノスペースフォントで表示するようにしました。`synonyms`(同義語)は青い丸タグのデザインで定義ボックスの下に並べました。`summary_box`(要点まとめ)は黄色のボーダーとPOINTラベル付きの枠で本文前に表示するようにしました。スキーマに項目があるにもかかわらず表示されていないのはもったいないので、この修正はコストパフォーマンスが高かったと感じています。

### 2. 改行コード(CRLF)の統一

プロジェクト内のファイルの改行コードがWindowsのCRLFとLinuxのLFで混在していました。WordPressからコンテンツを移行した際にWindowsで作業したファイルが混入したことが原因です。`src/`配下の全ファイルをLFに統一し、再発防止のために`.gitattributes`と`.editorconfig`も追加しました。今回の作業でも再混入が見られたため、何度かこの修正を繰り返しています。

### 3. PagefindUI初期化ロジックの共通化

Pagefindというサイト内検索ライブラリの初期化コードが、`Layout.astro`と`index.astro`の2か所に重複して書かれていました。`initPagefindUI(element, placeholder)`という関数に汎用化し、`Layout.astro`の1か所にまとめました。`index.astro`側の重複スクリプトは丸ごと削除しています。コードの重複はバグの温床になるため、早めに対処できてよかったです。

### 4. OGP画像の設定

SNSでシェアされたときに表示される`og:image`が一切設定されていませんでした。デフォルト用のOGP画像(`og-default.png`)を作成し、辞書ページにはサムネイルがある場合はそれを、ない場合はデフォルト画像を使うよう`Layout.astro`を修正しました。TwitterカードもSummaryから`summary_large_image`に変更し、大きい画像カードで表示されるようになっています。なお後日、このOGP画像が2MB・1424×752pxと規格外のサイズになっていることが発覚したため、31KB・1200×630pxに再生成しています。

### 5. BreadcrumbList JSON-LDの追加

Googleのリッチリザルト(検索結果でのパンくず表示)に必要な`BreadcrumbList`のJSON-LDが未実装でした。辞書ページ(`dictionary/[id].astro`)にはすでに`DefinedTerm`のJSON-LDがありましたが、BreadcrumbListがなかったため`@graph`形式で両方を1つの`

タイトルとURLをコピーしました