DESIGN IT YOURSELF.

BUROKI


top

blog

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

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

design_thing

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

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

2021.01.15.

スポンサーリンク

スポンサーリンク

意外かもしれませんが、実際に仕事でwebサイト運営をしたことがないwebデザイナーはけっこういます。

制作したwebサイトに集客し、訪れたユーザーに購入や問い合わせといった行動(アクション)を起こしてもらうようにwebサイトやページをデザインする・・。web制作の理屈上では当たり前のことなのですが、「制作して納品するだけ」を仕事にしている人と「制作して実際に運営していく」人とではwebサイト運営の経験という面ではかなりの差があります。

制作会社ではなくITベンチャー企業やECサイトを運営している会社に属しているデザイナーのほうがよくわかっていると思います。実際にボクもインハウスデザイナー(企業に属するデザイナーのこと)をしていた頃はwebサイトを制作したあと、チームでアクセスデータを見ながらサイト改修や改善、更新など頻繁にしていました。

訪問ユーザーは情報がどこにあるかわからない

特に制作側は自分たちでどこにどんな情報を配置するかを決めてつくっているので忘れがちになるのですが、webサイトに訪問してくださるお客さまたちは初めてそのwebサイトを訪問するわけなので、当然どこに何があるのかわかりません。

ここをクリックまたはタップしたらこの情報が出てくる・・なんてことは制作側しかわからないことなのです。今やスマホの登場から数年が経ち、小さい画面でのwebデザインもそれなりにセオリーが出来てきてはいますが、まだまだ浸透しきっていないのではと感じています。

情報を隠してしまいがちなテクニック

とはいえ、モニター画面に表示できるものには限りがあるので、制作側はできるだけコンパクトに、情報に優先順位をつけながら見やすく、わかりやすくなるようにデザインしていきます。

その結果ユーザーが何かしないと情報が表示されないという技術を使いがちになることも事実です。もちろんケースバイケースだと思いますが、ボク個人的に「当たり前に使っているけど気をつけたほうがいい」と思う情報隠しテクニック(勝手に名付けてます)をいくつか紹介しようと思います。

index list

このブログの目次

1. バーガーアイコン

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

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

スマホのバーガーアイコン
この右上のやつです

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

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

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

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

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

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

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

のぼり刃物さんのスマホ表示
スマホでもナビ項目を常に表示させるのもひとつの手段

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

2. タブメニュー

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

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

YahooのTOPページのタブメニュー
Yahooなどのニュースサイトでは定番で使われています

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

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

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

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

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

下向きの矢印をつけたタブメニュー
矢印をつけるだけで見え方が変わります

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

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

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

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

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

3. スライドショー

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

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

BUROKI designのTOPページスライドショー
ボクもTOPページでがっつりやっちゃってます

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

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

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

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

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

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

そのテクニックは本当に必要か?いま一度見直してみましょう

情報を隠してしまいがちなテクニックをいくつか挙げましたが、すべてwebサイトでは定番となっているようなものばかりなのでボクもwebサイト制作時についつい使ってしまっています。

しかし、クライアントさまのターゲット層によってはその機能が実は邪魔になっているかもしれないし、もしくはわかりにくくなっているかもしれません。すべて同じwebサイト構成でいいはずがないんですよね。

今はweb制作にあたって便利な機能やコンパクトにまとめられる技術もたくさんありますが、本当にその機能は今回の制作に必要なのかどうか、常に自問自答しながら制作していきたいものですね。ボクもまだまだ勉強中です。

BUROKIアイコン

いつでもユーザー目線を持ち続けたいものですね。
スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

private

空気階段の第7回単独公演「ひかり」を観に行ってきました

久しぶりにプライベートなブログでも書きます。先週土曜日にお笑いコンビ空気階段の単独ライブを観に、梅田にあるサンケイホールブリーゼへ行ってき…

2024.05.27.

think

SEO小話vol.03 広い狭いがある?検索キーワードの考え方

少し前からマイペースにはじめている「SEO小話」。 前回と前々回ではtitleタグのことを書きました。今回はテーマを変えてvol.03として、検索で重要な…

2024.05.17.

think

本日、BUROKI designはフリーランスとして開業5周年を迎えました

2024年5月13日。 本日、BUROKI designは無事に開業5周年を迎えることができました。 2019年の4月末に長年勤めていたベンチャー企業を退職し、昨年6月…

2024.05.13.

think

2024年4月の活動報告。4月はこんなデザイン制作をしていました

GWが明けて日常を取り戻し、ようやくブログを再開しました。 今年は祝日が週末とかぶっていて振替休日があったりと、けっこう長いGWでしたね。連休が…

2024.05.11.

think

SEO小話vol.02 titleタグを設定するときの5つの注意点

少し前からブログでマイペースにはじめている「SEO小話」。 前回はSEOで重要なtitleタグのことを書いたので、今回は続編として「titleタグを設定する…

2024.05.01.

private

福島にある「THE VILLAGE OSAKA」で三度目の結婚記念日を祝う

4月22日は相方との結婚記念日。 今年で三度目の結婚記念日を無事、迎えることができました。皆さまのおかげです。いつもありがとうございます。 いつ…

2024.04.25.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル