UX/UIデザインカンパニーのオハコがデザインについて発信していくメディア

Powered byOHAKO Inc.

2014.09.03

UI DESIGN

可愛くてハイセンスな404ページから見る離脱させないUX設計

ポートフォリオサイトの404ページがすばらしい!

ソーシャルバズで、一時はトップページからの流入を抜くペース

サイトの内容としては、自分のスキル・作品が紹介してあり、その下にお問い合わせフォームがあるというシンプルなもの。

面白いのは404ページ。ソーシャルメディアで火がつきブログメディアにも紹介されることで、一時はトップページよりも流入元として大きなシェアを占めていたそうです。

早速見てみましょう!

実物のスクリーンショットがこちら!

FireShot-Screen-Capture-#021---'I-Plan-Websites---404'---iplanwebsites_com_aaa

なぜUIUX的にすごいの?

404ページは離脱を防ぐために用意する

そもそも404ページは、コンテンツが存在しないページを訪れてしまったユーザーに対し「ここにはコンテンツがないので戻ってください」と伝えるためのページです。

白地に黒文字で伝えるだけだと、ユーザー体験を損なってしまう原因になります。そこで多くのサイトでは世界観にあったデザインで404ページをデザインしているわけです。

しかし、期待していたものが出てこないということはユーザー体験を少なからず損なうことには変わりなく、飽きっぽいユーザーはサイトを離れてしまいます。

離脱が防げ、ちょっと得した気分を味わってもらえる

このページのすごいところは、離脱が防ぐこととユーザーを楽しませることを両立しているところです。

離脱を防ぐ工夫

まず、無駄に長くないことがあげられます。楽しませることはいいことですが、ユーザーはあなたのサイトに情報を求めに来たことを忘れてはいけません。このページはスクロール以外の操作を必要としないため、すぐにトップページに戻れるようになっています。

また、文字と画像が視線を上から下に誘うため、自然とトップページへ戻るリンクに目が行くようになっています。

その上で、スクロールしていく(=トップページへのリンクに向かう)ことに対し期待感を付与しているところがすばらしいです。

まとめ

どうしたらユーザーが心地よい体験ができるかを考え抜くこと

良いUIUXをデザインするためには、ユーザーのすべての挙動に注意を払う必要があります。

今回の例では、「404ページへジャンプしてしまった」ことと「404ページからトップページに戻る」ことの2つのアクションをいかに心地よくさせるかが考えられた非常に参考になるものでした。

皆さんも1つ1つの行動に気を配ってデザインしていきましょう。

(参考:http://iplanwebsites.com/

EDITOR'S PROFILE

furusawa5702

Furusawa Shinichi

グロースハッカー

東京大学在学中より、上場企業でのインターンを通して広告運用やサービスの成長施策立案に興味を持つ。その後複数のスタートアップでグロース戦略の策定と実行に携わる。オハコでもプロジェクト単位で関わっている。

RELATED POSTS
top

2016.11.11

来客受付アプリから見る、UXをしっかり伝達するためのUIデザインの考え…

はじめまして! 株式会社オハコのアシスタントUIデザイナーの吉川、サーバサイドエンジニアの有馬です。 11月を迎え、本格的に寒い季節になってきましたね。 少し前のことです...

UI DESIGN

wearabledevice

2015.04.10

AppleWatchでどう変わる?ウェアラブルデバイスUXテ…

いよいよ本日、AppleWatchの予約が日本時間16時01分より開始されました。 これまで様々な企業が研究開発を行ってきたウェアラブルデバイスの分野に、ついにAppleが参...

UI DESIGN

dashboard

2015.03.04

ダッシュボードのUI/UXを考える際に重要な3つの視点

「The laws of shitty dashboards(ひどいダッシュボードの法則)」を読んで 成功例を目にすることは多いが、実際にはトライアンドエラーをした軌跡を追う事の...

UI DESIGN

uidesign

2014.10.28

UX思考を学ぶ。UIデザインパターン全28選

はじめに-UIデザインパターンの使い方- なぜUIデザインパターンを確認するのか、しっかり目的意識を持って確認作業を行っているだろうか。 以下にあげるUIデザインパターンを...

UI DESIGN

mobileuipatterns

2014.10.10

用途・デバイス別!スマホサイト、アプリのUIデザインパターン17選

弊社でも参考にしているUIパターンサイトを使いやすいようにデバイス別・用途別に分類してみました。 UIデザインで詰まってしまった際や、修正を指示したいんだけど参考になるデザイ...

UI DESIGN

Top

2014.09.30

心地よいUIデザインをする際に考えるべき7つのポイント

多くの人が毎日3時間以上オンラインサービスを利用しています。1,000,000,000,000以上のWebページと数百万件のアプリがリリースされ、それらがユーザーの時間を奪い合って...

UI DESIGN