不均衡なバランスを生み出す: Web デザインにおける非対称性の利用

非対称のデザイン手法は視覚的に非常に興味深く、さまざまな焦点を作り出すことができます。ここでは、非対称デザインの使用方法に関するいくつかの刺激的な例とヒントを紹介します。

非対称とは単に対称性の欠如ですが、非対称性はバランスや調和の欠如を意味するものではありません。

非対称デザインと対称デザインはどちらも躍動感と緊張感を生み出すことができますが、使用される比率に応じて調和感も生まれます。ほとんどの人は、対称性が一般的な自然現象であるため、まず対称性について考える傾向があります。レオナルド・ダ・ヴィンチのウィトルウィウス的人体図や動物の顔の外観を考えてみてください。しかし、非対称性も自然現象であり、異なる方法で現れるだけです。たとえば、人間は左利きまたは右利きになりやすい傾向があります。

非対称のデザインは非常に汎用性があります。混沌としていて混乱しているが、美しく芸術的な技法を作り出すためによく使用されます。非対称性は動きやアクションを強調することができ、画面上で躍動感や焦点を作り出すために最もよく使用される大きな利点です。一部の Web サイトでは、非対称または対称のデザインが不適切に使用されているため、Web サイトの要素が乱雑でわかりにくいものになる可能性があります。

非対称デザインは

どのようなプロジェクトが非対称デザインに適しているのでしょうか? 簡単に言えば、ほぼすべてのプロジェクトに適しています。

プロジェクトをうまく実行するには、良好なバランスを生み出すために、構成に大きなコントラストと次元を加えることが重要になることがよくあります。ページにアンバランスな印象を与えたくない場合は、バランスが取れているかどうかにかかわらず、要素の配置、アイテムのトーンの一致などに特に注意する必要があります。 Web デザインにおいて、対称性という用語のほとんどは、Web サイト上の水平対称性、またはスクロールする Web サイトの非対称セクションを指します。しかし、非対称のデザインはバランス感覚や動きを生み出すことができます。最も一般的に使用される非対称設計手法で組み合わせて使用​​される要素も対称的です。たとえば、350 ピクセルのサイドバーがある Web サイトを考えてみましょう。サイトの本体とサイドバーの幅が異なるため、すぐに非対称のシルエットが作成される可能性があります。また、写真が中心からずれていることが多く、非対称の要素が作成されます。

画像とテキスト

バランスをとる方法の 1 つは、画像やテキストなどのさまざまな要素を使用することです。これは多くのデザイナーが一般的に使用する手法です。鍵となるスキルは、この 2 つをどのように組み合わせるかにあります。多くの場合、必要なのは画像といくつかの言葉だけです。表現力豊かな画像と言葉 (フォント) は、互いに補完し、響き合う必要があります。

このテクニックの鍵となる要素は、テキストと画像のシームレスな連携です。テキストと画像で同じテーマを表現し、同じことを伝えるにはどうすればよいのでしょうか。テキストと画像を密接にリンクさせるにはどうすればよいのでしょうか。テキストと画像間の強調とバランスをどう測定すればよいのでしょうか。

イメージと空間

スペースは重要な要素 (画像やテキスト) と組み合わせられ、重みや動きの感覚を生み出します。ページの空白部分と完全な白地部分では、画像内のオブジェクトを見て方向を示します。左を向いている顔がありますか? これにより動きの感覚が生まれます。ユーザーがページ上で左から右に移動すると、頂点がありますか? その方向点は訪問者の目を下から上へ引き寄せます。非対称性を作成するもう 1 つの方法は、表示領域の一部を非表示にすることです。サイドバーとシンプルなカラー ブロックを使用すると、これを実現できます。 (通常、このコンセプトを使用すると、全体的な外観は非対称になりますが、このデザインは、Web サイトのあらゆる部分に明確な対称感を与えます)

色

非対称性は色（色のブロック）を使って表現することもできます。色相環の反対側に位置する白と黒など、はっきりと対照的な色合いは、不均衡で混沌とした印象を与えることがあります。非対称な色のパターンは自然界にも見られ、不思議なバランス感覚を持っています。多くの種では、オスはほぼ完全に対称的な色のパターンを持ちますが、メスはそれほど対称的ではありません。 (これは自然界で起こる自然現象であると考えられており、「より魅力的な」オスが捕食者を誘い出し、メスや子孫から遠ざけるのに役立ちます) バランスのとれた配色は、カラーホイールの原則に基づいており、色の選択を組み合わせて最大限に活用し、古典的な色の組み合わせ以外の、あまり対称的ではない調和のとれた色の組み合わせを作成します。たとえば、背景色とその上の画像またはテキストとのコントラスト、ベージュの背景とネオンパープルの組み合わせなどです。これらはあまり一般的に使用されない組み合わせです。もう 1 つの一般的な手法は、1 つの製品 (色が多い) と別の製品 (色がほとんどないかまったくない) を組み合わせて非対称のデザインを作成することです。

結論は

非対称のデザインは複雑で扱いにくいこともありますが、非常に美しいものでもあります。非対称性が、ほとんど予測できないバランス感覚と驚きの感覚を生み出すところが気に入っています。非対称性の美しさは、バランスのとれたデザインを完璧に実現できることです。最高のデザインは、力強い画像とテキストのバランスを保ち、画面上で目を惹く独特の美しさを生み出します。

翻訳: codrops

不均衡なバランスを生み出す: Web デザインにおける非対称性の利用

キーワード: クリエイティブ、不均一、バランス、ウェブページ、デザイン、使用、デザイン技術、技術は非常に直感的、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化