ヘッダーの役割とは？ UXの視点で分析してみた

最近0からサイトを作っていた時に、ヘッダーとフッターのデザインを考えなければいけなくなり壁にぶち当たりました。笑

僕はどちらかというとデザインは表現していくことが好きな方なので（例えば、UI/UXデザインよりもコーポレートやLPのデザインの方が好きみたいな話）、情報設計等は苦手とするタイプです。笑

ですがこのフッター、ヘッダーに関しては表現力はあまり問われず、どれだけロジカルに考えて構成・配置できるかを考える必要のある分野だと思うので、今回はそのフッター・ヘッダーを作る際に情報収拾した記事をもとに、自分なりに役割を考えてみます。

先に結論から言うと、

ヘッダーの役割：サイトで迷った時にそこを見ればサイトをリセットできる

そして、どのようにデザインすれば良いかと言うと、どのページに遷移しても常に同じ情報が流れるよう、そのサイトにとって大事なコンテンツをユーザーが見やすい箇所の配置することが挙げられるでしょう。いわば、サイト全体の目次のようなものです。

これは、UXの際にとても重要です。

LINEとメールのUXとは

f:id:toshikimaebayashi:20190223115546p:plain

出典：https://archeco.co.jp/ux-design/what-is-ux-design/

UXデザインとは、”user experience”つまり顧客体験のことです。例えば、LINEと手紙をもとにお話すると、そもそも手紙とLINEはオフラインで行われていたものをインターネットテクノロジーによってオンライン化したものにすぎず、その体験の本質は

従来のメール：手紙のやり取り

LINE：日常的な会話

だと考えられています。したがって、LINEがどれだけ発達しようと一見圧倒的に使いにくいGmailがしぶとく使われているのも上が理由で、オフラインでくるどこかの大学の資料だったり、サービスのパンフレットだったり、大きな組織からの通知（僕の場合大学からの通知）は、だいたいGmailから送られてきます。つまり、それはインターネットが普及する以前はオフラインで行われていたもので、それが、インターネットの時代だとGmailにとってかわったと言えるでしょう。

そして、LINEはオフライン時代に友達とのやり取り、気さくな会話をオンライン上で表現したまでにすぎません。GmailはLINEにできない役割を担っているからこそ、今でも使われ続けているのです。

つまり、

ITサービスのUXにおいて重要なのは、オフラインで行われてきたやり取りをどれだけオンライン画面上で表現できるか

だと思います。

具体的にはLINEの場合

・吹き出しを使って会話っぽさを表現する

・普段の何気ないジェスチャーといった言葉を用いないコミュニケーションをスタンプで表現する

・その人の名前でなく、プロフィール画像を吹き出しと結びつけることでいかにもその人が言葉を発している雰囲気を出す

これらをすることで、オフラインに近いUXをユーザーに提供できるのです。

ヘッダーのUX

さてさて、話を戻しましょう。

そもそもこれはヘッダーをどのようにデザインしていくかの話でした。ここで、先ほどの『ITサービスの本質はオフラインで行われてきたやり取りをどれだけオンラインで表現できるか』という着眼点をベースに考えてみると、そもそもヘッダーはオフラインのサービスで何に値したのかと言う話になります。

個人的に思うのは、

ITサービス（例えばゼクシイとか）のヘッダー＝雑誌の目次

に値するのではないか。

そう言う意味で考えると、ぐっと作りやすくなるのではないでしょうか。

雑誌の目次を我々はどのように見ていたのか？？

どのようなタイミングで雑誌の目次を見たのか？

このUXの視点からヘッダーを作ってみると作りやすいですね

ちなみに僕は雑誌を読んでいる時、目次をこんな時に閲覧していました

・雑誌を読んでいる時に、自分が今何の特集を読んでいるのかわからなくなった・・・①

・そもそもこの雑誌にはどんな情報が書いてあるのか気になった・・・②

まず、①の解決策として目次はどんな雑誌でも一番最初の近くのページに書かれていることが挙げられるでしょう。

次に②の選択肢としてその雑誌に載っている情報を簡潔に羅列してあります。

上の事柄をwebサイトで考えてみると、いつヘッダーを見るか

・サイトを閲覧している時、どのページを読んでいるのか分からなくなった

・どんな情報が載っているのかわかりづらいので、簡潔に項目ごとに並べたページが欲しい

他にもあると思いますが、主にこれらの解決策としてのヘッダーのデザインがあればOKでしょう。主な解決策としては、ヘッダーを上部に固定することで常にユーザーに位置を明確にさせること、項目ごとに並べることが挙げられるでしょう。それをもとにデザインしてみるとすごい設計しやすくなりました。ユーザーと同じ目線に立つって大事ですね。