Astroのテーマ「Fuwari」の紹介とカスタマイズ

Fri, 08 May 2026 00:00:00 GMT

このサイトはテンプレートテーマ「Fuwari」とフレームワーク「Astro」で作りました。

Astroは、静的（SSG）サイトやコンテンツ中心のWebサイトの作成に適したフレームワークです。魅力的な機能満載で、筆者はサイト制作はもっぱらAstroを使っています。

いつもはデフォルトの状態から作成を始めるのですが、このブログでは既存のテンプレートテーマを使用させていただきました。Fuwariというテーマです。

かわいいイラスト、角丸で統一されたあしらい、抑えたカラートーンが目を引きますが、それだけではありません。機能開発の側面でも便利な実装が標準装備されていました。

特に良いと思った機能をご紹介します。

ページ遷移時にふわっとしたアニメーションが自動的に適用されます。画面が一瞬で切り替わるのではなく、前のページがフェードアウトし、新しいページがフェードインするような効果が心地よいですね。

この遷移アニメーションは、@swup/astroパッケージを使うことで実装されています。特別な設定なしに使い始められるのが嬉しいポイントです。

ブログ記事や固定ページをMarkdown形式で書くことが出来ます。この仕組みは、Astro標準機能のContent Collectionsを利用した実装です。

src/content/posts/ ディレクトリ下にMDファイルを作成し、YAMLフロントマター（タイトルや公開日などのメタデータ）とMarkdown本文を書くだけで公開ページが生成されます。

これも追加実装無しですぐに使えるのがありがたいですね！

静的サイトなのに検索ができちゃいます。

Pagefindは静的サイト向けの全文検索ライブラリで、データベースを必要とせず、静的ファイルのみで検索機能を実現します。

AstroでビルドしたHTMLから検索インデックスを自動生成します。検索に必要なJavaScriptやインデックスファイルはすべてビルド成果物に含まれるため、CDNやホスティングサービスにそのままデプロイできます。

公式サイトによると、10,000ページ規模のサイトでも検索に必要なネットワーク転送量は300kB以下（多くの場合100kB前後）に抑えられるそうで、パフォーマンス面でも優秀です。

すごいですね〜！

SEOやブログ読者向けに欠かせない3つのファイルが自動生成されます。

sitemap.xml は@astrojs/sitemapで実装。astro.config.mjsに設定を追記するだけで、ビルド時にサイト内の全ページを収録したsitemap-index.xmlが自動的に出力されます。

rss.xml は@astrojs/rssパッケージを利用したsrc/pages/rss.xml.tsで生成されます。記事タイトル・公開日・説明文、Markdownで書いた本文など、RSSに表示させたいものをカスタマイズできます。

robots.txt はsrc/pages/robots.txt.tsで生成されます。全クローラーに対してAstroの内部ディレクトリ（/_astro/）へのアクセスを禁止と、sitemapのURLの明示がデフォルトで書かれています。

以下、すこしだけ追加で機能実装、設定調整しました。

Fuwariはかわいい見た目と必要十分な機能が最初から備わっている、完成度の高いテーマだと思いました。特に、作るのが億劫になりがちなsitemap.xmlやrss.xml、robots.txtがデフォルトで生成可能になっているのは良いですね。

Astroでブログを始めたい方にはぜひ試してみてほしいテーマだと思います！

::github{repo="saicaca/fuwari"} ::github{repo="withastro/astro"}