スマートフォンサイトを表示する

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 第11回 Webサイトの印象を左右する、余白の使い方をマスターしよう

エキスパートコラム

Jimdoで魅せる日本語Webデザイン(全12回)

第11回:Webサイトの印象を左右する、余白の使い方をマスターしよう

執筆:服部 雄樹(服部制作室)

2017年2月6日更新

  • このエントリーをはてなブックマークに追加

閲覧数931views

このコラムをPDF形式でダウンロードする

JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて解説する本コラム。

前回のコラムではボタンをデザインするポイントについて解説しました。第11回目となる今回は、Webサイトを印象的に魅せる余白の使い方のポイントを見ていきます。

余白は会話における「間」のようなもの

皆さまはWebサイトを制作するとき、余白をどの程度意識しているでしょうか。特に理由もなく大きなスペースを空けたり、余白の使い方に規則性がなかったり、逆に余白を全く使わない、という方も多く見られます。これでは閲覧者とのコミュニケーションがうまく取れません。

Webサイトをコミュニケーションのツールだと考えると、余白とは会話における「間」にあたります。話し相手が会話の最中でいきなり黙り込んでしまったり、黙ったと思ったら急に話し出したり、または息継ぎもせずに一方的に話していたらどうでしょう?おそらくその会話はあまり盛り上がることはないでしょう。それと同じように、Webサイトにも適切な間が必要です。

見せたいものによって余白の使い方は変わる

それでは、適切な間とはどういったものでしょうか。結論から言ってしまうと全てのWebサイトに使える絶対的な正解はありません。扱っている商品やサービスを「どう見せたいか」によって方法が異なるからです。

例えば上の2つの写真に写っている絵画に、それぞれどのような印象を持つでしょうか?おそらくほとんどの人がAの絵画の方を高級なものだと感じるはずです。一方、Bの絵画は手頃な価格で手に入りそうです。

AとBの写真の中に、実は1枚同じ絵画を潜り込ませてあります。下図の赤丸の中にかかっている絵は全く同じものですが、余白の有無で大きく印象が異なることが分かります。

このように「どう見せたいか」によって余白の使い方が変わることを理解し、ご自身の扱っている商品やサービスの特徴に合わせて最適な余白の使い方を考えてみましょう。

余白によって情報が明確になり、可読性が向上する

また、余白にはコンテンツを「区切る」という重要な役割もあります。やや極端な例ですが、下図のAでは余白をほとんど使わず、コンテンツの間を詰めて掲載しています。一方、Bでは各コンテンツ間に適度な余白を使用し、「Point.1」というグループと「Point.2」というグループの間にはひときわ大きな余白を空けています。

このように、余白を使うことで情報が整理され、適切にグループ化されたコンテンツは、そうでないコンテンツに比べて可読性が向上することが分かります。

ホワイトスペースによって意識の分散を防ぐ

さらに、余白を大胆に使用することで閲覧者の意識を一点に集中させることができます。最も成功した例は「Google」です。他の検索サービスがニュースやトピックスなど多くのコンテンツでトップページを飾る中、Googleのトップページはユーザーに行って欲しい行動、つまり「検索する」という機能以外のほとんどの情報を削ぎ落とした、非常にミニマルなデザインになっています。

Googleのトップページは余白を大胆に取り入れたデザイン

ここまで思い切ったデザインは難しいとしても、例えば「お問い合わせボタンの周りには大きめの余白を作る」など、閲覧者に集中して欲しいコンテンツがあるときは、周囲に大胆な余白を取り入れることで意識が分散するのを防ぐことができます。

うまい漫才や歴史的なスピーチには絶妙なタメがある

冒頭で、余白とは「間」であると解説しましたが、人を笑わすのがうまい漫才師は、面白いことを言う前に絶妙なタメを作ります。スピーチが上手な政治家もしかり。これと同じように、Webサイトのデザインにも適切な「間」を取り入れ、テンポの良いコミュニケーションを心がけてみてください。きっとその成果に驚かれることでしょう。

さて、全12回でお届けしてきた本コラムもいよいよ次回が最終回となります。これまでのコラムを振り返りながら、Webサイトをデザインするポイントの総集編をお届けします。どうぞお楽しみに!

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/3/12~2017/3/18]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!