ウェブデザインにおける空白の効果的な使用へのガイド
公開: 2021-10-03デザイナーはそれを気に入っていますが、ウェブサイトの所有者はそれを埋めたいと思っています。 ホワイトスペースは、貴重な画面スペースの無駄と見なされることがよくあります。
それでも、それはスペースの無駄ではありません！ これは、効果的なWebデザインに不可欠なデザイン要素であり、強力なツールです。 実際、それはウェブサイトのコンテンツと同じくらい重要です。 「ホワイトスペースをインテリジェントに使用することで、コンテンツに息を吹き込む余地が生まれます。 」 読みやすく、訪問者を圧倒しないバランスの取れたインターフェイスを作成するのに役立ちます。
ホワイトスペースとは何ですか？
「しばしば「ネガティブスペース」または「オープンスペース」と呼ばれるホワイトスペースは、ページの他の要素の間に残されたスペースです。 」 行と文字の間隔から、テキストと画像を囲むスペース、余白と溝まで、すべてをカバーします。
モザイクをまとめる接着剤、または音楽の沈黙と考えてください。 それがないと、物事は構造化されておらず、雑然としていて、ホワイトノイズのようになります。 ホワイトスペースはデザインをまとめ、ページの全体的な流れを形作るのに役立ちます。 それはアクティブな要素であり、優れたデザインの基本的な構成要素です。
これは、Webデザインで空白を効果的に使用するためのガイドです。
1.テキストの読みやすさを向上させる
間隔が狭いテキストは雑然としていて読みにくいです。 ただし、間隔を空けすぎると、読者は切断を感じ、テキスト内での位置を失う可能性があります。 ユーザーが情報過多に直面しているときに、コンテンツを簡単に利用できるようにしないと、ユーザーは単に気になりません。
テキストで空白を正しく使用すると、読みやすさが最大20％向上します。 ページをデザインするときは、段落の余白と行間隔を考慮してください。 「空白の量は、訪問者が読書中に取る一時停止を反映する必要があります。 それは目の視覚的な呼吸空間のようなものです。 」
2.コンテンツを整理します
近接の法則は、人間の目が特定の視覚要素間の関係をどのように認識するかを詳しく説明しています。 密接にグループ化されたものは関連していると認識されますが、離れたものは異なると考えられます。
コンテンツ間の空白の量は視覚的な手がかりとして機能し、訪問者にコンテンツのさまざまな要素間の関係を示します。 オブジェクトは、オブジェクト間の空白を減らすことでグループ化することも、増やすことで分割することもできます。
テキストに関しては、近接の法則は、段落を使用してアイデアをグループ化することにより、テキスト全体を理解するのに役立ちます。 フォームをデザインするときにも役立ちます。わかりやすくするために、ラベルを関連するフィールドの近くに配置します。
3.フォーカスと強調を作成します
雑然としたインターフェースは訪問者を圧倒し、あまりにも多くの情報で訪問者を混乱させ、すべてのノイズの中でページのコアメッセージを失います。 これらの気を散らすものを取り除くことで、訪問者の目をページの最も重要な要素に引き付けます。 オブジェクトを囲む白いスペースが多いほど、オブジェクトに目を引き付けられます。
MailChimpは、このレイアウトで自然なホットスポットを作成するために空白を使用する手法を完成させました。 あなたが彼らのホームページにたどり着いたとき、あなたの目はすぐに中央で最も重要な「サインアップ無料」の行動の呼びかけに引き付けられました。
これは、テキストで使用するための優れた手法でもあります。 テキストの特定の要素を強調したい場合、おそらくヘッダーが本当に注目を集めるようにするために、その文字間の間隔を広げてみてください。 これは一貫性のパターンを壊し、読者の注意を引きます。
4.コンテンツを構成します
ホワイトスペースを巧みに使用することで、ある要素から別の要素に移動するように目を向けることができ、ページ上の情報の階層に視覚的な手がかりを与え、読者をその中のパスに導くことができます。
人気のある式は、自然なスキャンの習慣を模倣したZ字型のレイアウトです。 このBasecampホームページに示されているように、読者は左上隅から始めて、右の水平線をたどり、次に左下に戻ってから、別の水平線をたどります。
あるいは、非対称レイアウトは、Dropboxでこの例で使用されているように、ページの特定の要素にフォーカスを向けるのに最適な、より予想外の興味深い形式で方向を強調します。
5.贅沢な印象を与える
ホワイトスペースは、主にWebサイトのユーザーエクスペリエンスを向上させるための手法として使用されますが、美的にも使用されます。 Vogueのような光沢のある雑誌をめくったことがあれば、ホワイトスペースを多用することで、優雅さ、豪華さ、洗練さを感じさせることができるでしょう。
アンジェラロイは、ラグジュアリーファッションへの持続可能な倫理的なアプローチを支持しています。 豊富な空白は、製品がWebページの不動産よりもはるかに排他的で重要であることを示しています。
6.白である必要はありません！
最後に、その名前にもかかわらず、空白は白である必要はないことに注意してください。 ネガティブスペースでは、任意の色または不足している色を使用できます。 パターン化またはテクスチャ化された背景や背景画像を使用することもできます。
長いスクロールのサイトを設計している場合、空白を使用することは、ページの流れを維持し、コンテンツの構成、焦点、および強調を管理するための鍵となります。 優れたヒントは、コンテンツの方向と流れを維持しながら、ページの下にある補完的な色のブロックを交互に配置して、さまざまなセクションをセグメント化することです。
「ホワイトスペースは無駄なスペースではありません。ウェブサイトの親友になることができます。 」 ホワイトスペースを有効活用することで、楽しく、快適で、やりやすいデザインになります。
デザインで空白をどのように使用しますか？ リストに追加するためのヒントはありますか？ 以下のコメントで教えてください。
デザインの心理学シリーズで学び続けてください！
今すぐパート1をチェックして、新しい分割払いがいつリリースされるかがわかるように、レイアウトにサブスクライブしていることを確認してください。