#営業用ポートフォリオサイト、完成したと思ったらまだ足りなかったもの

営業用ポートフォリオサイトが「もう完成だ！」と思えるところまで来ました。

デザインも整えた。

多言語対応も入れた。

サービスページも作った。

ブログも表示できる。

OG画像も設定した。

かなり満足していたのですが、最後に見直してみると、まだ抜けているものがいくつかありました。

それが今回気づいた、

• カスタム404ページ
• エラーバウンダリ
• robots.txt / sitemap

です。

どれも実装自体はそこまで難しくありません。

でも、実用サイトとして見るとかなり大事な部分でした。

#Not Found ページがなかった

まず気づいたのが、カスタム404ページです。

存在しないURLにアクセスしたときに表示されるページですね。

正直、言われるまで完全に頭から抜けていました。

「確かに、そういうページ見たことあるわ」となりましたが、制作中はトップページ、サービスページ、ブログ、問い合わせページなど、見える部分に集中していて、404ページまで意識できていませんでした。

404ページがないと、Next.js のデフォルト画面が表示されます。

もちろん、それでもサイトとしては動きます。

でも営業用ポートフォリオとして考えると、少しもったいないです。

存在しないページにアクセスしたときに急にデフォルト画面が出ると、ブランドの一貫性が崩れます。

人によっては「細かいところまで作れていないのかな」と感じるかもしれません。

実装自体はかなり簡単です。

Next.js App Router では、not-found.tsx を作るだけでカスタム404ページを用意できます。

ただ、私のポートフォリオサイトは多言語ルートにしているので、単純に1ページ直書きするだけだと少し違和感がありました。

そのため、messages/types.ts に新しく NotFoundContent 型を追加し、ja / mn / en の各テキストファイルに404用の文言を追加しました。

やったことはこんな感じです。

• app/[locale]/not-found.tsx
• messages/types.ts
• messages/ja.ts
• messages/mn.ts
• messages/en.ts

日本語、モンゴル語、英語でそれぞれ自然に表示できるようにしたので、少し時間はかかりました。

でも、多言語サイトとしてはこの形の方がきれいです。

#error.tsx もなかった

次に気づいたのが、error.tsx です。

これは、ページやコンポーネントで予期しないエラーが起きたときに表示する「専用のエラー画面」です。

404ページとは役割が違います。

• not-found.tsx

  存在しないページにアクセスしたとき

• error.tsx

  ページ内部で JavaScript エラーやデータ取得エラーが起きたとき

error.tsx がないと、環境や状況によっては Next.js のデフォルトエラー画面が出たり、白画面のように見えたりします。

ユーザーから見ると、ただ「サイトが壊れた」と感じる可能性があります。

これも完全に抜けていました。

404ページは「ページが見つからない」状態。

エラーバウンダリは「ページの中で何かが壊れた」状態。

そう考えると、どちらも実用サイトには必要です。

営業用サイトなら、エラーが起きたときも最低限、

• 問題が発生しました
• もう一度試す
• ホームに戻る

のような表示があるだけで印象が変わります。

これも今後の制作では、最初からチェックリストに入れておきたいと思いました。

#robots.txt / sitemap もなかった

さらに大事だったのが、robots.txt と sitemap.xml です。

最初に、

多言語サイトなのにクローラー向け設定がゼロ。SEO的に大きなマイナス

と言われたときは、正直「なんだそれ？」となりました。

でも調べてみると、かなり大事なファイルでした。

ざっくり言うと、

• robots.txt

  検索エンジンに、どこをクロールしていいか伝えるファイル

• sitemap.xml

  検索エンジンに、サイト内にどんなページがあるか伝えるファイル

です。

特に私のサイトは、日本語・モンゴル語・英語の多言語構成です。

そのため、

• /ja
• /mn
• /en
• /ja/services
• /mn/services
• /en/services

のように、同じページでも言語ごとにURLがあります。

これを検索エンジンにちゃんと伝えないと、せっかく作ったページを見つけてもらいにくくなります。

Next.js App Router では、これも比較的簡単に作れます。

• app/robots.ts
• app/sitemap.ts

を追加するだけです。

今回は、robots.ts では全体のクロールを許可しつつ、/api/ はクロール不要なので除外しました。

sitemap.ts では、https://ezaya.dev をベースにして、ja / mn / en × 各ページのURLを生成する形にしました。

これで、検索エンジンにサイト構造を伝えやすくなります。

#完成したと思ってからの見直しが大事

今回思ったのは、「見える部分が完成した」と「実用サイトとして完成した」は少し違うということです。

トップページやデザインが整っていると、つい完成した気になります。

でも実際には、

• 存在しないURLにアクセスしたらどうなるか
• ページ内部でエラーが起きたらどうなるか
• 検索エンジンにページ構造を伝えられているか

こういう部分も、公開サイトとしてはかなり大事でした。

特に営業用ポートフォリオサイトなら、細かい部分まで整っていること自体が信頼につながります。

自分がWeb制作を受ける側なら、こういう見えにくい部分もちゃんと用意しておきたいです。

#今後のチェックリスト

今回の反省として、今後サイトを作るときは最低限これを確認します。

• not-found.tsx はあるか
• error.tsx はあるか
• robots.ts はあるか
• sitemap.ts はあるか
• 各ページに metadata はあるか
• favicon はあるか
• フォーム送信後のUXは自然か

派手な機能ではないですが、こういう部分を積み上げることで、サイトの完成度はかなり変わると思います。

「見た目ができたら終わり」ではなく、公開後にユーザーや検索エンジンがどう見るかまで考える。

今回の修正で、そこに少し気づけたのは大きかったです。