はじめに
こんにちは、メンバーズルーツカンパニーのデザイナーの田中です。
メンバーズルーツでは、ノーコードツール「Studio」を活用してWebサイトの構築・運用を行っています。
Studioは、コーディングの知識が不要なうえ、デザインの再現性が高いため、修正や更新にもスピーディーに対応できるのが大きな魅力です。これにより、クライアント企業のブランディングやマーケティングにも大きく貢献できます。
さて、そんな便利なStudioを活用してWebサイト作成をする中で、意外と見落とされがちな部分の一つが「404ページ」の準備です。この404ページについてどの程度意識して活用できていますか。
404ページとは、存在しないURLにアクセスされた際に表示されるエラーページのことです。基本的には「ページが見つかりません」といったメッセージだけで構成されることが多いですよね。
しかし、この404ページをブランドイメージに合わせてカスタマイズすることで、ただのエラー画面でユーザーを不安にさせることなく、ポジティブな印象を与えるかつ回遊を促すチャンスに変えることができます。
今回は、Studioを使ってブランドに合わせた404ページを作る手順を、分かりやすく解説していきます。
404ページの重要性
404ページは、本来存在しないページへユーザーがアクセスしたときに表示される「エラー画面」です。
「ページが見つかりません」という文言が表示されるだけのシンプルなページが一般的ですが、ここにブランド特有のデザインやアイデアを加えることで、以下のようなメリットが得られます。
- ブランド認知の向上 :
404ページをクリエイティブに仕上げることで、ユーザーの記憶に残るブランド体験を提供できます。
- 離脱率の低下 :
一瞬“がっかり”させそうなシーンでも、魅力的なデザインやユーモアで思わず興味を引き、サイトを離れずに回遊してもらえる可能性が高まります。
- ポジティブな印象の提供:
エラー ＝ マイナスのイメージを、逆に「このブランド、面白い！」と思わせるポジティブな要素に変換できます。
このように、404ページはエラーを告知するだけではなく、「ブランドの世界観」をアピールする役割にもなり得ます。
Studioで404ページを作成する手順
ここからは、Studioを使って404ページをカスタマイズする手順を3つのステップに分けて紹介します。
■STEP1：404ページ用の新しいページを作成する
- Studioのデザインエディタを開く
- 左メニューの「ページ」タブから「＋(追加)」をクリック
- 新しいページの名前を「404」に設定
名前を「404」に設定しておくと、後の設定がスムーズです。最初は白紙の状態でかまいません。必要なコンテンツやデザインは後で調整できます。
■STEP2：404ページとして設定する
新しく作成したページを、実際に「404ページ」として機能させるための設定を行います。
- 左メニューの「ページ」タブを選択
- 先ほど作成したページを指定し、「タイプ」から「404ページ」を選択します。
これだけで404ページの基本設定は完了です！ かなり簡単ですよね。
とはいえ、まだデザインがないまっさらな状態なので、ここからビジュアルを仕上げていきましょう。
■STEP3：デザインをブランドに合わせてカスタマイズする
Studioの基本ツールを活用し、デザインを構築していきます。
しかし、普通に作成し、404ページを指定しただけでは、どこにでもあるエラーページと変わりありません。
ここからは「ブランドらしさ」を取り入れ、ユーザーを惹きつけるデザインを作っていきましょう。
アイデアのインスピレーションとなるよう、参考事例を交えてご紹介します。
ブランドに合わせたデザインアイデア
※参考事例はStudio以外で制作されたものですが、デザインのヒントとしてご活用ください。
■デザインアイデア1：ユーモアを取り入れる
ちょっとした遊び心や笑いを誘うコピーを入れると、ユーザーの気持ちを軽くして離脱を防げます。
例えば：
・「Oops! ページが見つかりませんでした。」
・「迷子になっちゃいました！ でも心配しないで、すぐにお手伝いします。」
・「探しているページはここにはありません…代わりにこんなコンテンツはいかがですか？」
参考事例:LEGOの404ページ
→ LEGOの404ページでは、「おっと! ページが見つかりません。」というメッセージとともに、作業服を着たLEGOブロックのキャラクターが驚いた様子で登場します。
まるでLEGOの世界に迷い込み、工事中の場面に遭遇してしまったかのような演出が施されており、遊び心あふれるユニークなデザインとなっています。
■デザインアイデア2：ブランドの世界観を反映する
ブランドカラーやフォント、イラストなどを活用し、サイト全体との統一感を持たせることが重要です。
エラー画面でも、ブランドカラーやフォントを活用することで、一貫したブランド体験を提供でき、ユーザー体験を途切れさせることがありません。
参考事例:GitHubの404ページ
→ GitHubのマスコットキャラクター「オクトキャット」が、「これはあなたが探しているページではありません」といったニュアンスを、やれやれとした仕草で表現。
ブランド独自のキャラクターやコンテンツを巧みに活用し、世界観を魅力的に体現しています。
■デザインアイデア3：インタラクティブストーリーの導入
404ページに「入ってみる」とボタンを設置し、クリックすることでオリジナルのストーリーが展開されるインタラクティブな要素を取り入れると、ユーザーに楽しい体験を提供できます。
参考事例:ZOZOTOWNの404ページ
→ ZOZOTOWNの404ページでは、アクセスすると扉が現れ、「いらっしゃ〜い」とユーザーを迎え入れます。
扉を開けると猫の店員が登場し、ゲームのような対話がスタート。「ここは、ZOZOTOWNの裏道にあるたくさんのアイテムを扱っているお店」──そんなストーリーが展開され、ブランドキャラクターやテーマに沿ったアドベンチャーを楽しめます。
物語の最後には、「他にもおすすめがあるから見ていきなよ！」というメッセージとともに、スムーズにおすすめ商品ページへ誘導される設計になっています。
404ページに追加したいその他の要素
さらに、404ページを魅力的にするためにこんな要素も検討してみてください。
- アニメーション要素
Studioのアニメーション機能を用いて、キャラクターや文字を動かしたり、マウスホバーでエフェクトが発生する仕組みを導入すると、ユーザーに強い印象を与えられます。
- 検索バーの設置
ユーザーが探していた情報をすぐに見つけられるようにすることで、サイト内回遊をスムーズに。エラーからの巻き返しを図れます。
- SNSリンクの追加
ユーザーがSNSからあなたのブランドをさらに深く知るきっかけにもなります。フォローやいいねなどのエンゲージメントを高めるチャンスです。
これらはユーザーに次の行動を促進し、404ページの機能性を高めるために非常に重要な役割を果たします。そのため、単なるデザインのアイディアにとどまらず、ぜひ実際に導入を検討したい要素となります。
さいごに
Studioを使えば、404エラーページも含め、ブランドの世界観を存分に表現できます。最初は「エラーページ＝ネガティブな印象」という先入観があるかもしれませんが、一工夫加えるだけでユーザーに興味を持ってもらえる機会に変わるのです。
エラーを「ブランドをアピールする絶好の場」に変換できるのが、404ページの魅力。
ぜひStudioの柔軟なデザイン機能を活用して、ユーザーをワクワクさせる404ページを作ってみてください。
.jpg)
.jpg)