ウェブサイトのユーザーエクスペリエンス: インタラクションについて知っておくべき視覚的な事柄

プロダクトマネージャーやインタラクションデザイナーが、ビジュアルデザインのドラフトが当初の計画とあまりにも違うと不満を言うのを時々耳にしますし、私自身も同じような状況に遭遇したことがあります。その理由は主にコミュニケーションの問題によるものです。

効果的なコミュニケーションには、情報の均一性が重要です。この同等性には、ビジュアル デザイナーができるだけ早く製品要件を理解し、他の担当者と同等の情報を取得できるようにすることが含まれます。また、コミュニケーションにおける両者の知識分野の同等性も含まれます。各当事者が相手の分野の内容についてより多くを知って初めて、より良いコミュニケーションが可能になります。

インタラクション デザイナーにとって、ビジュアル デザインは最も共同作業が必要な部分です。インタラクティブなプロトタイプは、最終的には視覚的な形でユーザーに提示する必要があるためです。したがって、ある程度のビジュアルデザインを知っておくと、ユーザーにインタラクションソリューションを伝えやすくなります。同時に、インタラクティブ デザインは複数の分野にまたがる仕事であるため、視覚的な側面を理解することで能力が向上します。諸葛亮はかつてこう言った。「すべてのことについて少しずつ知っていれば、人生はもっと彩り豊かになる。」

早速本題に入り、視覚的な原則を一つずつ紹介したいと思います。理解を深めるために、Weibo の例を使用します。

フォントで製品のスタイルを表現する

ビジュアル デザインでは、フォントの選択が製品のスタイルを表現する上で重要な役割を果たします。同じテキストでも、異なるフォントで書かれると印象が大きく変わります。

Weiboで最もよく使われる投稿ボックスには、「伝えたい最新情報」という文字にDynaFontフォントが使用されており、いつでもどこでも投稿できるWeiboのリラックスした雰囲気を反映しています。フォントを「Huawen Xin Wei」または「Microsoft Yahei」に変更すると、People's Daily Online のような感じになったり、まったくスタイルがなくなったりして、エクスペリエンスがさらに悪くなります。

メダル博物館のホームページの感傷的な文章は、日記の形式で手書きフォント（FZJingLeiS-R-GB）で書かれており、メダルが人生と成長を記録するという製品感を表現しています。一般的なフォントに変更すると、その感性が失われます。

カラーマッチングで製品の位置づけを示す

カラーマッチングを使用して製品の位置付けを表示することも、デザイナーにとって必要な方法です。ビジュアルデザインの初期調査段階では、ターゲットユーザーに適した色を抽出し、完全なカラースキームのセットを形成するために、ムードボードがよく使用されます。

紫、キーワード：優雅さ、高貴さ、女性らしさ、荘厳さ、神聖さ、成熟、深み、神秘性、ファッション。 Weiyi Musicは音楽デビュープラットフォームとして位置付けられており、紫色がファッション的な魅力を際立たせています。

赤、キーワード：芸術、熱意、開放性、**、積極性、活力、喜び、人生、成熟。マイクロ生放送は生放送の盛大な行事を反映する必要があり、情熱に満ちた赤色が非常に適しています。

青、キーワード：理性、知性、公平さ、ビジネス、テクノロジー、厳格さ、細心さ、厳格さ、形式化。投票の公平性とマイクロデータの合理性と厳密さにより、製品は青で占められるべきであると決定されます。

オレンジ、キーワード：太陽の光、輝き、活動、暖かさ、思い出、家族、健康、幸福。マイクロアクティビティへの参加感とチャートの鮮やかさは、もちろんオレンジ色の色合いと切り離せないものです。

緑、キーワード：成長、シンプルさ、公共の福祉、生活、安全、新鮮さ、平和、春、自然。 Weibo Expertsは草の根ユーザー向けの製品です。Weiboでの行動を通じて、彼らは徐々に特定の分野の草の根スターになります。緑の配色は、この成長感に非常によく合っています。緑は間違いなく最も適した色なので、マイクロチャリティーについてはあまり語りません。

統一されたブランドイメージを作成する

ブランドイメージは非常に広い分野です。Weiboの特定の商品のブランド感に関しては、主に視覚的なイメージを通じて伝えられます。そのためには、ビジュアル デザイナーが、ユーザーが一目で明確に認識できるような体系的なビジュアル システムを開発する必要があります。

WeChatグループのブランドイメージは広く認知されており、プロジェクトを計画する際には、人とグループ、人と人の関係性、そしてグループの帰属意識を表現したいと考えています。ビジュアルデザイナーは、惑星、宇宙船、人々といった視覚的要素を使って、「各グループは惑星であり、全員が共通の趣味を持っている」というストーリーを伝えました。ウェブサイト全体はダークブルーで統一されており、星空のような雰囲気を醸し出しています。ユーザーはこの配色と要素を見ると、WeChat グループページに到着したことがわかります。

このシステムは内部テスト中に起動されました。宇宙船に乗っていた人々は自分たちに適した惑星を見つけ、着陸しようとしていました。

この要素は新しいユーザー ガイドにも巧みに統合されており、イメージが向上するだけでなく、ブランド センスも強化されます。

グループのレベルは、惑星上の木々によって表されます。レベルが高いほど、木々は茂ります。

ヘルプページ、個人ページ、リリースページなど。一つ一つ紹介することはしませんが、要するに、自分で観察すれば、WeChatグループはいたるところにあることがわかります。

形状により製品のインパクトが増す

視覚的なデザインでは、誇張された形状はユーザーに大きな影響を与え、ユーザーをすぐに魅了することができます。このタイプのデザインは、特別なページやパーソナライズされたスキンによく見られます。

特別テーマ「Weiboで旅する」では、デザイナーはヘッダーデザインに斜めの線を使用し、一部のボタンも傾けて、その下のすっきりとしたモジュールとのコントラストを生み出しています。インタラクティブなデザインのプロトタイプのレイアウトは、水平と垂直であることが多いです。視覚的な表現においてこのルールを破ると、大きな効果が得られることがあります。

「微博に愛がある」という特集も良い例です。握手とタイトルが逆三角形を形成し、「バレンタインデーのメダルをゲット」が三角形の先端に配置され、テーマと最も重要な操作がすぐにユーザーの目に押し出されます。

「マイクロアイデンティティバッジ」や「2012年がやってくる」のトピックでは、画面から飛び出してくるような模型や船も、ページのインパクトを示す良い例です。

重要なコンテンツをホーム画面に表示しておく

これは、ビジュアル デザイナーとインタラクション デザイナーの両方が注意を払うべきことです。プロトタイプでは最初の画面に配置されていても、ビジュアル デザイン中に何らかの理由 (モジュールの追加やヘッダー画像の上方移動など) で下部に押し込まれることがあります。ビジュアル レビューとテスト中は、誰もがこれに特に注意を払う必要があります。

下の写真を見てください。大画面は悪い例です。最初の画面に広告があります。しかし、Weibo Desktop ははるかに優れています。