1. ホーム
  2. コラム
  3. デザイナーのワガママ(その4) 「引き算の発想」でメリハリを

デザイナーのワガママ(その4) 「引き算の発想」でメリハリを

こんにちは。Webデザイナーの杉浦です。前回の記事 『「サイトの歌舞伎町化」は犯罪です』 では、ユーザーに分かりやすいページデザインをする方法として、引き算の考え方を書きました。良かれと思って追加した情報や装飾も「過ぎたるは、なお及ばざるが如し」です。

今回は「引き算」の考え方で、ページにメリハリをつける具体的な方法を書かせていただきます。前回の記事からの続きになりますので、まだ読まれていない方は、お目通しいただけると理解しやすいと思います。

何をどうやって引き算するの?

ページ上にはナビゲーションやキービジュアル、文章、画像など様々な要素があります。どれも引き算の対象になりますが、今回の話ではリンクボタンやバナーなどの導線、コンテンツの章などの塊を、1つの要素としてイメージすると分かりやすいと思います。引き算の方法については「数」「形とレイアウト」「色」の3つの側面から説明します。

「数」を引き算

ボタンやバナーなどのリンク数が多いと、最も伝えたい情報(リンク)が埋もれてしまいます。
もしユーザーを特定のリンク(導線)に誘導したい場合、極論すればボタンを1つだけにするという考え方もできます。

作り手に「あれも見せたい、これも見せたい」という想いが強いと、ページがボタンだらけになりがちです。しかし、ユーザーに最も重要な情報が何なのかを理解してもらうためには、リンク数を「引き算」してあげる事も必要です。

「数」の引き算

「色」を引き算

色数が多すぎると、ユーザーに最も伝えたい情報が埋もれてしまいます。
「最も重要な情報」と「それ以外の情報」の2色(グループ)にすると、分かりやすくなります。優先順位の低い情報群は「引き算」の発想で同じ色にまとめたり、落ち着いた色にすると良いでしょう。

作り手に「見た目が賑やかで楽しそうにしたい」という想いが強いと、必要以上に色が増えてしまいがちです。もちろん楽しそうなページ作りは大切なのですが、それに注力するあまりユーザーの使い易さが犠牲になっていないか、見直すことも必要です。

「色」の引き算

「形とレイアウト」を引き算

各要素のサイズ感が近いと、最も伝えたい情報が埋もれてしまいます。
優先順位が低い情報は、サイズ(面積)を「引き算」してあげると、重要な情報が引き立ちます。

作り手に「とにかく多くの要素(情報)を載せたい」という想いが強いと、各要素が均等になってしまいがちです。最も重要な要素のみ面積を大きくとると、視覚的なメリハリをつけることができます。

「形とレイアウト」の引き算

引くということは、隣り合った要素同士の影響力を減らすこと

ウェブページに配置される各要素は、お互いに影響をおよぼしあっています。ひとつの要素を水面にポタポタと落ちる滴と見立ててみます。影響力とは、その滴によって生じた波紋だと考えると分かりやすかもしれません。

波紋が強すぎると水面が波立ってしまい、コンテンツ全体がハッキリ見えなくなる……というイメージです。引き算の考え方は、滴の距離を離したりして影響力を減らそうということでもあります。

隣同士の影響力を減らす(引き算)メリットは、以下に集約されます。

伝えたいことがハッキリする

情報にメリハリがつき、読み手が情報の重要度を理解しやすくなります。

各要素を独立させて、しっかり見せることができる

ページ全体が飽和状態にならず、1つ1つのコンテンツの配置が読み手にとって理解しやすくなります。

ユーザーの情報理解・操作性の向上

滴のイメージ

ページ制作で大切なこと

伝えたい情報の優先順位を決めること

優先順位が決めれられれば、引き算がやり易くなります。(引き算とは必ずしも削除することではなく、一歩引かせるという意味です)

各要素のメリハリは絶対的なものではなく、相対的に決まるものと理解して設計すること

すべての要素を目立たせようという考えは、メリハリを無くすことと同義です。「引き算」によって相対的差異をつくりだし、コンテンツにメリハリがつくように設計します。

勇気を持って引き算を

カテゴリ: Webサイト運用運営, コーポレートサイト
2015年03月31日

RSS