403エラーページをデザインするコードスニペット12選!!

Webサイトを閲覧していると、しばしば行きあたるエラーページ。400、401、403、404、500など、さまざまな種類があります。

エラーページで連想されるのは、おそらく白地に黒文字のシンプルなデザインでしょう。こうしたエラーページに出会うことは、本来あまり嬉しいことではありません。しかし、デザインを工夫することによって、エラーをチャンスに変えることもできます。

今回は数あるエラーページの中から、アクセス拒否をあらわす403を12個ピックアップ。オリジナリティあふれるエラーページデザインに使えるコードスニペットをご紹介します。

403エラーページデザインの重要性

エラーページが秘める可能性

先述のとおり、エラーページ自体はあまり喜ばれる存在ではありません。しかし、だからこそデザインにこだわるべきなのです。

エラーページデザインの重要性をあらわしている例のひとつが、WordPressのエラーページ専門のテンプレートの存在です。エラーページのデザインは、UXにとって必要不可欠な要素だと認識されているのでしょう。

デザインの美しさだけでなく、Webサイト全体の美学にのっとっていることも重要です。エラーページにはインタラクティブな仕組みやアニメーション、リンクなどを含めるのも良いですね。エラーページを、ユーザーを魅了するアトラクションのひとつにしましょう！

なぜ404ではなく403なのか

今回ご紹介するのは、ユーザーがおそらくもっとも頻繁に目にする404ではなく、403エラーページのデザインです。403エラーは「Forbidden（禁止）」として知られており、アクセス権限がないページにアクセスした際に表示されます。

404エラーページについては、すでに多くのWebデザイナーが目をつけており、独自デザインを開発しています。したがって、404エラーページの独自デザインは目新しいアイデアとはいえません。

しかし、403エラーページは404ほど頻繁に登場しないため、独自デザインがあまり浸透していません。つまり、403エラーページの独自デザインはまだまだ開発の余地があるのです。

403エラーページのコードスニペット12選

ロード・オブ・ザ・リングをテーマにしたデザイン

最初にご紹介するのは、映画『ロード・オブ・ザ・リング』における魔法使いガンダルフの名言「You shall not Pass（ここは断じて通さん）」をモチーフにした3つのデザイン。アクセス拒否をあらわす403エラーページにぴったりのモチーフですね。

Noah Rodenbeek、A van Hagen、Jheyがそれぞれ独創的な作品を発表しています。中でもJheyの作品は、杖で地面を突くシーンを再現したものです。

See the Pen
403: You shall not pass by Noah Rodenbeek (@nominalaeon)
on CodePen.

See the Pen
403 – You Shall Not Pass [CSS illustration] by A van Hagen (@anjanas_dh)
on CodePen.

See the Pen
403 You shall not pass! ? #CodePenChallenge by Jhey (@jh3y)
on CodePen.

ゲーム・オブ・スローンズをテーマにしたデザイン

Yasioの作品のモチーフになっているのは、HBOのテレビドラマシリーズ『ゲーム・オブ・スローンズ』の登場人物、ホーダー。

彼もガンダルフと同じく、403エラーページにぴったりの存在です。「なぜ？」と疑問に思った方は、ゲーム・オブ・スローンズを視聴してみましょう。

See the Pen
HODOR 403 ✋ ?⚔️ by Yasio (@Yasio)
on CodePen.

イラストとアニメーションを駆使したデザイン

次にご紹介するのは、403エラーページが象徴する「禁じられた領域」という概念にスポットをあてた作品です。すべての作品でイラストとアニメーションが駆使されています。

おとぎ話に出てくるようなクラシックなシーンをモチーフにしているのは、Aimieによる作品。魔女の家とその背後からあらわれるコウモリ、枯れ木、不気味なタイポグラフィーが暗闇の中に配置されています。

See the Pen
Error 403 – Forbidden by Aimie | Blissful Lemon ?? (@ablissfullemon)
on CodePen.

Dylanの作品とVisual Composerの作品は、どちらもどこか中世を思わせるデザイン。閉ざされた門が、アクセスが禁止されていることをあらわしています。

Dylanの作品では、クラシックなデザインの門が閉じる様子をアニメーションで表現しています。Visual Composerの作品は同じく門が閉じる様子をテーマにしており、歯車とチェーンというモチーフを使用しています。

See the Pen
Medieval 403 Forbidden by Dylan (@DevDylan)
on CodePen.

See the Pen
403 Forbidden #codepenchallenge by Visual Composer (@visualcomposer)
on CodePen.

Arturo Wibawaがモチーフにしているのは、中国の紫禁城。CSSを駆使して作られた繊細なイラストとアニメーションが印象的です。

See the Pen
? Forbidden City 403 CodePenChallenge by Arturo Wibawa (@artcoholic)
on CodePen.

インタラクティブなモンスターのデザイン

Marianaの作品にはモンスターが描かれており、マウスの動きにあわせて目が動く仕組みになっています。アクセスが禁止されている場所にユーザーが立ち入らないよう、見張っていることをあらわすデザインです。

モンスターが威嚇するというテーマでありながら、ポップなデザインに仕上がっています。

See the Pen
CodePenChallenge: 403 Forbidden Page by Mariana (@marianab)
on CodePen.

おばけが漂う仕掛けつきのデザイン

Gabriele Cortiは、403エラーページにふさわしいデザインだけではなく、面白いインタラクティブも提示しています。

おばけが漂っている画面を表示し続けると、おばけが何度かつぶやいたあとに鍵が表示されます。その鍵を鍵穴に差し込むと、アクセスが許可されるのです。こうした仕組みはパスワードの入力などにも置き換えられますね。

See the Pen
#Codepenchallenge Persistence is ? by Gabriele Corti (@borntofrappe)
on CodePen.

ミニマルでクリーンなデザイン

Isgrrdの作品は、先ほどのおばけの作品とは対照的で、とてもシンプルです。ミニマルなデザインの中にも、テクノっぽい雰囲気や点滅するカーソル。

レトロ・フューチャーなこだわりがみられます。

See the Pen
403 by lsgrrd (@lsgrrd)
on CodePen.

遊び心あふれる警備員のデザイン

最後にご紹介するのは、Cassidy Williamsによるインタラクティブな作品です。カーソルが近づくと警備員が入り口をふさぐという仕組みになっています。

警備員の表情や腕の動きなど、こまかい部分にもアニメーションがほどこされています。

See the Pen
The Bouncer at 403 by Cassidy Williams (@cassidoo)
on CodePen.

エラーページを活用しよう！

403エラーページは、404ほど多くの人が目にするわけではありません。しかし、たしかにWeb上に存在しており、そのデザインをそのまま放置しているとUXにとって大きなダメージになる可能性があります。

エラーというマイナスな体験を、デザインによって新たなチャンスに変えましょう。

（原文：Nataly Birch　翻訳：Asuka Nakajima）