見事な403ページを作成するための8つのCSSおよびJSスニペット

公開: 2021-03-12

Webデザイナーは、エラーをチャンスに変えることに慣れています。一般的で最も広く使用されている（そして驚くほど認識できる）HTTPステータスコード404、別名「Not Found」が、開発者によってプロジェクトに利益をもたらすことを余儀なくされたことは周知の事実です。過去には、それはユーザーを怖がらせ、全体的な印象を破壊し、開発者にとって悪夢でした。誰もがそれが完全に消えることを望んでいました。

今日、それはウェブサイトの本質的な詳細です。 WordPressには、特別に割り当てられたテンプレートもあります。「404ページ」は、ユーザーエクスペリエンスの不可欠な要素です。ほとんどの場合、それは美しいデザインだけでなく、ウェブサイトの全体的な美学に貢献することを目的としたテーマも持っています。

よく考えられたデザイン、インタラクション、さらにはアニメーションに加えて、失われたユーザーが軌道に戻るのに役立つ便利なリンクと逃走が含まれています。ただし、ウェブデザインの「404」エラーは、現実世界のヒップスターのようなものです。彼らは、まだドーキーなメガネ、「ヴィンテージ」のシャツ、あごひげで目を惹きますが、私たちにとって目新しいものではありません。「403」エラーに関しては、それは別の話です。それは近親者ほど人気はありませんが、それでも、それは発生し、青い月に一度も発生しません。

背景として、HTTPステータスコード403、別名「403 Forbidden」は、ページにアクセスする権限がないことを意味します。理由はさまざまです。不適切なフォルダのアクセス許可から始まり、ログイン資格情報の基本的な要件で終わります。それにもかかわらず、経験則では、エラーは改善をもたらす機会であると定められています。では、ダミーの「403ページ」を「404ページ」と同じ役目を果たす場所に変えてみませんか？

この種のエラーを1ダースの素晴らしいものが受けていると考えてみましょう。それらは、インスピレーションの源であるだけでなく、すぐに使用できるソリューションの源としても機能します。

通ることならず

「あなたは合格しない」–架空の世界で最も強力な白ひげの魔法使いの一人がかつて言った（ダンブルドアのすべてのファンがこれを許してくれることを願っている）。ガンダルフ・ザ・グレイ（白ではなくグレイに注意）の最後のフレーズは、ここの文脈に完全に適合しています。そして、Noah Rodenbeek、A van Hagen、Jheyが実際にこれを示しています。彼らのコードスニペットには、「TheHobbit」小説の精神と魅力が染み込んでいます。最初の2人のアーティストは彼のスタッフと一緒にガンダルフを再現しましたが、後者はシーンをほのめかしただけでしたが、かなり成功しました。

HODOR 403

上記の架空の小説のモチーフでは不十分な場合は、Yasioのこのコードスニペットに注目してください。驚き-驚き、彼はジョージRRマーティンのファンタジー小説のシリーズからインスピレーションを得ました。彼はHODOR403と呼ばれる作品を思いついた。そこにある大多数にとって、この解決策は自明であると私は信じている。残りの部分については、HBOに切り替えて、この架空のキャラクターがこのタイプのエラーと完全に一致する理由を自分で確認することをお勧めします。

イラストとアニメーションの使用

私たちのリストの他の解決策は、「403」が禁止領域を象徴するという概念に基づいており、アニメーション化された静的なCSSイラストが、つまりこのアイデアを念頭に置いて再現されました。

エラー403– Aimieによって禁止されているのは、おとぎ話の古典的なシーンを表しています。暗闇の時間に登場するアニメーションのコウモリ、魔女の家、裸の木、不気味なタイポグラフィは確かにここでトリックを行います。

403 Forbidden byDylanと403Forbidden by Visual Composerには、独特の中世の魅力があります。「門を閉める」：プロジェクトは、すなわちこれらの協会を呼び起こします。最初のものはあなたの目の前で閉じる古典的な木製のガードゲートドアを備えています。 2つ目は、ガードゲートのトピックにも当てはまり、禁止されている標識を明らかにする歯車とチェーンを備えたメカニズムを示しています。

Arturo Wibawaの紫禁城のビジョンは、今日では有名な中国の「紫禁城」、別名故宮博物院の素晴らしい、非常に詳細な、さらには部分的にアニメーション化されたCSSイラストによって提示されます。

それはあなたを見ています

403 Forbidden Page by Marianaは、方向を意識した効果のおかげで、どこでもマウスカーソルを追う、気まぐれなモンスターのようなキャラクターでマークされています。ずっと見られているような感覚を再現します。それはまた、前進することを許さない派手な妖精の警備員を模倣します。マスコットの「威嚇するような」外観にもかかわらず、プロジェクトは楽しいと感じています。

しつこく

Gabriele Cortiは、「403」エラーページのビジョンも提供します。彼の「永続性は重要」プロジェクトは、最初にアクセスを拒否し、適切なユーザーアクションの後にアクセスを許可するプロセス全体を示しています。正しいアクションは、キーホールにキーを挿入することを意味します。それでも、ログインやパスワードの入力などの高度なアクションのベースとして、この概念をいつでも使用できます。

シンプルに保つ

403 by lsgrrdは、確かに存在する権利を持っている「403ページ」の過度に単純化されたテイクです。それは最小限ですが、要点をまっすぐにしています。それは、コンピューターの領域に固有のテクノの雰囲気を漂わせる特定のデジタル品質を持っています。デジタルタイポグラフィと並行して最後に点滅するカーソルは、素晴らしい効果を生み出します。解決策は、クリーンでエレガント、そして簡単です。

あなたはリストに載っていますか？

キャシディ・ウィリアムズのプロジェクトでコレクションを締めくくります。ここで紹介する大部分とは異なり、このソリューションは、人気のあるナイトクラブの典型的な状況を示す現実世界からの比喩です。バウンサーは、このコードスニペットの核心です。キャラクターは部分的にアニメーション化されていて、すべてがリアルに見えます。

ユーザーを引き込むもう1つの機会

正直なところ、「403エラー」は「404エラー」ほど普及しておらず、人気があり認識もされていません。それにもかかわらず、それはまだ存在し、何度も発生します。これにより、Webサイトに穴ができ、ユーザーエクスペリエンス全体が損なわれる可能性があります。それで、機会をつかんで、それをプロジェクトの有効な部分に変えてください。それは間違いなく何人かの新しい訪問者に勝ち、あなたが古い訪問者を失うのを防ぐでしょう。