Web関連

空白スペースの使い方 -UIデザインとして-

0

空白スペースは、上手に扱うことができれば、それだけで「オシャレ」な印象を与えることができます。
ですが、役割をきちんと理解していなければ、手抜き感を与えてしまう「諸刃の剣(もろはのつるぎ)」でもあります。

今回はそんな空白スペースの役割、立ち位置を解説していきたいと思います。

空白スペースの価値って?

空白スペースは主役を引き立たせる、いわば脇役のようなものです。
もし、上手に空白スペースを使えていないと、いろいろな情報が主張しあっている状態になっていると思います。
それではサイトを訪れたユーザは、どこを見ればいいのか分からなくなってしまいます。

そこで有効な空白スペースは美しさだけでなく、以下のような3つの機能をもっています。

関係性を明確にする

デザインの法則のひとつに「近接の法則」というものがあります。
下の画像を見てください。

 

35個の緑色の四角の集まりというよりも、2つの大きな四角のグループが見えるかと思います。
これを分けているのは、真ん中に入っているスペースだけです。
これはUIデザインの中でも入力フォームを作る際に、とても有効な手段です。

okamura_ui02.jpg

上の画像では、すべての入力欄が等間隔で並んでいます。しかし、これでは入力する項目が多くなった場合に見直そうとしても、どこにどの情報が入力されているのか一目見ただけではとてもわかりにくいですよね。
では、下のフォームはどうでしょう。

okamura_ui03.jpg

名前と所在地に関係する項目の間にスペースを空けて、各項目に関連するもの同士のスペースを詰めてみました。
これで先ほどのフォームよりもだいぶ見やすくなったかと思います。

このように、関連するものは近く、グループごとに少しスペースを入れることで、ユーザにやさしいフォームを作ることができます。

注意を引きつける

冒頭でも言いましたが、空白スペースは脇役のようなものです。

Tunnel Vision and Selective Attention 

こちらのサイトが良い例です。検索窓の周りにスペースを多く空けることで、カテゴリのアイコンがずっと目立つようになり、さらに縦方向にまとまって見えます。
これにより、ユーザーの視線がバナー広告に目が行かないのと同時に、ユーザーの目が自然とコンテンツへ向くようになっています。また、コンテンツ同士のスペースを狭くすることで、より一層まとまっているように見えるように工夫されています。

さらに、空白スペースの効果は、注意力と記憶力の限界によって発揮されます。
GoogleとYahoo!のサイトを思い出してみましょう。両サイトとも「何かを検索したい」と思っているユーザが訪れます。

Googleは、ユーザがすぐに検索機能を見つけられやすいように、画面中央にロゴと検索窓しか置いていないですよね。右上にGoogleメニューがありますが、画面中央を注視してしまうのであまり気にならないと思います。

一方のYahoo!では、ユーザがいろいろなアクションを取れるように、さまざまなコンテンツで埋めつくされています。これではGoogleと比べて、どこから検索すればよいか分からないですよね。「ユーザに検索してもらう」という点では、Googleのほうが優れたデザインである、といえます。

ユーザーを”ゴール”へ導く

サイトを訪れるユーザは、常になにかしらの目的を持っています。それはユーザによって三者三様です。
しかし、情報が整理されていないと、当初の目的とは違うコンテンツも気になってしまい、サイトを訪れた目的を忘れてしまったり、サイト上で迷子になったり、結果としてゴールに辿りつかないままサイトから離れてしまいます。
それを防止するためにも、「サイトへ来たユーザに、何をして欲しいか」をハッキリさせて、その情報を見やすいようなサイト設計をする必要があります。そうすることで、直帰率の割合も減らすことができるでしょう。

まとめ

いろいろ説明してきましたが、まとめると以下のようになります。

1.空白スペースは、主役(コンテンツ)を引き立てる脇役のようなもの。
2.適切なスペースを入れることで、コンテンツの関係性をわかりやすく伝えられる。
3.ユーザの視線を誘導することができる。

空白スペースは上手に使うことで、ユーザへ伝えたいことをダイレクトに届けることが出来ます。
そのためにも、Webサイトを通してユーザに何を伝えたいのかをハッキリさせ、載せるべき情報をあらためて考えてみましょう。

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

UI/UXデザイン

0

Webエンジニアだからこそ知りたい!巷で人気の3Dホログラム技術!前のページ

果たしてDMPの導入は本当に敷居が高いのか?次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 新しい販売形態であるDtoCについて考えてみる
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    最近話題の「ニュースアプリの傾向」で検索してみた

    どうも!完全主観をモットーに記事を作成していく コンサル(仮) の…

  2. Web関連

    アプリやWebで香りを楽しもう!

    こんにちは。突然ですが、風邪をひきました。絶対に同じフロアで仕事して…

  3. Web関連

    もう利用した?「omni7(オムニセブン)」から学ぶ

    今回のテーマは、オムニチャネルです。 オムニチャネルを簡単に説明すると…

  4. Web関連

    人が手に取るもの、触れるものは全てUIの考えが入っている?

    今回はUI(ユーザーインターフェイス)について考えていきたいと思います…

  5. Web関連

    ティファナも使っているCMS、Movable Typeの特徴とは?

    CMSを使えば、Webサイトの運用・管理が簡単にできます。ただ、C…

  6. Web関連

    一石三鳥!?マルチデバイスに対応したブラウザ「Blisk」

    今、ホームページはマルチデバイスに対応しているのが当たり前になってきて…

おすすめ記事

最近の記事

  1. 持つべきなのか?運転免許証+マイナンバーカード
  2. RPAから始める業務効の自動化 働き方改革への選択肢の一つに…
  3. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  4. 約1年間のウィズコロナ生活で大きく変わったもの
  5. スマートストアにより、小売業は激変する

アーカイブ

  1. Web関連

    費用対効果抜群!リマーケティング広告について
  2. Web関連

    正しい情報を伝えるために!webでの校正について
  3. Web関連

    Web制作会社厳選!レスポンシブWebデザイン(RWD)の便利なテンプレート&ツ…
  4. Web関連

    動眼(どうがん)でアーティスト気分に浸りたい!
  5. Web関連

    宅配に不可能はない?こんなものまで届けてくれるWebサービス
PAGE TOP