fc2ブログ

Home > デザイン > ホワイトスペースを使ったウェブデザインの考え方

ホワイトスペースを使ったウェブデザインの考え方

whitespace.png

ウェブサイトの要素をレイアウトをする際に非常に重要な
ホワイトスペースの考え方について、すこしまとめてみました。
私が人にウェブデザインを教えるときは、まずここから始めます。
boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。

リズムが整っていれば、他の要素が主張したことが上手に伝わります。
リズムが整っていなければ、けんかしあい、不協和音=見づらい状況を作り出します。

自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。
どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。




余白を変えると、雰囲気が変わります。


whitespace_case1.png

とてもとてもシンプルな例を出してみます。
AとBを比較してみてください。

どちらのほうが読みやすいように感じますか?
どんなふうに感じましたか?


whitespace_case2.png

この例では、Bのほうに大きな余白を与えました。
4隅すべて同じぐらいの余白です。


Aのような文字を敷き詰めた状態は、どこでよく見るでしょうか。
例えば新聞、チラシ、情報誌などでよく見ますね。
ということは、Aの場合の印象は、「情報がたくさんあるんだな〜」といったものとなるはずです。
ただ、人によっては「文字がいっぱいで読みづらい」と感じる人もいるでしょう。

Bのように余白がある状態は、
ブランド品のパンフレットや、カード、ポートフォリオなどでよく見かけます。
また、雑誌などでもよく使われています。
余白を加えると、余白の割合が大きければ大きいほど、高級感や余裕を表現できます。
余白の割合で、その度合を調整することができます。
デメリットとしては、文字数が実質的に減るので、伝えられる文字が減ることですね。


まずは、余白を意識するところからはじめましょう。
雑誌や、本、印刷物、もちろんウェブサイトも、余白を意識すると見え方が変わってくるはずです。
(できれば、毎日続けてください。感覚は向上しますよ。)




CSSのBOX指定する際の空白のおさらい

whitespace_case3.png


ご存知の方も多いでしょうが、ウェブデザインにおいて
ホワイトスペースの取り扱いに非常に重要な
marginや、paddingについて、今一度確認してみてください。

marginとpaddingの間にborderが存在すること。
marginやpaddingは、

margin:10px 0px 10px 0px; /*上・右・下・左の反時計回り*/
margin:10px 0px;/*上下・左右の一括*/
margin:10px;/*上下左右一括*/


のような一括指定や

margin-top:10px;
margin-right:10px;
margin-left:10px;
margin-bottom:10px;


のように空白をあける位置を指定することができること。
(marginをpaddingに変えると、同じことができます。)




画像や、タイトルの間の余白で、雰囲気が変わります。

whitespace_case4.png


画像やタイトルの間の余白においても、ホワイトスペースを上手に使うことで
信頼感や、安心感を与えることができます。


whitespace_case5.png

Aは上下左右には空白がありますが、
文字や画像の間は詰まったままです。
Bは赤丸に当たる部分にも、ホワイトスペースを置いています。

Bのほうが見やすいデザインに仕上がります。
Aのような手法が使われないわけではないのですが
詰めるときはもう文字がくっつくぐらい詰めて、アートにしてしまう位
行き切らないと、意図したと思ってもらえないかもしれません。



どれが、仲間はずれでしょう?

whitespace_case6.png

ここに、BOXがA,B,Cとあります。
どれが仲間はずれだとおもいますか?



答えはCです。
BOX AとBは同じ形、狭いホワイトスペースで並んでいますが、
AとBに比べて、Cは少し離れていて、大きさも違います。

これが要素の差別化です。(いま思いついたので覚えなくてもOKです。)


人の目は、意識していなくても、グループであるものと
グループでないものを見分けてしまいます。
それを利用して、仲間であるものと、違うものを見分けさせ、
わかりやすいデザインを作っていく際にも、ホワイトスペースは有効です。



ウェブデザインに置き換えてみると

whitespace_case7.png

AとBであった要素をメイン部分として、仲間はずれだったCをサイドバーとして括ってみました。
こうすると、どちらかが「仲間はずれ」ではなくて
「2つの項目にわかれている」ように見えますね。

ウェブデザインのレイアウトでは、このような見え方を利用していることが多いのです。


whitespace_case8.png

ホワイトスペースの視点からみてみましょう。

グリーン・レッドとも同じ大きさの円を置いています。
内側にあるグリーンは1つ。
わたしの場合は、
外側・特に「差別化する」空白は、このグリーンの1に対して2倍から3倍開けるようにしています。

リズムを整えてあげることで、見やすく、そして要素の差別化まで行えてしまいました。



行の高さで生まれるホワイトスペース

whitespace_case9.png

Aは見出し部分と、文章部分、また文章の間の行の高さが詰まった状態です。
Bは、見出し部分との間、文章の行の高さが適度に空いた状態となります。

Bのほうが見やすいですね。
これもひとつのホワイトスペースではないかと私は考えています。



htmlとして置き換えてみます

whitespace_case10.png

文章内にすでにh1,h2タグが存在している前提で
このようなBOXがあるという風に考え
周りをdivで囲い、タイトルをh3で、文章をPで囲いました。

さて、これをhtmlとCSSで表現したらどうなるか、例を出してみます。

このようなボックスを作るとしたら、下記のようなソースになるかとおもいます。
チェックしてないので、そのとおりにならなかったらゴメンナサイ。

html:

私の個人主義


君は場合おそらくその発表院というのの日を得たた。そんなに十月が保留人はまずこの蹂躙なけれでだけをするてしまえますでも説明考えるますだって、実際には解りですたたた。天性をいうのもいったい事実をしきりにうますます。




CSS:
div{
padding:20px;
}

h3{
margin:0px 0px 19px 0px;
font-size:19px;
}

p{
font-size:10px;
line-height:160%;
margin:0px;
}



ここで大事なのは、Pにかかっているline-heightです。
これが文字の高さを指定するスタイルシートです。

line-height:160%;


line-heightは、読みやすいのが160%から180%だとよくいわれますので
このあたりを基準に、高さを決めてみてください。
%の他にemなどでも指定ができます。
ぜひご自身で触って、どれくらいが読みやすいかやってみてください。


-----------



いかがでしたか。

ホワイトスペースは本当に様々なところに存在します。
ホワイトと言いながら、白くないこともあります。
どんなふうに空間が空いていればスッキリして見えるのか
好きな雑誌や、ウェブサイトがどんな空間の使い方をしているのか
意識してみてはいかがでしょうか。



写真は写真素材足成さまから、ダミーテキストはすぐ使えるダミーテキストからいただきました。


関連記事

Comments: 1

☆緋奏☆ URL 2011-09-15 Thu 20:18:14

初めまして^^
ツイッターから飛んできました。
webデザインに興味があり、今回の記事を読ませて頂いて大変勉強になりました^^
ホワイトスペースの工夫一つで、見栄えや印象が変わるのが実感できました。

まだ、タグと言うタグを十分理解していない初心者中の初心者ですが
気になる記事が沢山ありましたので、勉強させて頂きます^^



Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/16-9044b096
Listed below are links to weblogs that reference
ホワイトスペースを使ったウェブデザインの考え方 from バニデザノート

Home > デザイン > ホワイトスペースを使ったウェブデザインの考え方

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items