calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

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

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

PR
IT/WEB業界への転職なら
Sponsored Link

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);}
}

Glitchy 404 Page

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

404 - Glitched out

グラデーション

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

Single element animation

ベイカンシー

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

No Vacancy 404

ノーシグナル


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

404 No signal


404 page

404ページデザインの参考

今回は動きや遊び心のある404ページを中心に、今っぽいものをピックアップしました。

ヤマト運送のページは、箱の中から黒猫が出てきて30秒以内に黒猫を見つけ出すようなミニゲームとなっていて、遊び心満載です。作り込んでますねぇ。

ヤマト運送

音楽イベントのサイト。ドラムスティックが折れてしまうアニメーション。トップページのデュオトーンもかっこいい。

Coup de coeur

シンプルながらも動きのある洗練されたページ。太めのラインを一つ一つspanで囲み、斜めに動かしています。

TOKYO ART FLOW

文字が傾斜した後に崩れ落ちていき、BACK TO HOMEのボタンが現れます。マウスの位置に応じて背景も変化。

FirstTouch, Inc.

マウスの動きに合わせて円が動きます。

慶應義塾大学SFC研究所|SFC Open Research Forum 2016

404ページだけではないのですが、マウスオーバーした箇所の背景を変更させるようにエフェクトをかけています。

Collective Intelligence

レトロな映像にすべく、モノクロ調の「フィルムノイズ」(時間が経過して傷やほこりがついてフィルムにノイズが混ざったかのようなエフェクト) を走らせてあります。

ちなみに、コムテブログのアバウトページでも似たようなエフェクトを採用しています。

Nameless Online Shop | Handcrafted sneakers

モザイクとノイズが混じったようなエフェクト。

モウタクサンダ!!! マガジン

これは結構有名ですね。ドラッグで背景が動かせるようになっています。

The Wall

KODO NISHIMURA

音注意!404 File Not Found

グラデーション背景の上にネオンカラーの文字とグリッチエフェクト。配色の使い方が個性的です。

音注意!Offf - Italia

ラインとモノトーンで構成されたシンプルなNot Foundページ。スタイリッシュ。

Kygo Life - Music Meets Fashion

お馴染みのやつですね。マウスの動きで横にパララックス効果。

Page not found · GitHub

File not found!

Rally Interactive

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする