WEBデザインで大切な余白デザインについてのまとめ

執筆 TREVOスタッフ株式会社TREVOのブログは、Web制作の現場で日々奮闘しているスタッフが、企画・デザイン・開発・SEO・運用まで幅広いテーマで執筆しています。

「分かりやすく、役に立つ」ことをモットーに、ホームページ制作や運営のヒント、トレンド情報、日々の気づきを発信中です。大阪を拠点に、全国のお客様と向き合いながら培った現場目線のノウハウを、実体験ベースでお届けします。
初めてホームページ制作をご検討の方から、リニューアルや集客強化を考えている方まで、何かヒントになる情報があればうれしいです。
記事へのご質問やご相談も、お気軽にお問い合わせください。
執筆記事:記事一覧ページ

監修 板浪 雅樹2005年から WEB 業界一筋。500サイト超を手がける SEO・WordPress のエキスパート。「公開後こそ本番」を掲げ、データ分析とユーザー視点で成果を引き出す運用を提案。

2005年に制作会社へ入社後、プログラマーからキャリアをスタート。サーバー構築・データベース設計で培った技術を強みに、WordPress テーマ/プラグイン開発やサイト移行の難案件を多数担当してきました。
2010年以降は SEO エンジニアとしても活動領域を拡大。コンテンツ設計・内部リンク最適化・高速化チューニングにより、競合の激しいビッグキーワードで上位獲得を実現してきました。
現在は TREVO のウェブディレクターとして、要件定義から運用改善まで一気通貫でリード。AI ライティングや GA4/Looker Studio を活用したレポーティング手法を開発し、「数字で説明できるサイト運用」をポリシーにクライアントの ROI 最大化を支援しています。
趣味/強み:筋トレとランニングで日々の集中力をキープ。複雑な課題を“仕組み”で解決するのが得意。
モットー:「サイトは資産。改善を止めた瞬間から価値は目減りする」
SNS:x(旧 Twitter)@TREVO_WEB
WEBサイトを制作する上で余白の大切がいかに大切であるかえお認識することが良いデザインを行う上での初めの一歩となるでしょう。かくいう私もデザインの余白生成に関しては全く無頓着だった人間の一人・・・今回はおさらいも含めて一緒に学習していきましょう。
WEBデザインにおける余白とは
もしWEBデザインで余白が全くないものだったとしたら、それは閲覧者に対して親切でない情報の提供をしていることになるでしょう。一度に見る事のできる情報量が多くなりすぎてしまいます。
デザイン初心者から余白の重要性に気がつき大胆に勇気をもって余白を作る事ができるでしょうか?もちろん可能であればその人は才能がある方ですし、感覚的にデザインに対する認識がある方です。
しかしデザインをこれから学ぼうとするか、あるいは初めて仕事で実際に何らかのレイアウトやデザインに携わる方は意識的に「余白」なんてことを考えている方はあまりいないのではないでしょうか?この意識的にということがとても大切です。
なぜなら余白というものが適切に生成され良いデザインとして昇華されるためには要素と要素を配置し、その結果発生する「余白」すなわち自動的に余白が出来上がる状態よりも意図的に余白を作り出し、意味の深みを増すことを目的に「余白」を作り出すことが結果として良いデザインを生み出すことを可能とするためです。
この「余白が出来る」ことと「余白を作る」ことの違いがもたらすデザインの差について考えていきたいと思います。
余白がデザインにもたらす効果
まずWEBサイトとはユーザーが知りたい情報を知るためのツールです。この基本的なニーズを満たすためにはユーザーが必要としている情報にいかに効果的にアプローチし情報を取得しやすいようにするかが課題です。この時「余白」がそれを助けます。
余白が適切に施されているサイトは必要な情報を一目で見つけることが可能となります。多くの情報がぎちぎちに詰め込まれたページではどの部分に注目すればよいかわからずユーザビリティが低いデザインとされます。
また情報量が多くなる場合等、文字間や行間などの文字の配置における「余白」よりも重要です。これはユーザーが文字を読み込むための可読性を上昇させ、読みやすいサイトすなわち読み続けやすいサイトであることが可能だからです。
また多くを「余白」で満たすデザインはバナーやアニメーションが少なく、洗練されたデザインを提供することが可能です。伝えたいことは多くとも勇気をもって不必要な要素を洗い出し、余白を取り入れることで、伝えたい情報を伝えやすくかつ、ユーザーに良い印象を与えることに繋がります。この良い印象ということは企業の価値や、お店のイメージなどの向上に役立ち、良心的な印象を閲覧者に与えることが可能となります。
特にWEBサイトを構成する要素として画像や写真またテキストやイラスト、アニメーション、スライドショー等様々ですが、その要素同士の関係性を作り出している「余白」がどのようにあるかが、それぞれの要素のクオリティに影響を与えるといえます。
どのような種類の「余白」があるのでしょうか
マクロスペースと呼ばれるこの余白は2つ以上の要素を取りまく大きなスペースです。この大きな「余白」を作り出すことで、WEBサイトの流れすなわち閲覧者の目の動きに対して影響を与えることが可能です。ここで初めに記述した通り要素と要素を配置し出来上がった余白という発想ではなく、逆に「余白」を生成することで閲覧者がどのように十番でそのWEBサイトを閲覧するかという発想で「余白」を作り出すことができればそれは余白を作り出すデザインができているといえるのではないでしょうか?
ミクロスペースとはマクロに対する対のスペース逆すなわち小さな余白を指します。行間や文字間にある余白のことで、これも文字と文字の関係性を考察し「余白」を生み出すことで、文章を読む際のリズムを調整し、閲覧差が文章を読むための時間間隔を調整することが可能とされます。これは読みやすさや長文を読むにあたり心地よく文章を読んでもらうための工夫でもあります。
まとめ
このように余白を生成する際には余白とは単純な余剰分であるというアイデアを取り去り、意図的かつ能動的に余白を生み出そうとする事が余白をうまく利用したデザインへの第一歩であることが理解できます。意識的に余白を思考し優れたデザインを世に出すことを心掛けることは大切ですね。
大阪のホームページ制作会社TREVOでは、最短2日で仮サイトを公開できるスピード対応や、SEO対策に強いオリジナルデザインの制作サービスを提供しています。