デザインの心理学: オンライン イメージを形成する

デザインの心理学シリーズの前の 2 回の記事で、色の重要性を徹底的に取り上げました。 ただし、色の選択は、悪いデザインとの戦いの一部にすぎません。

新しい Web デザインの背景パターンを作成している場合でも、新製品のパッケージを考えている場合でも、最終的には紙に鉛筆を置いてスケッチを開始する必要があります。 どんな形を作り始めても、それは視聴者に強力な影響を与えます。

あなたが選んだ形と、あなたのブランド全体についての彼らの言葉との間で、あなたの顧客が作る共通の関連性について、さらに学びましょう。 さらに、これらの形状があらゆる種類のデザインでどのように使用されているかの実例をご覧ください。

• ライン
• 円と楕円
• 三角形
• 四角形
• ポリゴン
• 抽象的な形

直線と曲線

ラインワークに関しては、角度のあるものと曲線的なものの境界線を引く必要があります。 線はすべてのアートワークを生み出す基本的な形かもしれませんが、線に大きく依存するロゴや Web デザインは単純ではありません。

通常、人間は直線よりも曲線を好みます。 これは、視覚系の神経生理学に起因する可能性があります。 目が完全に形成されていない乳児でさえ、鋭く角張った線よりも湾曲した形に長く注意を向けます.

ただし、カーブによってユーザーがデザインに注意を向ける時間が増えるとは限りません。 実際、鋭角の方がユーザーの注意をすぐに引き付ける可能性が高くなります。 曲線は柔らかさと複雑さを意味し、鋭い線と角度は真剣さとシンプルさを意味します。

研究によると、角張った物体は脅威の感覚を引き起こす可能性があります。 形状の鋭さは、恐怖を処理する脳の領域である扁桃体の活動を高めることが示されています。 そのため、鋭い角度は多くの場合、視聴者の注意を必要とし、曲がった角度よりも早く目を引きます。

これらの自然な人間の反応パターンを使用して、視聴者に何かを感じさせるデザインを作成できます。 楽しく気楽なブランドの場合、曲線はサイトのテキスト ブロックを分割し、風変わりな感覚を生み出すのに役立ちます。 ただし、より本格的なブランド ペルソナの場合は、鋭い角度と直線が重力を感じさせるのに役立ちます。

クリエイティブ スタジオ The Inlay は直線とミニマリスト デザインを使用して、ページをスクロールするときに目を引くようにしていますが、否定的な反応を引き起こす可能性のある鋭い角度を過度に使用することは避けています。

ただし、技術コンサルティング会社の Affinity は、Web サイト全体で人間関係を重視した言葉を多く使用しています。 丸みを帯びた矢印のロゴとデザイン全体の湾曲した形状は、テクノロジー分野で使用される従来の堅固なイメージよりもはるかに親しみやすいと感じます。

円と楕円

誰かをスクエアと呼んでいる場合は、おそらく彼らが退屈だとほのめかしている. 反対に、円は楽しさ、若さ、のんきなメンタリティを意味します。 赤ちゃんの注意は曲線の方が長く続くことが示されているため、赤ちゃんが円形のおもちゃを好む傾向があることは理にかなっています.

視聴者が円を見ると、開放性と一体感が頭に浮かびます。 丸い形は、コミュニティや保護の気持ちを暗示することもできます。たとえば、自分のバブルで安全であることや、素敵な抱擁などです。 サークルのその他の特徴には、友情、暖かさ、女性らしさ、再生 (サークルオブ ライフ) などがあります。

ネーミングの観点から、Ring ドアベルはユーザーの感覚を利用しています。 聴覚的には、ドアベルが「鳴る」ことを想像できますが、視覚的に想像される「鳴る」は、ロゴと物理的なハードウェアの設計方法の両方に結びついています。

Netflix のリアリティ コンペティション ショーである The Circle は、循環的なブランディングが最も効果的なもう 1 つの場所です。 前提は、自分のアイデンティティについて真実を語っているかもしれないし、語っていないかもしれない人々のグループが、The Circle と呼ばれるソーシャル メディア プラットフォームを通じてのみ仲間の間で人気を得ようとしているということです。 目的は？ コミュニティにとどまり、The Circle にとどまります。

三角形

加速、動き、バランス、三角形はアクティビティを簡単に示します。 エネルギッシュでパワフルな形で、興奮から注意までさまざまな感情を呼び起こします。

三角形は影響力があり、向きによって消費者の心の中での意味が変わるため、三角形の向きが重要です。 たとえば、上向きの三角形は力強さを示しますが、少しでも斜めに傾けると不安定さを示します。 しかし、紙吹雪のように、さまざまな方向に複数の三角形を配置すると、娯楽や興奮を示すことができます。

お気に入りの動画や音楽のストリーミング サービスの再生ボタンは、右向きの三角形にすぎません。 これは、一時停止を示す 2 本の直線 (2 本の直線の間の文字通りの「切れ目」) とは対照的に、前方への動きを示す矢印に似ています。

HGTVも三角形のデザインを巧みに使っています。 二等辺三角形がワードマークの上部を横切っており、家の屋根を明確かつシンプルに表現しています。 ロゴのもう一方の端にある「V」は、下を向いているため、バランスが取れています。

四角形

四角形には、任意の四角形が含まれます。 正方形と長方形が最も一般的な例ですが、台形、ひし形などもここに含まれています。 正方形と長方形は、多くの場合、安定性と安定性、適合性、または率直さの象徴です。 それらの直角は、合理性、秩序、構造を視覚的に示唆しています。

正方形と長方形は、現実的または実用的な印象を与えたいブランドによってよく使用されます。 ナショナル ジオグラフィックからリンクトイン、ドミノまで、さまざまな業界で、特にロゴの場合、正方形と長方形が一般的です。

他のタイプの四辺形も規則性の感覚を伝えますが、より前衛的で現代的な視覚的なひねりを加えています。 ダイヤモンドは、形状と宝石の間の無意識の関連付けにより、高級品や高級品を伝えるために使用できます. 凧やひし形のような四角形は、過度に使用されたパターンに頼ることなく、安定性のレベルを示唆するのに最適です。

オーストラリアを拠点とする Web デザイナー、Mokthar Saghafi は、Web サイトの幾何学模様に平行四辺形を使用しています。 四角形がきれいに積み上げられており、四角形に通常含まれる安定性を暗示しています。 ただし、それらを真の長方形ではなくひし形として少しオフキルターに設定すると、視覚的な関心の別の層が追加されます.

レゴは現実的でも適合的でもないように見えるかもしれませんが、確かに安定しています。 正方形のロゴは、製品への視覚的なコールバックでもあります。 4 つのスタッドが付いた正方形のレゴ ブロックに非常によく似ています。

五角形、六角形、八角形

数学とデザインでは、この形状の集合は「ポリゴン」として知られています。 多角形は、あらゆる 2D 幾何学的形状を表すために使用される包括的な用語ですが、通常は 5 つ以上の辺を持つもののために予約されています。

自然界では、これらの形状は、蜂の巣からシェル パターン、結晶、岩層まで、いたるところに見られます。 ただし、Web デザインでは、あまり使用されません。 これは、より一般的なデザインの傾向からあなたを際立たせるのに役立つため、クライアントにとって良いことです!

複雑で未来的なポリゴンは、よく構造化されたモダンで現代的なオーラを作成するためによく使用されます。 ただし、特定のポリゴンはニッチな業界で一般的に使用されています。 たとえば、自動車や機械の製造および修理会社では、ボルトの頭に似ているため、六角形や八角形をデザインに採用することがよくあります。

英国の Web デザイン エージェンシーである Built By Buffalo が使用している六角形のレイアウトは、ホームページを圧倒することなく、彼らの作品の多くの例を前もって示すのに最適な方法です。 次に、チームの顔写真を紹介したり、楽しいオフィスの写真を見せたり、重要な情報を呼び出したりするために、Web サイト全体で使用されます。

ペンタゴンは世界で最も有名な建物の 1 つであり、その 5 面構造にちなんで名付けられました。 建築設計にポリゴンを使用した典型的な例であり、建物自体がストイックさと安定性を伝えています

抽象的な形

他にも、Web や製品のデザイン、プロモーション、ブランディングの取り組みで一般的に使用されている幾何学的および抽象的な形状がいくつかあります。 これらの人気のある形とその意味の概要を簡単に説明しましょう。

ブロブ

ブロブは、多くの場合、楽しいまたはばかげたものとして特徴付けられる形状です。 有名な「ブーバ/キキ効果」は、文化や書記体系を問わず、ナンセンスな単語「ブーバ」を塊の形に関連付ける一方で、「キキ」はとがった抽象的な形に関連付けることを証明しています。  

とがったエッジのあるシャープな抽象的な形を使用すると、視聴者の注目をすぐに集めることができます。 ただし、丸みを帯びた形状を使用すると、より快適で遊び心が感じられます.

ブルックリンを拠点とするカスタム WordPress デザイン スタジオ Buzzworthy は、多くのブロブ シェイプと球状のトランジション アニメーションを使用して、楽しくファンキーなスタイルを紹介しています。

十字架

精神性と癒し、つながり、またはバランスを示すためによく使用される十字架は、Web デザインで常に使用されます。 これは、2 つの物事の出会いやつながりを視覚的に暗示する最も一般的な方法です。 デザインのクロスのもう 1 つの一般的な用途は、「プラス」記号として、何かをカートに追加したり、詳細情報を表示したりできることを示します。

ロゴでは、十字架は通常、宗教的なつながりが強いため、宗教団体のために予約されていますが、他のより不可知な形状の使用も同様に成功しています.

米国赤十字社は、クロス画像を利用する最も有名な組織の 1 つです。 彼らの仕事は、支援を必要とする個人と、災害中または災害後に支援できる個人の交差点に位置しています。 赤十字のロゴは、これら 2 つの交差点に配置され、視覚的に癒しと健康をほのめかしています。

らせん

らせんは動きと進行を意味します。 丸みを帯びたらせんやループは、多くの場合、完璧、美しさ、進化を表しています。 ジグザグの動きのようにスパイラルがより尖っている場合、製品、会社、またはサービスが採用しているピボット、変更、または新しい方向性を伝える可能性が高くなります。

スパイラルの方向も、特にアニメーション化する予定がある場合は、それがどのように認識されるかに大きく関係します。 開発、成長、または創造性を伝えようとして、ユーザーを文字通りの悪循環に陥らせてしまうことは、最も避けたいことです。 ほとんどの場合と同様に、可能な場合はスパイラルを右上に動かして、ポジティブな動きを伝えます。

ユタ州ソルトレイクシティのデジタル製品スタジオである Rally は、サイト全体で白い背景にシンプルな渦巻きを使用しています。 らせんの色の変化とダイナミックな動きは、視聴者の視覚的な興味を維持し、まとまりのあるユーザー エクスペリエンスを生み出します。

有機的な形

有機的な形には、葉、枝、根、波、星、雲などが含まれます。 幾何学的形状を一緒に使用して画像を作成できる場合 (例: 三角形が上にある正方形は単純な家になります)、有機的な形状は通常、それ自体が画像として独立しています。

これらの形状は通常、不規則または非対称であり (常にではありません)、何らかの形で自然界と関連しています。 「クラウド」のアイデアは、有機的なイメージの完璧な使い方です。

「クラウド」ストレージのアイデアは、非常に高度で技術的なもの (情報を保持する無形の「場所」) を結び付け、それを自然界に結びつけることで、技術初心者にとってより親しみやすいものにします。 たとえば、SoundCloud は、ユーザーがオーディオ ファイルをアップロードして、世界中の音楽愛好家の成長するコミュニティと共有できる音楽共有サイトです。

デザインの背後にある心

いつものように、これらは厳格なルールではありません。 デザイン内で複数の形状、線の太さ、および配置を使用して、視覚的な関心を作成します。 いくつかの要素を一緒に使用することで、読者が目で見て直感で感じることができるストーリーを伝えることができます。

WP エンジン リソース センターは、デザインに関するすべての情報源であり、デザインの心理学シリーズは、デザインの基本要素を使用して、よく計画されたブランディングで顧客を引き付けることに関するものです。

第 1 部と第 2 部を読んで、色の意味と視覚的なストーリーテリングで色を使用する方法を深く掘り下げてください。 次に、書体、コンテンツの配置、単語の選択の重要性を検討するパート 4 に注目してください。