ユーザーが迷子になったとき、どんな画面を見せるか——404ページを Google Stitch で真剣に設計した話

2026.04.14

404ページは、誰も見てほしくない画面だ。ユーザーが意図しない場所に着いてしまった、という「失敗」の画面だから。しかし、ユーザーは必ず迷子になる。リンク切れ・打ち間違い・削除されたページ——どんなに丁寧に設計しても、404には辿り着く人がいる。

Google Stitch で初めて404ページを真剣に設計したのは、あるプロジェクトのレビュー中に「404が適当すぎる」という指摘を受けたからだ。デフォルトの「404 Not Found」テキストだけが表示される画面を、チームメンバーが問題にした。「ここからどこにも行けない。ユーザーは確実に離脱する」と。

その指摘をきっかけに、404ページの設計をStitchで真剣に取り組んだ。地味だけど、やってみると面白かった。

結論から言うと

一言で言えば、404ページは「ブランドの人格」と「ユーザーを次の行動に導く設計」の両方を試せる、意外と自由度の高いUIだ。Google Stitch でたたき台を作ることで、「このサービスらしい迷子体験」を短時間で設計できる。

良い404ページは3つの役割を果たす。(1)何が起きたかを伝える、(2)次にどこへ行けるかを示す、(3)ブランドの「声」で語りかける。この3つをStitchのプロンプトに込めることが、質の高い404ページを生成する鍵だ。

なぜ404ページが重要なのか

ユーザーが404ページに着いたとき、「このまま離脱するか」「サービス内の別のページに移動するか」の分岐点になる。デフォルトの「404 Not Found」では、ユーザーはブラウザの「戻る」ボタンを押してサービスから離脱するしかない。

一方で、適切に設計された404ページは「失敗体験を回復させる」機能を持つ。「このページは見つかりませんでしたが、こちらにご案内します」という流れで、ユーザーを別の有用なページに導くことができる。離脱を防ぐだけでなく、ブランドへの印象を改善するチャンスにもなる。

2026年の404ページデザインのトレンド

2026年の404ページデザインのトレンドとして、ユーモアや遊び心のあるイラストと機知に富んだコピーの組み合わせが挙げられる。単なるエラーの告知から、「このサービスらしい」個性あるページへの転換が業界全体で進んでいる（デザインメディアの2026年調査による）。

具体的には、「ロストしたキャラクターのイラスト」「「迷子になりましたか？」的なユーモアのある見出し」「サービスのナビゲーションへの明確な誘導」「検索フォームの設置」の4要素を持つ404ページが効果的とされている。

Stitch で404ページを設計する実践

実際にStitchで404ページを設計した手順と、試したプロンプトのパターンを記録する。

基本プロンプト：機能的な404ページ

まずシンプルな機能的404ページのプロンプトを試した。「404エラーページ。中央にイラスト（地図で道に迷った人のシルエット）、見出し「お探しのページが見つかりませんでした」、説明文「URLが間違っているか、ページが移動または削除された可能性があります」、以下の3つのナビゲーションボタン：ホームに戻る・前のページに戻る・サポートに相談する。ページ下部にサイト内検索フォームを追加。」

生成された結果：シンプルで機能的な404ページが出力された。要素の配置バランスが良く、「次にどこへ行けるか」が明確だった。

個性を出すプロンプト：ブランドの声を反映した404

次に、サービスの個性を反映させたパターンを試した。「404ページ（テクノロジー系スタートアップ向け）。遊び心のあるデザイン。見出し：「404：ページが銀河の彼方へ迷子になりました」。イラスト：宇宙空間を漂う小さな宇宙飛行士。説明文：「探しているページは見つかりませんでした。でも大丈夫、ホームに帰還できます。」CTAボタン：「ホームに帰還する」（宇宙船アイコン付き）。下部にアニメーション（星が流れる背景）の代わりにスタティックな星模様。カラー：ダークネイビー×ホワイト×アクセントイエロー。」

実際に使ってみて分かったのは、404ページは「ブランドの声」を実験するのに最適な場所だということだ。メインのランディングページや機能画面では冒険しにくい個性的なコピーやビジュアルも、404ページなら「外れても許される」という感覚で試せる。

404ページの設計で考えること

「ユーモア」のバランスを見極める

遊び心のある404ページは印象に残るが、サービスのコンテキストに合わないと「不謹慎」に感じられることがある。医療サービス・金融サービス・官公庁向けサービスでは、ユーモアより「明確な案内」を優先した方がいい。

Stitch でブランドの方向性を2パターン生成して比較することで、「どちらが自分たちらしいか」の議論をチームで素早く進められる。

「人気のページへの誘導」を含める

404ページに「多くの人がよく見るページへのリンク」を含めることで、離脱率が下がる。「よく見られているページ：[ページ名]・[ページ名]・[ページ名]」というリンクセクションをStitchのプロンプトに含めると、サービスへの再誘導が設計されたページが生成される。

検索フォームの設置

ユーザーが何を探していたかが分からない場合でも、検索フォームがあれば自分で目的のページを見つけられる。「ページ中央または下部にサイト内検索フォーム（サジェスト付き）」をプロンプトに含めることで、検索機能付きの404ページが生成される。

よくある質問（FAQ）

Q1. 404ページとはどう違うのですか？500エラーページも別に作るべきですか？

404はページが存在しないエラー、500はサーバー側のエラーで「サービス自体が一時的に動いていない」状態です。ユーザーにとって体験が異なるため、別々に設計することを推奨します。500エラーページは「サービスが復旧中」という文脈なので、ユーモアよりも「復旧時間の目安」や「ステータスページへのリンク」を含める設計が適切です。Stitch で両方のたたき台を作っておくことをおすすめします。

Q2. 404ページのイラストはStitchで作れますか？

シンプルなシェイプ・アイコン・幾何学的なイラストはStitchで生成できます。ただし複雑なキャラクターイラストや精細なビジュアルはStitchの得意分野ではありません。「迷子のロボットのシンプルなイラスト（線画スタイル）」のような指定であれば、それらしいビジュアルが生成されます。本格的なイラストは別途イラストレーターに依頼するか、Undrawなどのフリーイラスト素材を使う選択肢もあります。

Q3. 404ページのSEOへの影響はありますか？

404ページ自体はSEOに直接影響しませんが、内部リンク切れ（404になるページへの内部リンク）はSEOに悪影響を与えます。404ページをきちんと設計することは「ユーザー体験の改善」であり、間接的にバウンス率の改善につながります。Stitch での設計はUIのたたき台作りであり、リンク切れの管理は別途サイト管理ツール（Google Search Consoleなど）で行ってください。

Q4. 404ページにアナリティクスを入れる必要はありますか？

入れることを強く推奨します。どのURLが404になっているかを把握することで、リンク切れの修正・リダイレクトの設定に活用できます。404ページにヒートマップを設置して「ユーザーが404に来た後にどのボタンをクリックするか」を計測することも、導線改善に役立ちます。

Q5. 404ページをモバイル向けに最適化するポイントは？

モバイルでは画面が小さいため、「ホームに戻るCTA」を最も目立つ場所（画面中央付近）に配置することが重要です。複数のナビゲーションリンクはデスクトップでは横並びでも、スマートフォンでは縦並びに変える設計が読みやすいです。Stitch でモバイル用とデスクトップ用の404ページを別々に生成して比較検討することをおすすめします。

注意点・失敗しやすいポイント

1. ユーモアがサービスのトーンに合わない場合は使わない

「遊び心のある404が良い」という話を読んで、どんなサービスにも適用しようとするのは間違いだ。金融・医療・官公庁向けサービスでは、ユーモアよりも「明確な案内」「問い合わせ先の明示」「サポートへの誘導」を優先する。Stitch でシリアスな404とユーモアのある404を生成して、どちらがブランドに合うかを判断すること。

2. ヘッダーとフッターを省かない

404ページはデザインが特殊なため、ヘッダー・フッターが省かれることがある。しかしヘッダーのナビゲーションがあれば、ユーザーはそこからサービス内の別のページに移動できる。ヘッダーとフッターは404ページにも必ず含めるようにプロンプトで指定すること。

3. 「見つかりませんでした」だけで終わらない

エラーの告知だけで次の行動を促さない404ページは、離脱率を高める。必ず「ホームに戻る」「検索する」「よく見られているページ」のいずれかの誘導を含めること。Stitch での生成時も、これらの要素がプロンプトに含まれているかを確認すること。