ネガティブスペースを使用して見事なウェブサイトを作成する方法

ウェブサイトとアプリには、ボタン、列、アイコン、画像、線、メディア、タイポグラフィなど、共存する必要のあるあらゆる種類の視覚要素があります。 これらの要素はすべてキャンバス（空白のWebページ）を必要とし、そのキャンバスには空白、つまりネガティブスペースまたは空白スペースが必要です。 視聴者の目は、それなしでは見たものを処理することはできません。

私たちのYoutubeチャンネルを購読する

ネガティブスペースとは何ですか？

ポジティブスペースは、主題や他の焦点で満たされた作品の一部です。 残りはネガティブスペースが占めます。 空白または白で、色やデザインが対照的で、微妙な背景画像である場合があります。それが何であれ、いっぱいになったり散らかったりするのではなく、空っぽに感じます。 ただし、ネガティブスペースが中空であるからといって、それが重要でないことを意味するわけではありません。ポジティブスペースに注意を引き、別の見方をするとポジティブスペース自体になることさえあります。

ネガティブスペースの例

ネガティブスペース、そしてそれに対応するポジティブスペースは、ウェブデザインを含むあらゆる種類のアートやデザインにあります。 FedExのロゴを見てみましょう。 紫とオレンジの文字が見えますよね？ ただし、空白には矢印があります。

その隠されたFedEx矢印は、描画やペイントと同じようにネガティブスペースを使用します。つまり、ポジティブスペースが作成されるのと同じように、アウトラインが作成されます。 このような例では、正のスペースが作成されていないという理由だけで、負のスペースは作成されません。

NBCの孔雀は同じことをします：

ネガティブスペースのポイントは通常、ポジティブスペースに焦点を当てることですが、巧妙なデザインでは焦点になることがあります。 別の例を次に示します。オオカミの歯がどのように木を形成するかを見てください。

これには用語があります：図地の逆転。 これは基本的に、前景色と背景色が場所を入れ替えて遠近法と解釈を変更することを意味します。 これに興味がある場合は、MCエッシャーの作品、特に彼の変身プリントをチェックしてください。

ネガティブスペースは写真撮影でも同じ役割を果たします。 私がいとこの息子、ジュリアンを撮ったこの肖像画を見てください。 黒の背景は彼にすべての焦点を置きます：

花びらの間のような自然の中でネガティブな空間を見つけることができ、コーヒーマグのハンドルを通る空間のように機能的なデザインで見つけることができます。

ウェブサイトでも使用しています。 私たちのホームページにはたくさんの情報がありますが、私たちがそれを間隔を空けた方法のためにそれは圧倒的ではありません。 また、背景にはデザインに追加する色や形のヒントがありますが、決して気を散らすものではありません。退屈することなく、心地よく空っぽのように見えます（そしてブランド上にあります）。

ネガティブスペースの種類

ネガティブスペースにはいくつかの種類があります。 マイクロおよびマクロは、コンポジション内のネガティブスペースのサイズを指します。 アクティブおよびパッシブとは、これらの領域がユーザーに対して何をするかを指します。

ミクロ対マクロのネガティブスペース

マイクロネガティブスペースとは、要素間の小さなスペース、つまりテキスト行間のスペース、またはナビゲーションメニューのリンク間の領域を指します。 これは、読者にとって読みやすいコンテンツに影響を与えます。 行間に十分なスペースがない場合、またはテキストが余白の外側にある場合、ユーザーはそれを読んで理解するのに苦労します。

マクロのネガティブスペースが大きくなります。 それは、レイアウトの周りのスペースと大きなデザイン要素間のスペースです。 例は、コンテンツブロック間の領域です。 デザイン全体を保持するのは、コンテナの空の部分です。

マクロネガティブスペースが少ないウェブサイトは、非常に有益な傾向があります。 マクロネガティブスペースが大量にあるWebサイトは、多くの場合、ミニマリストであるか、豪華さを示しています。 最初の例は小さなマクロのネガティブスペースで、2番目の例は大きなマクロのネガティブスペースです。

アクティブvs.パッシブネガティブスペース

アクティブなネガティブスペースはページ構造に追加され、コンテンツの流れを改善し、ユーザーが行きたい場所を案内します。 パッシブネガティブスペースはWebサイトの外観を改善しますが、ユーザーを特定のフローに移動させることはありません。 スペースが中心から外れて非対称である場合、通常はアクティブです。 バランスが取れていて対称的である場合、通常は受動的です。動きが少なく、ユーザーが特定の方法で見る必要はありません。 アクティブなネガティブスペースの例を次に示します。

そして、これがパッシブネガティブスペースの例です：

ネガティブスペースと構成

ネガティブスペースは、いくつかの理由で構成にとって重要です。

• バランスを保つために、コンポジション内のスペースを確認する必要があります。
• また、デザイン内のさまざまなオブジェクト間の関係を試すこともできます。
• ウェブデザインでは、それはあなたのページに人々を留めておくことが重要であるという役割を果たすことができます。
• 要素の周囲のスペースの量によって、要素に焦点を合わせる量が決まります。スペースが多いほど、焦点が多くなります。

ネガティブスペースとポジティブスペースの適切なバランスの選択

使用するネガティブスペースとポジティブスペースの量は、目的の外観とビューアで何を呼び起こしたいかによって異なります。

• 見た目に美しいデザインが必要な場合は、おそらく同じ部分のネガティブスペースとポジティブスペースを使用します。
• 意図的にきびきびとミニマリストに見えるデザインの場合は、よりネガティブなスペースを選びます。
• 圧倒的であなたの顔を見るために、あなたはよりポジティブなスペースを選ぶかもしれません。

デザイナーは、ブランドとWebサイトの意図された目的に適切なバランスがとれるまで、間隔を空けて遊ぶ必要があります。

ネガティブスペースのあるテキストの多いWebサイトの整理

大量の情報を1ページに詰め込む必要がある場合、ネガティブスペースを配置する場所を特定するのは困難です。特に、その情報がテキストが多く、雑然と見える場合はなおさらです。 HostingDudeは、ポジティブスペースが多すぎることの良い例です。

一方、New York Timesは、目を狂わせずにホームページにニュースを詰め込む方法を考え出しました。これはすべて、間隔（および色の選択）のおかげです。 マクロスペースの余地はあまりありませんが、ミクロスペースを利用しています。

HostingDudeの要素は互いに接近していますが、New York Times Webサイトの要素は、それらの間に余分なスペースがあるため、より統一されているように見えます。 目はページを理解するのが簡単で、より完全でまとまりのあるデザインになります。 目が休む機会があるとき、それはそれが見ているものをよりよく取り入れることができます。 ネガティブスペースは、少ないほど多いと信じています。

負のスペースでテキストを分割する

デザイナーが見た目に美しく、テキストを多用するホームページを作成する方法を見てきましたが、テキストの長いブロック自体はどうでしょうか。 短い段落と長い段落を混ぜたり、見出しを太字にしたり、リストを作成したり、記事全体にメディアを追加したりすると、単語の周りにネガティブなスペースができ、読者にとってより魅力的なものになります。 コピーであっても外観は重要であり、優れたデザイナーはそれを考慮に入れています。

ネガティブスペースのポイントをクライアントに説明する

ウェブサイトのデザイナーは、ネガティブスペースについてクライアントと衝突する可能性があります。 クライアントは、重要な金儲けの情報を詰め込む余地がさらにあります。 彼らは、空白スペースは無駄なスペースだと感じています。 一方、設計者は、目が実際に既存の情報を吸収するために必要な視覚的な中断を確認します。 彼らは、コンテンツのないスペースでさえ、ウェブサイト上のすべてのスペースが重要であることを知っています。

ここで、モックアップツールとプロトタイピングツールが役立ちます。 クライアントに2つのバージョンのWebサイトを表示します。1つは十分な量のネガティブスペースがあり、もう1つはポジティブスペースで過負荷になっています。 ウェブサイトを並べて見てもらい、遊んでもらいます。 私の推測では、彼らはうまく設計されたウェブサイトをナビゲートするのに簡単な時間を過ごし、不十分に設計されたウェブサイトに迷い込んでいると感じるでしょう。

まとめ

ウェブサイトにはさまざまな要素があり、それらの要素を調和させて視聴者を引き付けたい場合は、それらの周りに空白が必要です。 使用する空白の量とその機能は、（a）ブランドと（b）ユーザーに実行してほしいアクションによって異なります。 色を反転したり、ネガティブスペースで描画したりして、面白くて目を見張るような方法で定義するなど、ホワイトスペースでクリエイティブにすることもできます。

どのアプローチを採用する場合でも、ホワイトスペースはバランスが取れていると感じる必要があります。ただし、必ずしも対称的であるとは限りません。 代わりに、要素が互いに競合することなく、必要なタイプの注意を引きながらページ上に存在することを意味します。 視聴者にとって、バランスとは、混乱したり圧倒されたりすることなくWebサイトを見ることができることを意味します。

Webサイトの空白を試してください。 いくつかを追加し、いくつかを取り出します。 マクロを減らしてミクロを増やす、またはその逆。 特定の要素の周りの空白がユーザーに行動を促す方法をテストします。 ホワイトスペースの美しさは、それが芸術的なテクニックであるということです。つまり、厳格なルールはありません。

旅行ウェブサイトをデザインしますか？ おそらく、多くのマクロスペースを使用することになります。 旅行ウェブサイトのDiviチャイルドテーマのまとめをご覧ください。

StockVector /Shutterstock.com経由の注目の画像