404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集
ページを消した時やリンク切れなんかで、味気ない404ページが表示されると悲しくなりませんか。というよりもユーザーは確実に離脱してしまうでしょう。あまり目立たないページだからこそ、手が込んだレイアウトになっていると感動します。
デザインが普通でも、検索窓や内部リンクがあると好印象。今回は404ページを作る時に参考になりそうなギャラリーやエフェクトをまとめました。
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);}
}
前掲したアニメーションと同じグリッチ系のエフェクトです。
グラデーション
mix-blend-modeとグラデーションを使って幻想的な動きを表現してます。
ベイカンシー
宿泊所の看板・空室のようなネオン系エフェクト。部分的に消灯します。
ノーシグナル
テレビの砂嵐のような効果。
404ページデザインの参考
今回は動きや遊び心のある404ページを中心に、今っぽいものをピックアップしました。
ヤマト運送のページは、箱の中から黒猫が出てきて30秒以内に黒猫を見つけ出すようなミニゲームとなっていて、遊び心満載です。作り込んでますねぇ。
音楽イベントのサイト。ドラムスティックが折れてしまうアニメーション。トップページのデュオトーンもかっこいい。
シンプルながらも動きのある洗練されたページ。太めのラインを一つ一つspanで囲み、斜めに動かしています。
文字が傾斜した後に崩れ落ちていき、BACK TO HOMEのボタンが現れます。マウスの位置に応じて背景も変化。
マウスの動きに合わせて円が動きます。
慶應義塾大学SFC研究所｜SFC Open Research Forum 2016
404ページだけではないのですが、マウスオーバーした箇所の背景を変更させるようにエフェクトをかけています。
レトロな映像にすべく、モノクロ調の「フィルムノイズ」（時間が経過して傷やほこりがついてフィルムにノイズが混ざったかのようなエフェクト） を走らせてあります。
ちなみに、コムテブログのアバウトページでも似たようなエフェクトを採用しています。
Nameless Online Shop | Handcrafted sneakers
モザイクとノイズが混じったようなエフェクト。
これは結構有名ですね。ドラッグで背景が動かせるようになっています。
グラデーション背景の上にネオンカラーの文字とグリッチエフェクト。配色の使い方が個性的です。
音注意！Offf - Italia
ラインとモノトーンで構成されたシンプルなNot Foundページ。スタイリッシュ。
Kygo Life - Music Meets Fashion
お馴染みのやつですね。マウスの動きで横にパララックス効果。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
この後によく読まれている記事
Comments
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
Leave a Comment