当サイトをAstro製の静的サイトへとリプレイスしました。

ご覧いただいているこちらのサイトは、これまでWordPressにて実装・運用を行なってきました。 今回新たなチャレンジとして、静的サイトジェネレーターのAstroを使用して再構築を行なってみました。

外見はほとんど変えず、サイトの「内側」だけを変更しています。現在の構成は以下の通りです。

項目変更前変更後
JavaScriptフレームワーク利用なしAstro
メタタグの設定SEO SIMPLE PACKastro-seo
画像最適化Converter for Media等Imageコンポーネント
ブログWordPress投稿機能MDX
ページ遷移アニメーション@swup/astro
お問い合わせフォームContact Form 7SSGform
バリデーション(フロントサイド)JustValidate
Googleアナリティクス連携SEO SIMPLE PACKastro-google-analytics
XMLサイトマップの生成XML Sitemap & Google News@astrojs/sitemap
RSSフィードWordPress標準機能@astrojs/rss
ホスティングレンタルサーバーCloudflare

WordPressでの実装・運用に大きな不満があったわけではないですが、静的サイトに変更することでパフォーマンスが大きく向上し現在のところ大変満足しています。

内部的にはまだまだ改善できる箇所がたくさんありそうなので、業務の合間に修正を加えたいと思います。

将来的にはヘッドレスCMSの実装や、Astroを使用した高パフォーマンスなサイト制作についてもサービス提供したいなと考えております(マークダウンで入稿できるブログ開発もやってみたいです)。

今後ともよろしくお願いいたします。

【2024/07/12追記】
ページ数が多いサイトではないですが、View Transitions APIを導入しました。
ビュートランジション APIを使用することで、シームレスでよりリッチなページ遷移を実現することができます(実装時点でChromeとEdgeでのみ対応)。

【2024/07/22追記】
本サイトの中にブログを立ち上げました。
新たに学んだことや、実装に詰まった点を中心にアウトプットできればと考えています。

【2024/09/11追記】
少しづつブログの記事が増えてきたので「ブログ一覧ページ」にページネーションを実装し、キーワード(タグ)による絞り込み機能を追加しました。

【2025/03/22追記】
Astroのバージョンを4系から5系へアップグレードしました。それに伴い「お知らせ」と「ブログ」の管理方法をコンテンツコレクションからコンテンツレイヤーへ移行しました。

【2025/07/03追記】
ページ遷移アニメーションの実装を、ブラウザネイティブのView Transition APIから、JavaScriptライブラリであるswup.jsに変更しました。より幅広いブラウザでリッチなページ遷移が実現できるようになりました。

【2026/02/19追記】
サイト全体のコンテンツ見直しを行い、ブログ中心のサイト構成へと変更しました。
また、新たにライトモードとダークモードを切り替えるボタンを設置しました。

この記事を書いた人

写真:ブール 代表 西川雅人

Masato Nishikawa

ウェブ制作の現場でコーディングパートナーとして活動しているコーダーです。実務で得た知見やノウハウを、このブログで発信しています。

コーディングや
WordPress実装の
ご相談を承っています。

新規制作から運用フェーズの修正まで柔軟に対応します。
お見積りや実装可否の確認など、お気軽にご連絡ください。