読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

ユーザーに読みやすくモダンな印象を与えるレイアウトとは?

cup 2318315 1920 - ユーザーに読みやすくモダンな印象を与えるレイアウトとは?

デザインやレイアウトを考える際に、意外と軽視されがちなホワイトスペース。あなたはこのホワイトスペースをどれだけ有効に使えているでしょうか?

 

今回は、ホワイトスペースの重要性や効果的な使い方などを紹介していきます。

 

ホワイトスペースとは?

 

technology 792180 640 - ユーザーに読みやすくモダンな印象を与えるレイアウトとは?

 

まずは、「ホワイトスペース」についておさえておきましょう。あなたは「ホワイトスペース」という言葉を聞いたことがあるでしょうか?

 

ホワイトスペースとは、余白や空白という意味を示しています。(ikesai.comより)

 

一般的には、何も存在しないスペースを「ホワイトスペース」と呼んでいます。つまり、ホワイトではなく、赤や青などの色がついていても空白であれば「ホワイトスペース」になります。

 

ふつうに見れば、ただの余白でしかありません。ですが、このホワイトスペースをうまく使えるようになると、見た目がスッキリとして、ユーザが得たい情報をすぐに得ることもできるようになります。

 

だからこそ、デザインをする際にはホワイトスペースが重要視されています。また、一般的なグラフィックデザインにおいて一番面積の大きい要素はホワイトスペースだと言われています。

 

ホワイトスペースが与える重要な効果とは?

 

water 2364906 640 - ユーザーに読みやすくモダンな印象を与えるレイアウトとは?

 

ホワイトスペースは、Webサイトのユーザエクスペリエンスに与える重要な効果があります。その重要な効果として挙げられている5つを紹介していきます。

 

その重要な効果がホワイトスペースの重要性につながってくるのです。

 

1.より読みやすく、理解しやすくなる

 

ホワイトスペースの重要な役割として「同時に見える文字の量を減らしてより読みやすくする」ことが挙げられています。

 

ホワイトスペースによって読む速さは遅くなりますが、内容がより理解できるようになるという研究結果も出ています。

 

より読みやすく、理解しやすくするために、Webサイトのデザインを考える前に以下のことを考えておきましょう。

 

  •  ユーザはなぜそのサイトを見るのか?
  •  ユーザがそのサイトで何をするのか?

 

これを考えられるようになると、ユーザに対してサイトの案内をする効果的な手段としてホワイトスペースが使えるようになります。そして、ビジターが探しているものを見つけやすくするためにホワイトスペースを有効活用できるようになります。

 

2.ホワイトスペースがコンテンツに読みやすさを加える

 

ホワイトスペースによって、テキスト要素が整えられ、1つの文字からパラグラフへとデザインを定義することができます。内容に合わせてスペースを配置し、行間をデザインできます。

 

3.ホワイトスペースがビジターに休憩を与える

 

私たちは、1つの情報を得ようとすると時々圧倒的な情報量になってしまうことがあります。そんなときに必要となるのが沈黙と休憩になります。

 

ホワイトスペースで一番大事なのは、「ユーザを混乱させずに最も重要なことをシンプルに伝える」ことです。

 

ユーザがゴールまで迷うことなく進めるように手助けをしていきましょう。

 

4.空白スペースによってデザインをモダンに見せる

 

ホワイトスペースをうまく使ったシンプルなデザインは使いやすさだけでなく、信頼性も与えています。

 

ECサイトの商品画像の部分にホワイトスペースを入れることで、商品を美しく見せ、ユーザに多くの注意を引き付けています。

 

5.ホワイトスペースがデザインに感動を与える

 

ホワイトスペースによってデザインに対して感動を与えることができます。ホワイトスペースが私たちの感情に訴えかけてある特定のことを感じさせるようにすることもできます。

 

ホワイトスペースの種類とは?

 

color patterns 2370499 640 - ユーザーに読みやすくモダンな印象を与えるレイアウトとは?

 

ホワイトスペースといっても与える効果が場合によって異なることは理解していただけたと思います。そのうえで、ホワイトスペースについても触れていきましょう。

 

1.マクロスペース(Macro space)

 

マクロスペースとは、2つ以上の要素間を取り巻く、大きなスペースのことです。

 

このマクロスペースを操作することで、要素間に重要度の順番が生まれ、ホームページに流れが生まれてきます。

 

2.マイクロスペース(Micro space)

 

マイクロスペースとは、要素間における小さな余白になります。

例えば、CSSなどでレイアウトの設定を行う際に用いる「Padding」や「Margin」などが挙げられます。

 

このスペースによって、デザインにリズムが生まれてユーザに休憩を与えることができます。

 

3.アクティブスペース(Active space)

 

アクティブスペースとは、余白をとってオブジェクトに注目を与えることを指します。

 

このスペースを活用することで、オブジェクトをより目立たせることができます。

 

4.パッシブスペース(Passive space)

 

パッシブスペースとは、要素間の小さなスペースを指します。

 

このスペースを活用することで、発見しやすいナビゲーションを設置し、読みやすくすることができます。

 

ホワイトスペースをうまく活用しているWebサイトとは?

 

search 2041815 640 - ユーザーに読みやすくモダンな印象を与えるレイアウトとは?

 

ここまでホワイトスペースについて説明してきましたが、実際にホワイトスペースが意識されたサイトを見てみないとイメージがわきにくいと思います。

 

そこで、ホワイトスペースが上手く活用されているWebサイトをいくつか紹介します。

 

WE WERE SOFA

 

We were sofa - ユーザーに読みやすくモダンな印象を与えるレイアウトとは?

 

http://madebysofa.com/

 

WWF

 

WWF - ユーザーに読みやすくモダンな印象を与えるレイアウトとは?

 

https://www.worldwildlife.org/species/tiger

 

A-net

 

A net - ユーザーに読みやすくモダンな印象を与えるレイアウトとは?

 

http://www.a-net.com/

 

Checkout

 

Checkput - ユーザーに読みやすくモダンな印象を与えるレイアウトとは?

 

http://www.checkoutapp.com/

 

まとめ

 

いかがでしたでしょうか?

今回はホワイトスペースについてお伝えしてきました。

 

ホワイトスペースと呼ばれているからといって、ホワイトにこだわりすぎないでくださいね。ユーザが理解しやすく、使いやすいWebサイトを目指してデザインを考えていきましょう。

 

最後まで読んでいただき、ありがとうございました。

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら