22時に寝ようと思って2時に寝る。

備忘録や日記を書いてます。きょうは早く寝よう。

Rails5 - 404/500ページをカスタマイズする

デフォルトの404/500ページをカスタマイズしたい

何かのWebサービスを利用していて、404や500を返された時、「このサービス、Railsで作られているんだ」と思わぬ発見があったりします。

エラーステータス: 404

https://gyazo.com/356569ff5b74b17de26e105969655ed8

エラーステータス: 500

https://gyazo.com/9742c92e63237d0bf10661fca8b5b794

このままでも特段問題はないのですが、少し素っ気ないのと英語なのでユーザーを戸惑わせてしまう原因にもなるため、カスタマイズしたいと思います。

カスタマイズ手順

/public/ディレクトリに以下の静的htmlファイルがあるためこれらをすきなデザインに変更するだけです。

  • 404.html
  • 500.html
  • 422.htmlもあります)

html形式の静的ページなので、画像パスなどは適切に対応する必要があります。 文言だけ、かんたんな日本語に変更したものが以下になります。

https://gyazo.com/4b278c46a39f5d47d84c378de4f2fd7d

これだけでも、日本人ユーザー向けのサービスであれば親切になりました。

いろんなWebサービスの404ページデザインを調べてみる

cookpad

https://gyazo.com/fe0559e284ed3962590c5baa76696920

サービスの色いっぱいで、安心感があります。

esa.io

https://gyazo.com/c2e91ea1dc12352d3c159e7f7b83f857

こちらも、esa.ioらしいデザインで、かわいいです。

マネーフォワード

https://gyazo.com/fa764775b1d31de08087f837e42517fe

シンプルです!白紙(404)って感じがします。

Airbnb

https://gyazo.com/4ccddc35e648b807404ba2a1028771db

システムも予期せぬリクエストに「びっくりした」という感じが表現されているんでしょうか。イラストがかわいいです。

参考

qiita.com