Daily UI 8日目のお題は「404 Page Design」。
URLが間違っていたりするときに出る画面を制作します。

制作過程

今回は3時間半ほどかかりました。

エラーコードの種類

今回作るのは404エラー画面ですが、こういう３桁数字でエラーを表すやつって他にもありますよね。いくつか取り上げると下の通り。

他にもたくさんありました。こういうのをエラーコードというらしいです。内容と数字をセットで知っているのは、404くらいな気がします。

要件定義

いつも通りChatGPTに考えてもらい、微調整して決めました。

リサーチ

最初は思いついた順に、既存のサイトを中心に見ていました。
要件を詰めた後は、旅行系サイトに絞ってリサーチしました。

考察

かっちりタイプと遊ぶタイプで分かれていた印象です。遊ぶタイプで面白かったのをいくつか紹介。

（１）Google Fonts
顔文字が出てくるタイプです。いくつか種類があるらしく、毎回違う顔で謝ってくれます。かわいい。

（２）Dribbble
こちらは、画面下部のスライダーを動かすと「404」の色が変わります。上部には、「#xxxxxx（カラーコード）の色のデザインを見てみよう」的なことが書いてあります。ぐるぐるしたくなる。

（３）Amazon
外国版のAmazonサイトは毎回違う犬が登場してくれます。この犬たちはAmazon社で飼われているらしいです。画像上が外国版、下が日本版です。外国版と比べて、日本版が超シンプルなのも面白いです。

（４）トリバゴ
こちらは404ページを存在しないホテルに例えたデザイン。ホテル予約サイトである点とかかっていて、上手いなあと思いました。

ちなみに、404ページは各サイトのトップページのURLの末尾に「/404」をつけると大体見られることを発見したので、ここにメモしておきます。

例えばGoogle Fontsなら
https://fonts.google.com/　→　https://fonts.google.com/404
みたいな感じです。

ラフ

今回は描いていないので飛ばします。

ワイヤーフレーム

制作したワイヤーフレームがこちら ↓

トップページへ戻る導線と、検索フォームをつけました。下には、飛行機の座席の窓をいくつか並べています。窓の中に画像をいくつか並べ、カーソルを置くと詳細が分かる仕組みです。せっかくなので遊び心あるタイプにしたいなと思い、制作。

ビジュアル

飛行機窓デザインをいろいろパターン考えているところです。１番上はワイヤーフレーム通り、真ん中がブラインドを降ろした風、１番下が下に白い長方形を敷いたもの。

真ん中は文字数が増えると入らなくなるのでボツ。１番上は画像がちょっと小さいかなと思い、却下しました。

完成

制作した画面がこちら ↓

ビジュアル１番下のデザインの方向性で作りました。窓部分は、右から左にゆっくり動いている＋毎回違う画像が表示される想定です。
それと、細かいですが「トップページへ戻る」隣のアイコンを三角から飛行機にしました。

デザインのポイント

飛行機の窓風デザイン

これなら、訪問者はたくさん画像が表示できて楽しめて、運営者側は宣伝ができます。今思えば、noteの404美術館のイメージを無意識に反映させてたかもしれないです。

制作してみて

やる前は正直ちょっとつまらん回かも…と思ったりしたんですが、やってみると意外と楽しかったです。404ページは大体偶然出会うものなので、そのレア感もいいのかもしれません。

コラム：いろいろな矢印

「→トップページへ戻る」部分を作っていて気づいたんですが、矢印ってめちゃめちゃ種類があるんですね。雪だるまマークがフォントによって個性がでていて面白いみたいな話は聞いたことがあったんですが、矢印も同じくらい個性があって面白いです。

フォントのサイトとかの404ページ作るんなら使えそうだなと思いながら作っていました。

特に貂明朝の指型矢印？（名前がよく分からない）がかわいいので広まってほしい。貂明朝は矢印に限らず、記号全般かわいいです。干支とか天気マークとかあります。テキストもかわいいです。つまり全部かわいい。