※記事作成時の情報となりますので、最新の情報は配布サイト及び、ダウンロードファイルに付属しているライセンスPDFをご確認下さい
リンク先のページが存在しない時に表示される、404エラーページ。
今回はそんな404エラーページに設定することを目的とした無料イラスト素材集「404 Illustrations」を紹介します。
全部で20種類以上の404エラーページに特化したイラスト素材が無料でダウンロードできるので、404エラーページをサイト全体の雰囲気に合わせたい方は特に必見です。
それでは、早速見ていきましょう。
404 Illustrationsの使い方
【商用利用可&無料】
404エラーページに使える無料イラスト素材集『404 Illustrations』💁「20種類以上の個性豊かなイラストが無料で使える!」
▼詳細はこちらhttps://t.co/HRnxn6nh3c#デザイン #フリー素材 #フラットデザイン
— 白T(しろてぃー)|フリー素材マニア (@TadaDesign) June 24, 2020
ダウンロード方法
それでは実際に「404 Illustrations」をダウンロードしていきましょう。まずは配布サイトにいきます。
サイトへ移動ができたら、ページの一番下の方にある「Download for free」をクリック。そして、「$」の部分に「0」と入力し、「これが欲しいです!」をクリックします。

▲ 「Download for free」をクリックし…

▲ 「0」を入力した後に「これが欲しいです!」をクリック
すると、メールアドレスを入力する画面に移るので、自分のメールアドレスを入力して「手に入れる」をクリックします。

▲ メールアドレスを入力し、「手に入れる」をクリック
その後、入力したメールアドレスにCraftwork宛からメールが届きます。そのメールの中にある「View content」をクリックすると、ようやくイラストをダウンロードできるページに移動できます。

▲ メールの本文にある「View content」をクリックし…

▲ 赤い囲みの部分をクリックすると、イラストをダウンロードできる
実際にダウンロードしたフォルダの中には、Figma、PNG、Sketch、SVGがファイル別に入っています。

▲ Figma、PNG、Sketch、SVGのイラストがそれぞれ入っている
様々なタイプの404イラスト
このサイトには個性豊かな404イラストが揃っています。いくつか見ていきましょう。

「404 Illustrations」のイラスト

「404 Illustrations」のイラスト

「404 Illustrations」のイラスト
現時点では約30点以上の404イラストがダウンロードできます。
使用許諾
続いて使用許諾(ライセンス)を見ていきましょう。

▲ 個人利用&商用利用可
イラストとともにダウンロードできる使用許諾によると、個人利用も商用利用も可能とのこと。ただし再配布するのはNG。
※記事作成時の使用許諾となりますので、最新の情報は配布サイト及び、ダウンロード後のライセンスPDFをご確認下さい
実際に設定してみた
このサイトの404エラーページに「404 Illustrations」のイラストを設定してみました。使用したのはTシャツを着ている男性のイラスト。

▲ このイラストを使用
このまま使用しても良いですが、このサイトの運営者である白T(しろてぃー)のプロフィールアイコンと揃えるように、ヒゲを無くし、Tシャツの色を黄色から白色にしました。

Before→After
こうして完成したイラストを404エラーページに設定してあげると、他のサイトにはない個性的な404エラーページが完成しました。

▲ なかなか良い感じの404エラーページに!
サイトの雰囲気を統一させるためにも、エラーページの画像設定は必ず行うべきですね。
もちろん404エラー自体出ないことが一番良いことですが、もしエラー出てしまった時にこのような可愛らしいイラストがあるのとないのでは大違いです。
現状の使用許諾では、イラストの色を変えたりするなどのカスタマイズは許容されているので、少しでも気になる方がいたらダウンロードして自分好みにカスタマイズしてみてはいかがでしょうか。
※記事作成時の情報となりますので、最新の情報は配布サイト及び、ダウンロードファイルに付属しているライセンスPDFをご確認下さい