情報量の多いサイトでも、スッキリ見せる基本のテクニック

Webサイトで伝えたい情報が少ない場合、シングルページのレイアウトでコンバージョンまでの導線をスッキリさせることは可能ですが、取り扱い商品が多い場合や、取り扱い内容が多岐に渡る場合どうしても、情報量が多くなり何を一番に伝えたいサイトなのかがわかりにくくなってしまいがちです。

情報がそれなりにありながら、きちんと伝わってくるサイトはどんな点がほかと異なるのか、実在の舞踊太鼓のサイトを例に、コンテンツ量が多くても迷わせないサイト作りのポイントをWebデザイナーがアドバイスします。

目次

1.インパクトとスッキリを両立させるWebテクニック
2.情報にたどり着きやすくする導線の考え方

テンプレートを元にするなら作り替えは最小限に

ノンデザイナーがWebサイトを作るとき陥りがちなのが、あれもこれもサイトに追加したい、オリジナリティをもっと出したいという欲がでて、何を伝えたいのかわからないごちゃごちゃしたサイトになってしまうことです。

テンプレートを元にするなら、テンプレートの導線を守り1ページに情報を盛り込ませすぎず、繰り返しの情報はフォーマットを統一する等に気を付けると情報量が多くてもスッキリと見せることが可能です。

今回のサイトの作者、ASKA-GUMIさんは「MORIO」のテンプレートをベースにサイトを制作。
テンプレートを上手にアレンジして、個性的でインパクトもありつつ、見やすいサイトに仕上げています。

▼関西を拠点に世界で活躍する和太鼓集団「舞太鼓あすか組」さん。

写真素材が丁寧に作り込まれているので独特の世界観が確立されています。ビルボードもPC、スマホそれぞれに作り込まれていてデザイン性が高い素敵なサイトです。

1.インパクトとスッキリを両立させるWebテクニック

このサイトがスッキリして見える理由は、1ページに複数のコンテンツを詰め込み過ぎてないことと、コンサート情報などに決まったフォーマットを繰り返して見せていること。この辺の情報量や内容にばらつきがあると、読みにくいサイトになってしまいます。

サイトの個性は画像で表現

このサイトの個性を作り上げているのは、作り込まれた画像です。PC／スマホそれぞれデザイン性が高く作り込まれたインパクトのあるビルボードを配置。フォトギャラリーもフロートレイアウトを用いる事でたくさんの写真を見せつつも動きが出ているのがいいですね。

BiNDで設定するときのポイント

プロフィールページで、世界地図の背景の画像を位置固定（fixed）で表現しているのも面白いですね。Worldwideで活躍しているアーティスト集団であることが、目を引くギミックで印象付けられます。


この表現はブロックに設定した背景画像に対してDressを用いて位置固定（fixed）を行う事で表現できます。
このテクニックは「スクロールで変化する背景デザインの作り方」で説明していますので、ぜひ皆さんもお試しくださいね。

2.情報にたどり着きやすくする導線の考え方

同じページへのリンクをメニューとして複数設置するのは一見アクセスできる箇所が増えていいことのように思えますが、ヘッダーやサイドバーにはそれぞれ違う役割があるので、利用者を迷わせ、しかるべき導線ができなくなる原因となりがちです。
とくにレスポンシブWebではスマホ表示の際、サイドメニューは表示させないかページの下部に配置されるなど、重要視されません。そのため基本的なページへの遷移はヘッダーのグローバルメニューに集約して、サイドメニューはあくまで捕捉的に使うなど、使い分けるのがオススメです。そのとき、特別な意図がなければグローバルメニューの内容とは重複しない設計にして役割を明確にした方がよいでしょう。

BiNDで設定するときのポイント

サイドメニューを新情報や問合せ、外部リンクなどへの導線として活用し、スクロールしても表示させておきたい場合は「スクロール時ブラウザ上部に吸着」を選ぶと、ブロック単位でコンテンツを常に表示させておくことができます。

ページ遷移はルールを統一

導線を統一するという考え方でもうひとつ。サイドバーからのInstagramリンクがページ内のギャラリーに遷移していますが、FacebookやYouTubeと同様にフォローを促せるようInstagramのアカウントページにリンクさせるほうがわかりやすいかもしれません。サイト内のInstagramの写真はギャラリーの役割と割り切るのもひとつです。

いかがでしょうか？繰り返しの情報はできるだけフォーマット化し、見ている人が迷わず目的の情報にたどり着けるかに気を配るようにすると、独自ルールの殻が取れて、見やすくて印象的なサイトに仕上げることができます。

今回紹介したサイト以外にも、BiNDupで使えるテクニックが満載のナイスサイトのご紹介はこちらからご覧いただけます。

ナイスサイトの作り方やノウハウをチェック