「行き止まり」を案内する

Webサイトを運営していると、リンク切れやURL変更によって、ユーザーが「存在しないページ」にアクセスしてしまうことは避けられません。 そんな時、無機質なブラウザのデフォルトエラー画面が表示されるのと、サイトの世界観を保ったまま「お探しのページはありません」と案内されるのとでは、ユーザーが受ける印象は大きく異なります。

今回は、AstroとCloudflare Pagesでオリジナルの404ページを実装する方法を解説します。

Astroでの実装: 404.astro

Astroでの実装は非常にシンプルです。 src/pages ディレクトリ直下に 404.astro (または 404.md) というファイルを作成するだけです。

---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="404 Not Found">
  <div class="center-content">
    <h1>404</h1>
    <p>お探しのページは見つかりませんでした。</p>
    <a href="/">トップへ戻る</a>
  </div>
</BaseLayout>

pnpm build を実行すると、このファイルは dist/404.html として出力されます。

Cloudflare Pages の「マジック」

ここで重要なのが、デプロイ先である Cloudflare Pages の仕様です。 Cloudflare Pages（および多くの静的ホスティングサービス）には、「リクエストされたパスに対応するファイルが見つからない場合、ルートディレクトリにある 404.html を探して表示する」 という機能が標準で備わっています。

つまり、特別なルーティング設定（_redirectsファイルやWorkersによる制御）を書かなくても、単に 404.html を置いておくだけで、勝手にカスタム404ページとして機能してくれるのです。

ちなみに、この 404.html が存在しない場合、Cloudflare PagesはサイトをSPA（シングルページアプリケーション）とみなして、すべてのリクエストをトップページ (/) に転送する仕様になっています。作成前に「適当なURLを叩くとホームに戻されてしまった」のは、この仕様によるものです。

詳しくは公式ドキュメントの Serving Pages: Not Found behavior を参照してください。

結論：細部に神は宿る

404ページは、誰も見ないに越したことはないページです。 しかし、万が一のエラー時にこそ、そのサイトの実装品質や運営者の配慮が透けて見えるものです。 メインコンテンツを作り終えたら、ぜひこの「裏口」の整備も忘れずに行いましょう。