webサイト制作において「情報を隠しすぎない」ということはとても大事

1. バーガーアイコン

まずは情報隠しテクニックのド定番である「バーガーアイコン」。

スマートフォンでボクのこのwebサイトをご覧になっている方は、右上に「MENU」と書かれた横棒3本のアイコンが表示されていると思います。ボクのwebサイトに関わらず他のどのwebサイトをスマホで見ても約98％くらいの確率でこのバーガーアイコンが右上（あるいは左上）に表示されているはずです。

ご存知の方も多いかと思いますが一応説明しておきますと、このアイコンはメニューリストを表していて、ここをタップすると他ページへのナビゲーションメニューが表示されるといった仕組みです。ちなみになぜバーガーアイコンという名称なのかというと、横棒3本がハンバーガーっぽく見えるというところからきているみたいです。

スマホ対応のwebサイトを制作すると、デザインは違えどもう100％くらいの確率でこのバーガーアイコンを設置し、その中にナビゲーションを収めています。制作の現場ではあまりに定番すぎて特に何も考えず設置してしまっているところもあります。

・・が、自分が他のwebサイトを見ているときって、意外とこのアイコンをタップしていないことに気付きます。それはなぜかというと、この中にどんな情報が入っているのかがわからないからです。

自分が期待している情報があるかないかわからないアイコンをタップするより、そのページ内で求めている情報があるのかどうか、スクロールしながら探すほうが人の行動として多いはずです。タップすると新しく何かが表示されることになるので、「なんかちょっと面倒だな」と思ってしまうのは人間の心理として避けられません。それならスクロールするほうが楽なんですね。

バーガーアイコンをタップしなくてもいいようにページ構成する

では、バーガーアイコンへのタップを期待せずに他のページに遷移してもらいやすくするにはどうすればいいか？ひとつの答えとして、webサイト全体のナビゲーション項目を少しでもページにも表示させておくことです。

実際にボクが制作させていただいたのぼり刃物店さんのECサイトでは、バーガーアイコンこそ設置しているものの、ページ下部のフッター領域にもナビゲーション項目を表示させています。

ここで大事なのは、webサイトをスマートに見せるということではなく、あくまでいろんなwebページを見てもらうためにwebサイトは存在しているということ。クライアントさまは仕事で使いたいからwebサイトをつくってほしいと依頼されます。ケースバイケースですが、目的を見失わないようにしたいですね。

2. タブメニュー

こちらも定番の情報隠しテクニック「タブ」。バーガーアイコンほど使用率は高くないですが、情報量の多いwebページによく使用されています。

ボクはこのBUROKI designのwebサイトでは使用していないですが、同列に表示したほうがいいと判断した場合やできるだけページの長さを短くコンパクトにしたい場合などに使用することがあります。

ニュースサイトのような情報サイトでは頻繁に使用されていて、実際に訪問ユーザーにもよく利用されている技術ですが、それは「最新ニュースは同列だがニュースにはいろんなカテゴリがあって、それぞれニュース内容が異なる」ということがすでに人々に認知されているからです。

認知されていない一般のwebサイト内でタブメニューを使用すると、ただ情報を隠してしまっているだけで存在していない情報になっている可能性が大いにあります。

改善策1. タップできるとわかるようにデザインする

そんな中でもクライアントさまの要望などでタブを使わなければいけない局面は出てくるので、設置する場合はできるだけタブであることが伝えられるようなデザインを考案します。

ボクが以前制作させていただいたNewSPO.オンラインサロンのサロン詳細ページでは、タブメニューの下部に下向きの矢印をつけ、現在選択されているタブと他のタブメニューのカラーを変えたりといった工夫をしました。

他にはPCモニターで見た場合限定にはなりますが、マウスカーソルを乗せた場合に背景色が変化するようなデザインを実装するなど。とにかくクリックできますよとわかるようなデザインが好ましいです。

改善策2. タブを使わず下に追記していく

もうひとつの改善策はそもそもタブを使わずにどんどん追記していくというやり方です。

情報をまとめないのでページ自体は長めになってしまうのですが、スクロールだけという少ないアクションで誰が見ても情報を表示させることができるので、実はそのほうが訪問ユーザーさんにとってはやさしいwebサイトであることもあります。

タブメニューは確かにコンパクトにまとめることができて便利なのですが、実は使わないほうがいいのかもしれない・・。アクセスデータやヒートマップなどを使いながら必要か否か、テストしてみてもいいかもしません。

3. スライドショー

そして最後も定番の画像が切り替わる「スライドショー」。

主にTOPページのメインビジュアルなどによく使われていて、複数の写真が自動で切り替わったり横からひとつずつ流れてきたりする技術です。視覚的に動きがあるので訪問ユーザーにインパクトを与えることができ、より興味を持ってもらえるといったメリットもあります。ボクのサイトのTOPページもスライドショーを使用しています。

スライドショーを設置する目的はいろいろあって、ボクがTOPページに大々的にスライドショーを設置している理由は、雰囲気の良い写真をインパクトのある形で見せることによるブランドイメージの向上です。

ただ、スライドショーは文字通りスライドして表示するものなので、表示されていない間は隠されたままです。自動で表示されるようになるとはいえ、例えばスライドショーが設置されているとして、「次はどんな画像は流れてくるんだろう」とワクワクしながら待っている人って・・多分いないですよね。

そのスライドショーにどんな画像が含まれているのか、知っているのは制作側だけです。そのことを理解した上でどんな目的のために設置するのかは考えなくてはいけません。

改善策 スライドショーを使わず一覧として記載する

こちらも先ほどのタブメニューの改善策と同じなのですが、スライドショーを使わずに複数の画像を並べて載せるほうが訪問ユーザーは画像の全容を把握できるのでいいかもしれません。特に自動で切り替わるスライドショーは時間を要してしまうのでユーザーさんによってはストレスに感じてしまうこともないとは言い切れません。

ECサイトなどで商品画像をもっと見たい場合などはかなり有効な技術ですが、バナーやイメージ写真などのスライドショーはもしかしたら必要ないかもしれません。