皆さん、こんにちは。
最近、Astroを使って「知識の備忘録」という辞書・用語集サイトの制作に取り組んでいます。
今回は、サイトの見た目や使い勝手を向上させるために行った、いくつかのカスタマイズについてまとめてみました。同じようにAstroでサイトを作っている方の参考になれば幸いです。
1. ヘッダーの統一感を見直し
まずは、サイトの顔となるヘッダーの修正です。
以前は「お問い合わせ」ボタンだけに枠線がついていたのですが、他の「ホーム」や「プライバシーポリシー」と同じテキスト中心のデザインに変更しました。
CSSのクラスを整理することで、スッキリとした統一感のあるナビゲーションになりました。小さな修正ですが、サイト全体の「ノイズ」が減って、コンテンツに集中できるようになったと感じています。
2. 用語ページを「本格的な辞書」スタイルへ
次に、用語詳細（term）ページのレイアウトを大幅にアップデートしました。
参考にさせていただいたサイトのような、情報の整理された「読みやすい」ページを目指しました。
基本データの表形式化: 用語名、読み、NDC分類などをパッと見て確認できるようにテーブル形式でまとめました。
概要ボックスの導入: 冒頭に背景色をつけた要約エリアを設けることで、忙しい読者でも一目で意味がわかるように工夫しています。
外部リンクのカード化: 関連サイトをただの箇条書きにするのではなく、カード形式にすることで、クリックしやすいデザインにしました。
3. 画像周りの徹底的な最適化
今回のカスタマイズで特にこだわったのが、画像の扱いです。
サイトの高速化を目指し、以下の運用ルールを決めました。
AVIF形式の採用: 次世代画像フォーマットであるAVIFを標準にしました。
Astroによる自動変換: 元画像がAVIFであっても、Astroの
コンテンツ内管理: 画像を用語ファイル（Markdown）と同じ src/content/ フォルダ内で管理するようにし、記事と画像の紐付けを直感的にしました。
4. 予期せぬエラーとの格闘
作業中、TypeScriptの型エラー（Code 2322）に遭遇しました。
画像のパスが「ただの文字列」なのか「Astroが解析したオブジェクト」なのかを正しく判定させる必要がありましたが、コードを丁寧に分岐させることで無事に解消できました。
エラーと向き合うことで、Astroの画像処理の仕組みをより深く理解できたのは大きな収穫でした。
まとめ
今回の修正で、サイトの信頼性と読みやすさがぐっと向上したと感じています。
Astroはカスタマイズ性が高く、自分の理想とするデザインに近づけていく過程が本当に楽しいですね。
これからも、より使いやすいサイトを目指して少しずつ改良を重ねていきたいと思います。
最後までお読みいただき、ありがとうございました！
コメント