)2017年2月6日更新ツイート閲覧数4,316viewsこのコラムを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サイトをデザインするポイントの総集編をお届けします。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。人気講師が教える本格Webサイトの書き方』など。(著)「4つのレイアウトパターン」と「レスポンシブデザイン」を実際に手を動かして作りながらサイト制作のきほんが学べます!ライブ感のあるチュートリアル学習により、まるでWebデザイン会社でOJT(オン・ザ・ジョブ・トレーニング)を受けているような体験型の独習書です。ための経理サポートサイト文具、通信、オフィスのことなら何でもお任せ問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール事務所開設するなら固定電話番号で信頼アップ本コンテンツは、掲載時点の内容となります。「みんなのビジネスオンライン」は「はじめてWEB」にお読み替えいただきますようお願いいたします。Reserved.「はじめてWEB」はKDDIが提供しています。