感情的なデザイン：ユーザーのためにWebを設計する方法「気持ち」。

美しいウェブサイト...しかし、なぜ人々は縛られていないのですか？デザイナーとウェブの所有者が実際に遭遇した問題

このように感じたことはありますか？あなたはお金と時間の両方を、美しいウェブサイトを作成するために捧げました。完全な機能デザインもモダンです。しかし、結果は残念でした...ユーザーの量は増加しません。再利用率は少ない。顧客がやって来て静かに行きます。挨拶するために立ち寄ってから、この問題に合格したように、この問題はあなただけではありません。しかし、多くのウェブの人々が直面しているという実話です。最も重要な次元がユーザーの「感情）が「感情）であるまで、「美学」と「使いやすさ」に取りつかれている傾向があります。

-[プロンプト]-

イラストのプロンプト：ウェブサイトA間の比較画像Aは美しく見えますが、よりシンプルなデザインのWebサイトBで活気に満ちていますが、ユーザーを笑顔にする要素（かわいいマスコットやフレンドリーな挨拶メッセージなど）がエンゲージメントA、安定した、Bウェブサイトを示しています。

-[/プロンプト]-

なぜ私たちのウェブサイトは「心のない」のですか？見落とされている根を刺す

この問題は、Webデザインを単に「論理的で推論」と見なす傾向があるために発生します。最短のユーザーフローを作成し、ボタンを配置して最も簡単に見つけることができ、最もコントラストの色を使用します。しかし、すべてが唯一の論理応答（論理）であり、人間が「感情」でほとんどの記憶を決定し、作成したことを忘れていました。ドン・ノーマンの原則によれば、ユーザーエクスペリエンスの先駆者は、有名な感情デザインの、人間の知覚には3つのレベルがあることを説明しました：内臓（本能）、行動（行動）、反省）。行動は「使いやすい」ですが、試験は「一目ぼれに美しい」と思われなければならない内臓レベルに失敗し、機能に焦点を合わせているが感情的なつながりを欠いているユーザーにとって、「良い記憶と意味を生み出す」反射レベルに失敗します。強い家を建てるようなものですが、「家」という言葉の感覚を与えないので、誰も滞在したくありません。ユーザーの感情の無知は、私たちのウェブサイトが「ツール」のみを「ツール」にしているが、ユーザーが考えている「友人」にしない問題の根本です

-[プロンプト]-

イラストのプロンプト：単純なインフォグラフィック画像人間の脳は2つの部分に分割されます：「論理」（ギアの字型アイコン、グラフ」と「感情」（心の字型のアイコン、星、笑顔、顔）は、ほとんどのデザインがロジックに焦点を当てていますが、感情を指す矢印は空です。

-[/プロンプト]-

ウェブサイトをさらに「乾燥させる」ようにしましょう...予想以上に痛みを伴う結果

私たちのウェブサイトを単なる美しいが露出した領域にし続けると、結果は単なる「販売は強打ではない」よりも深刻でしたが、それは長期的な腐食ブランドです。想像する：

• ブランドロイヤルティはゼロです。感情的な絆がない場合、顧客はブランドに忠実である理由がありません。彼は、少し良い提案があるとすぐに競合他社に変更する準備ができています。
• それ以上（口コミ）：人々は、彼らが「すごい」、「印象的」、または「楽しい」と感じるものを共有または伝えます。 「使用できる」ウェブサイトは、まったく記憶も言及も言及されません。
• 競合他社の海で姿を消す：誰もが美しいウェブサイトを作成できる年齢では、「感情」は真の違いを生むものです。あなたのウェブサイトが感情的でない場合、それは他のウェブサイトと変わりません。市場で数百万
• コミュニティを作成する機会の喪失：共通の感覚は、コミュニティ構築の基盤です。ハートレスウェブサイトは、ブランドをサポートおよび保護する準備ができているファン層を構築することができません。

感情的なデザインを無視することは、漏れに水を加えようとするようなものです。多くのマーケティング予算を手に入れるために人々を引き付けることができるかもしれません。しかし、最終的には、あなたのウェブサイトの「彼らの感情」が彼らの善を維持できないので、彼らは完全に流れ出るでしょう

-[プロンプト]-

イラストのプロンプト：比較画像の前/後。最初の側は、多くの穴がある水槽です。水はほぼ完全に流れました。 （それは亡くなった顧客のようなものです）。アフターサイドは、心臓の形のアイコンで漏れている水タンクです。フルタンクがあります（まだブランドを持っている顧客のように）

-[/プロンプト]-

あなたのウェブサイトのためにあなたの心を起こしてください！感情的なデザインの3つのレベルから始まります

良いニュースは...私たちのウェブサイトが活気づくために私たちの心を覚ますことができるということです！そして、最良の出発点は、インタラクションデザインファンデーションでドンノーマンの感情デザインの3つのレベルを理解し、適用することです。各レベルが何であり、どこから始めることができるか見てみましょう。

• レベル1：内臓デザイン（本能に影響を与えるデザイン）：これは「最初の愛」です。 1秒で発生したのは第一印象です。ユーザーは、考えさえせずに「好き」または「好きではない」とすぐに判断します。それは「ルックアンドフィール」の物語です。
  ここから始めて、イラストの品質、ブランドの感情、美しいタイポグラフィ、読みやすい、清潔で魅力的なレイアウトを伝える色の使用に焦点を合わせます。
• レベル2：行動設計（行動に対応するデザイン）：ユーザーがあなたのウェブサイトを「使用」し始めると、感情は「容易さ」と「効率」に変わります、あなたのウェブサイトは彼の生活を楽にしますか？賢く、賢く感じ、あなたが望むように何かを成し遂げることができますか？
  ここから始めてください：素敵なマイクロ融合を使用するなど、明確な応答（フィードバック）を得ることができます
• レベル3：反射設計（反射を作成するデザイン）：これは最高で最も強力です。それは感覚です。 「後」あなたのウェブサイトからどのユーザーが使用されましたか？彼は自分自身について気分が良くなりますか？それは彼が持っているアイデンティティまたは価値にリンクしていますか？ 「ストーリー」と「意味」の作成です。
  ここから始めてください：フォローする価値のあるブランドを作成し、UXライティング、ブランドの感覚を作成し、製品やサービス以上の「価値」を与える。

完璧なデザインは、3つのレベルすべてを結合することです。 「満足のいくものだけでなく、記憶に残る」体験を作成するには、このセクションに戦略を立てるのを支援する専門家が必要な場合は、 UX/UIデザインサービスがアドバイス

-[プロンプト]-

イラストのプロンプト：ピラミッドピラミッドの3層、最下階は「内臓」（目の字型アイコン）、中間層は「行動」（手図のアイコン、使用）であり、上部の階は「反射」（脳の形のアイコン、意味/ストーリー）です。

-[/プロンプト]-

MailChimpからの実際のケース：「モンキー」が世界クラスの絆を作成するとき

感情的なデザインを使用する会社の例について話すと、「MailChimp」の伝説になります。それは最初でなければなりません。 MailChimpは、「退屈」で「完全なテクニック」である電子メールマーケティングのプラットフォームですが、「楽しく」「フレンドリー」にすることができます。

開始問題：メールキャンペーンはストレスが多く、マーケティング担当者にとっては心配です。もう一度確認して確認する必要があります。間違いを送ることを恐れて、結果がうまくいくことを願っています

感情的なデザインで修正する方法： MailChimpはこの気持ちをよく理解しています。そして、彼らはストレスを幸福に変えるために、あらゆるレベルで経験を設計しました：

• 内臓：彼らは、キュートで遊び心のあるキャラクター、ユニークなスタイル、フレンドリーな言語を持つ「フレディ」と呼ばれるマスコットモンキーを使用しています。気分が良くなります
• 行動：彼らのプラットフォームは非常に使いやすいと言われています。手順は明確であり、複雑ではありません。ユーザーに「できる」と「制御」することをユーザーに感じさせます
• 反射：最もピークは、すでに電子メールキャンペーンを送信している「後」です。退屈なスクリーンを見つける代わりに、MailChimpは、この小さなものが大きな感情的な影響を生み出すように促すメッセージで、あなたと「ハイファイブ」であるフレディモンキーのアニメーションを示します。最もストレスの多い瞬間を「お祝い」と「良い感情」の時代に変えます。多くのユーザーは、この画面の写真を撮って、ソーシャルメディアで良い感情を共有しています。

結果：感情的なデザインへの投資により、MailChimpは「ツール」だけでなく、世界的なマーケティング担当者の「パートナーの友人」になります。数十億ドルに成長するまで、これはユーザーの「心」を本当に理解しているデザインの力です。

-[プロンプト]-

イラストのプロンプト：Freddie Mascoting Freddieを備えたMailChimpスクリーンモデルは、一部のユーザーが作業した後、楽しい演技（ハイファイブなど）です。顧客の満足度を示すグラフで（顧客満足度）

-[/プロンプト]-

チェックリストはすぐに使用できます！あなたのウェブサイトを目覚めさせて、3つのステップに住んでください。

あなたのウェブサイトに感情的なデザインを適用しようとしたいのですが、開始方法がわかりませんか？心配しないで！この簡単なチェックリストを使用してみてください。 3つのレベルに分けることができるので、すぐに行うことができます。

ステップ1：「内臓レベル」を変更する

• []高品質の画像：ウェブサイト上のすべての画像は明確で美しく、ブランドの感情を伝えますか？
• []パレット、適切な色：ウェブで使用される色はブランドの個性と一致しており、望ましい感情（青=信頼性、黄色=楽しい）を作成しますか？
• []読みやすく、キャラクターを持っているフォント：文字はよく見え、快適に読み、ムードとトーン全体に合わせますか？
• []適切な空白： 「呼吸」のためのスペースはありますか？それともすべてがとても不快ですか？

ステップ2：「行動レベル」のエクスペリエンスを作成する

• []素敵なマイクロインターネーション：私たちを使用する少しの反応はありますか？ （マウスをポイントするときの色の変更ボタン、移動できるアイコンなど）。優れたマイクロ脱作は、より多くのアイデアを得るのに役立ちます。
• []アイデアの削減：ユーザーの負担を軽減するために認知バイアスを考慮して設計されていますか
• []ナビゲーションメッセージをクリアする：ユーザーは常に次に何をすべきかを知っていますか？さまざまなボタンとメニューが理解しやすいかどうか？
• []タイムリーにフィードバック：ユーザーが成功したとき（フォームに記入するなど）、明確でフレンドリーな確認メッセージはありますか？

ステップ3：関係「反射レベル」

• []ブランド（私たちについて）：ページ「私たちについて」は魅力的で刺激的な物語を伝えることができますか？
• []理解しているUX執筆：ユーザーを「人間として」使用し、同情的な量を示している言語？特に、救助されるべきエラーメッセージページで、悪化していないページでは、記事からもっと勉強してみてください。良いエラーメッセージを書く
• []特別な感覚を作成する：特別な特権を与え、お客様に「重要な人々」を感じるようにするために、通常の顧客に具体的なコンテンツを与えますか？
• []より高い価値とリンク：あなたのブランドは何のために立っていますか？ （持続可能性、社会を支援するなど）そして、あなたはそのユーザーを伝えますか？

これらのチェックリストを1つずつ開始するだけです。あなたのウェブサイトは「心」を持ち始め、ユーザーとのより良い絆を生み出します。

-[プロンプト]-

イラストのプロンプト：美しく、使いやすいように見える大規模なチェックリスト画像。内臓、行動、反射性の3つの主要なトピックがあり、各アイテムに組み立てられたかわいいアイコンがあります

-[/プロンプト]-

人々が感情的なデザインについて疑問に思う傾向がある質問。

私たちは、多くの人々がここで明確な答えと理解しやすい感情的なデザインについて疑問に思った質問をまとめました。

Q：感情的なデザインは、すべてのビジネスに適していますか？または、ライフスタイル製品のブランドにのみ適していますか？
回答：すべてのビジネスに適しています！ B2Bソフトウェア、金融サービス、または消費財を販売している場合でも、ユーザーは感情を持つ「人間」です。信頼性、安全性、ケアの感情などの前向きな感情を生み出すことはすべて、すべてのビジネスにとって重要です。感情を理解するデザインは、常に競争の違いと利点をもたらすのに役立ちます。

質問：予算が限られている場合、最初に感情的なデザインへの投資を開始する必要がありますか？
回答：小さなものから始めます。
1。uxの作成：など、「低いヒンジングフルーツ」としても知られる多くの影響を与える可能性があります。このパートでは、コストが最小になりますが、結果が表示されます。
2。マイクロインターバーティオン：ボタンを押したり、Webページをロードしたりするときに、少しアニメーションを追加します。使用をより活気に満ちたものにするために。
3。写真：最初のページで使用されるメイン画像（ヒーローイメージ）の選択または取得。それはユーザーがすぐに見て印象づける最初のものだから

質問：感情的なデザインの成功をどのように測定できますか？
回答：「感情」でさえ測定するのが難しいです。
時間（Webページで使用する場合）などのユーザーの変更を測定できますユーザーがWebより長くなると感じている場合
-の
開口部数）：、
コンバージョン率（集中率）をすることを奨励します
。誰かがあなたのウェブサイトで良い経験について話しているのですか？ -顧客満足度調査（満足度の調査）：調査で使用する「感情」に関する質問を追加します。

-[プロンプト]-

イラストのプロンプト：予算、測定、ビジネスタイプなどのさまざまな質問を伝える小さなアイコンに囲まれた大きな疑問符のアイコン（？）

-[/プロンプト]-

結論として：「ウェブサイト」の作成を停止し、「感情」を作成する時が来ました。

この時点で、この時代に成功したウェブサイトのデザインが「美しさ」や「容易さ」に焦点を合わせることができないのと同じ絵を見ると、ユーザーの心に起こるために「良い感情」に焦点を合わせる必要があると思います。私たちは、内臓（本能）、行動（行動）から反射（反射）までの3つのレベルのドンノーマンを学びました。

感情的なデザインを備えた投資は、見栄えの良いウェブデコレーションではありません。しかし、長期的には「関係」を作成することは投資であり、「訪問者」から「ファン」への変更であり、ユーザーが考えて信頼する「友人」になるために「ブランド」から変化します。あなたのウェブサイトを単なるコードと活気のあるピクセルにしないでください。

あなたのウェブサイトのためにあなたの心を起こす時が来ました！少しずつ使用するために与えるチェックリストを使用してみてください。私はあなたが間違いなく変化を見始めることを保証します。今日から始めて、ユーザーが「使用する」だけでなく「愛する」ウェブサイトを作成します！美しく、ユーザーの中心を理解することの両方を作成するためにプロのチームが必要な場合は、 Vision X Brain UX/UI Design Teamを無料で相談してください！私たちはパートナーになり、あなたのビジネスに印象的な結果を生み出す準備ができています。

-[プロンプト]-

イラストのプロンプト：デザイナーの手を示す強力なグラフィックス、Webサイト（Wireframe）のスケッチを活気のないラインで変更して、カラフルなWebサイトとハートの形のアイコンが浮かぶ。通常のウェブサイトを活気のあるウェブサイトに伝えます

-[/プロンプト]-

‍