404エラーページをClaude Designで作った話——ブランドに合った遊び心のある画面を30分で
404ページなんて後回しにしがちな存在だ。サイトを作るとき、トップページやLPに時間をかけて、404は「また今度」になる。気づいたらデフォルトのまま放置している、というチームは多いと思う。
NANAKAZOKUでも長らくそうだった。あるクライアントのリニューアル案件で「404も作ってほしい」と言われ、初めてClaude Designで真剣に向き合った。結果、予想以上にハマったし、予想外の罠にも落ちた。
最初にやらかした失敗
Section titled “最初にやらかした失敗”最初のプロンプトはこうだった。
404エラーページを作ってください。おしゃれでかわいいデザインにしてください。出てきたのは、どこかで見たような宇宙飛行士のイラストに「Oops! Page Not Found」という英語テキスト。クライアントは日本語サービスで、ブランドカラーも全然違う。「おしゃれでかわいい」というふわっとした指示が、汎用的なテンプレートを引き寄せてしまった。
ここで気づいた。**404ページは「空白から作る」のではなく、「そのブランドの世界観の延長として作る」**のだと。
ブランドコンテキストを先に全部渡す
Section titled “ブランドコンテキストを先に全部渡す”失敗から学んで、プロンプトを組み直した。
以下のブランド情報を元に404ページを設計してください。
- サービス名:[サービス名](料理レシピ投稿サービス)- ブランドカラー:#E8603C(温かみのあるオレンジ)、#FFF8F0(クリーム)- トーン:家庭的、親しみやすい、少しユーモアがある- ターゲット:20〜40代の料理が好きな人- 既存のサイトデザイン:丸みのあるコンポーネント、手書き風イラスト
404の内容:「このページは見つかりませんでした」というメッセージに、料理にまつわる遊び心あるコピー(例:「レシピが迷子になりました」)。トップページとおすすめレシピへのボタン付き。これで一気に精度が上がった。「料理が迷子になった」という比喩に合わせて、フライパンから何かが飛び出しているようなイラストを提案してきた。完璧ではなかったが、方向性は合っていた。
「感情」を指定するのが効いた
Section titled “「感情」を指定するのが効いた”もう一つ発見があった。ユーザーの感情状態を指定することだ。
404ページに来る人は少し困っている。そこで「困惑→安心→次のアクション」という感情の流れを設計してほしいとプロンプトに追加した。
このページに来たユーザーは「あれ、ページがない」と少し困惑している状態です。デザインとコピーで次の感情の流れを作ってください:1. 困惑を受け止める(共感する文言)2. 和らげる(ユーモアや温かみで不安を消す)3. 次のアクションに誘導する(明確なボタン)この指示を追加したら、コピーの提案が変わった。最初の一文に「うっかり迷い込んでしまいましたか?」という共感ワードが入り、続きでサービスらしいユーモアが来て、最後にボタン。構造が自然になった。
やってみると時間がかかった部分
Section titled “やってみると時間がかかった部分”正直に書くと、「遊び心」と「実用性」のバランスを何度も調整した。
最初に出てきたデザインは遊び心が強すぎて、「ボタンが目立たない」という問題があった。装飾に目が行きすぎて、トップへ戻るCTAが埋もれていた。
ここは「CTAボタンを最も目立つ要素にしてください。イラストや装飾はその次の優先度です」と明示的に優先度を指定して解決した。Claude Designに優先順位を伝えるのは思ったより重要で、ふわっとした「バランスよく」は通じない。
最終的にかかった時間
Section titled “最終的にかかった時間”プロンプト整理から最終確認まで、実質35分ほど。内訳はこんな感じ。
- ブランド情報の整理:10分
- プロンプト作成と初回生成:5分
- フィードバックとリファイン:15分
- 微調整(コピー修正、ボタン色の調整):5分
クライアントへのプレゼンでは「これ、404ページでここまでやってくれたの?」と言われた。404ページを丁寧に作ることで、サービス全体への姿勢が伝わるらしい。確かにそうかもしれない。
まとめ:404ページこそClaude Designが光る
Section titled “まとめ:404ページこそClaude Designが光る”404ページはデザイン的に「決まった型がない」分、AIとの相性がいい。ブランド情報を正確に渡し、感情の流れを設計に組み込むことで、テンプレート感のない固有の画面が作れる。
後回しにしてきた404ページがあるなら、一度試してみてほしい。意外と楽しいし、意外と早く終わる。
作成日:2026年10月18日
更新日:2026年10月18日