404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集

作成：2016/12/26
更新：2016/12/26
Webデザイン >

ページを消した時やリンク切れなんかで、味気ない404ページが表示されると悲しくなりませんか。というよりもユーザーは確実に離脱してしまうでしょう。あまり目立たないページだからこそ、手が込んだレイアウトになっていると感動します。

デザインが普通でも、検索窓や内部リンクがあると好印象。今回は404ページを作る時に参考になりそうなギャラリーやエフェクトをまとめました。

エンジニア速報は Twitter の@commteで 1 日 5 回配信しています。

404ページとは

404ページとは、ページが存在しない旨を伝えるエラーページのことです。ステータスコード200 OKは「リソースが正常」という意味で、ページが正常に表示されていることを示し、300番台はリダイレクト、400~500番台はエラーであり、404は「リソースが存在しない、探したけど無いよ」という意味になります。

WordPressで404.phpがあるのにも関わらず、サーバのエラーページが表示される場合は、管理画面でパーマリンクの更新を行ってください。

エフェクト一覧

3D風ノイズ

テキストを@keyframesを使い透過度と位置などを動かし、疑似要素で色を変え、ノイズが発生しているかのように見せています。画像無し、CSSのみで実装可。シンプルなので404ページだけでなく、サービスページやリクルートページのファーストビューで使うと面白そうです。

.error {
  animation: noise 2s linear infinite;
}
@keyframes noise {
  0%, 3%, 5%, 42%, 44%, 100% {opacity: 1; transform: scaleY(1);}
  4.3% {opacity: 1; transform: scaleY(1.7);}
  43% {opacity: 1; transform: scaleX(1.5);}
}

See the Pen <a href="http://codepen.io/kaypooma/pen/ehfjC/">Glitchy 404 Page</a> by Kay Pooma (<a href="http://codepen.io/kaypooma">@kaypooma</a>) on <a href="http://codepen.io">CodePen</a>.

Glitchy 404 Page

前掲したアニメーションと同じグリッチ系のエフェクトです。

See the Pen <a href="http://codepen.io/ZonFire99/pen/njdls/">404 - Glitched out</a> by Jonathon Iles (<a href="http://codepen.io/ZonFire99">@ZonFire99</a>) on <a href="http://codepen.io">CodePen</a>.

404 - Glitched out

グラデーション

mix-blend-modeとグラデーションを使って幻想的な動きを表現してます。

See the Pen <a href='http://codepen.io/Octavector/pen/yJvkoj/'>Single element animation</a> by Octavector (<a href='http://codepen.io/Octavector'>@Octavector</a>) on <a href='http://codepen.io'>CodePen</a>.

Single element animation

ベイカンシー

宿泊所の看板・空室のようなネオン系エフェクト。部分的に消灯します。

See the Pen <a href='http://codepen.io/rileyjshaw/pen/ufEIH/'>No Vacancy 404</a> by Riley Shaw (<a href='http://codepen.io/rileyjshaw'>@rileyjshaw</a>) on <a href='http://codepen.io'>CodePen</a>.

No Vacancy 404

ノーシグナル

テレビの砂嵐のような効果。

404 No signal

See the Pen <a href='http://codepen.io/ademilter/pen/hDtpq/'>404 No signal</a> by Adem ilter (<a href='http://codepen.io/ademilter'>@ademilter</a>) on <a href='http://codepen.io'>CodePen</a>.