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

関連記事

  1. Web関連

    ファッショントレンドはだれが決めるの…?

    皆さんも「今のファッションのトレンド(流行)はこれ!」とテレビや雑誌で…

  2. Web関連

    ビッグデータの活用事例 ~売上アップに貢献した事例~

    ビッグデータという言葉、ここ数年で耳にすることが多くなりましたよね。…

  3. Web関連

    基本中の基本!webで行う品質を上げるための対策3か条!

    Webサイトのデザインを制作しているとよくあるのですが、いかにカッコイ…

  4. Web関連

    web制作初心者必見!見やすいレイアウト構造

    Webサイトには、見やすく使いやすいレイアウトは無くてはならないもので…

  5. Web関連

    デバイスでもっと快適にイラストライフを目指す!!

    皆さま、デジタルイラストを描く際にどのソフトを使っていますか?イラ…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    たかがキャラクター。されどキャラクター。~町おこし編~
  2. Web関連

    ITやWebの力を1番借りたい業界は、観光業界かも?
  3. Web関連

    運営コスト削減!?CMSを使ったweb制作のススメ
  4. Web関連

    日本の暦ってステキ ~3月3日について考えてみる編~
  5. Web関連

    なるほど!気付けばそこにいる、ゲーミフィケーションについてまとめてみる
PAGE TOP