404ページのデザイン提案【中編】

なぜ 404 ページが表示されたのか、そして利用者が出来る次のアクションが何かがみえてきました。これからいよいよ大まかなレイアウトのスケッチに入るわけですが、もうひとつ考えておきたいことがあります。ページに表示させたい項目だけでなく、必要でないと考えられる要素も洗い出しておくと、スケッチが最初の段階からある程度洗練されたものになります。

通常のページでは必須項目でも目的が絞られてるページだとそうではない場合があります。「あっても良い」「もしかすると誰か必要になるから」くらいの要素は目的が絞られているページでは省いてしまっても良いと思います。要素を最小限に絞り込むことで、ページで伝えたい目的がより明確になるでしょう。サイト内のリンクからで 404 が表示される割合より、サイト外からのアクセスで 404 が多く表示されています。そこで、サイト内でいろいろ読みたいけど行き詰まった人というよりかは、読みたい情報へ辿り着かなかったけどどうするかと考えている人が多いと判断。カテゴリリストのようなメニュー要素は省き、誘導の仕方も 404 に対する解決に絞ることにしました。

イメージが結構膨らんできたので、具体的にページ構成を考えてみました。資料として誰かに見せなければならないというわけではありませんし、思い立ったときにすぐに描けるということで、ノートにスケッチ。右図が最初に描いたスケッチになります。こうしたステップをふめば必ず探している情報に辿り着きますよ、というストーリー仕立ての構成。ちょっとしたアイコンも添えて少しやわらかい雰囲気が特徴です。

この時点で、サイトにある記事数を表示するアイデアが生まれました。利用者が探している情報へ行き着くためのヒントとは言いきれませんが、ここをキッカケに「なんならいろいろ見てみるか」と思ってもらえると良いなと考えました。人気記事などをリストアップすることも考えましたが、そこまでやると読ませてしまうので、ザッとみて雰囲気が分かる数字やキーワードだけにしました。

最初のバージョンでも悪くなかったのですが、ひとつひとつ要素を囲うのは少々息苦しく感じたので、ステップごとにコンテンツを分けるものの開放感のある見せ方が良いと思いました。左図のスケッチが次の描いたものです。線をウィンドウの幅全体に広げるだけでも少しダイナミックな雰囲気になります。一応、ステップはあるものの、この順番でしなければならないわけでもないので、特徴的だった矢印もここでは目立たなくなっています。また、マークアップをし始めた際に決めましたが、同じ理由で番号も完成版ではなくなっています。

ページのテンプレート化や要素のコンポーネント化は、サイトの拡張性を考える上で必須になります。しかし、目的が絞られているページであれば、「こうしなければならない」というルールから少し外れて目的に合わせたカスタマイズをするといいでしょう。そうすることでサイドバーやページの片隅ではなくコンテンツエリアに検索フィールドを入れた方が良いというアイデアも自然に出てきます。