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

関連記事

  1. Web関連

    WordPressをCMSとして活用するためのプラグイン Advanced Custom Field…

    こんにちは! 休日はチャギントンを見て過ごしたSEの岸沢です。チャ…

  2. Web関連

    綺麗だなぁ・・・夜空に浮かぶ冬の星座と流星群

    小さなころから星を見ることが大好きな管理部の川又です。みなさん、理科の…

  3. Web関連

    紙媒体のものから電子○○へ

    皆さんは電子書籍を利用していますか?私は使用しています。某携帯電話会社…

  4. Web関連

    ホームページ制作会社が紹介するグローバルナビゲーションの情報分類4パターン

    みなさんは、「グローバルナビゲーション」と呼ばれるものをご存じでしょう…

  5. Web関連

    Web制作会社に働く担当者のつぶやき。フルスピードで仕事をするには・・・。

    年末年始も終わり、年明けの挨拶をしてひと段落という時期ですね。皆様…

  6. Web関連

    ライバルサイトに差をつける!インフォグラフィックを作るための5つの手順

    この前、とあるサイトのデザインをしていた時にふっと思いました。…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    リモートワークで働く際に知っておきたい6個のポイント
  2. Web関連

    便利で毎日使ってしまう!?キュレーションサービス
  3. Web関連

    キーワードは「共感」?クレーム解決への最短経路
  4. Web関連

    忙しいシステムエンジニアのためのプラモデル講座
  5. サービス・新技術

    みんな知ってるフィンテック
PAGE TOP