digihows

でじはうす : プラスアルファな情報を熱量込めてお届けします(旧・なつみ憂のブログ)

ユーザーの心に響くWebデザイン 5つのテクニックとそれぞれの実例

f:id:thablue19:20141102130919j:plain

参照:Leo Chuối

ユーザー目線のデザインてどんなものだろう、と考えていた所、海外のWebデザイン研究サイト"onextrapixel.com"から面白い記事を見つけましたので、以下に翻訳してご紹介します。

(参照:Why Designers Should Design to Incite Emotions

ユーザーの心に響くウェブデザインとは

ユーザーをひきつけるウェブサイト

感情を動かす・心に響くデザインの実現は、Webサイトの訪問者に格別なユーザーエクスペリエンスをもたらす最もパワフルな方法です。数年前までは、Webデザイナー達が気を払うべきは幾分か基礎的な事で済みました。例えばデザインをスタンダードなWebサイトに寄せて行くとか、明快なナビゲーションを付けるとか、適切なレイアウトやフォントを選択するといったことです。

広がるWebデザイナーの役割

しかし、現在ではWebデザイナーはユーザーのニーズに応える以上の何かをもたらす事ができます。Webデザイナーは、サイトに訪問してくれた人の心を動かすようなもの目指すようになっています。

インターネット上で行われるビジネスで重要なのは、とにかく無数にあるサイトの中から頭一つ飛び抜けて、潜在的な顧客に見つけてもらうことです。しかしこの為には、サイトの運営社はいくらかの価値と信頼をユーザーに提示し、感情的なつながりを感じさなければいけません。

ユーザー目線でサイトをつくる

消費者の立場になるならば、私たちはWebで良いユーザー体験をする事が出来ると、心地よいと感じます。NikeやAppleに対して私たちが感じるようなそういった良い感情というものこそが、お金を払って彼らの製品を手に入れたいという行動に向かわせます。反対にWebサイトが何らかの失敗を犯し、消費者の信頼を獲得出来なければ、売り上げを獲得することは出来ません。

心に響くデザインはSEO、つまりGoogleのクローラーや検索アルゴリズム等ではなく、ただ人間に対して作られるものだという事を理解しましょう。しかし、感情に訴えるデザインがブランディングに繋がるというのは、具体的にどういうことなのでしょうか。

製品ではなく感情を売る

広告代理店は、製品を売り顧客との信頼を築く為に、感情を売ってきたと言えます。優れた販売戦略というのは得てして、実際の製品そのものというよりも気持ちや感情を売ってきたといえます。例えば、AppleのCMや広告を見た事がある人であれば、iPhoneやiPadそのものというよりも、それによってもたらされる感情について伝えていたという事が分かるはずです。

では実際にどのようなWebサイトがユーザーの心をつかむのか、具体的なサイトとともにそれぞれのテクニックをご紹介します。

1. 個性・パーソナリティを示すイラストを加える

ユーザーエクスペリエンスは、人間的な個性とは無関係だと思う人もいるかもしれませんが、それは大きな間違いです。個性・パーソナリティはどんなマーケティングツールよりも、私たちの感情を表現するのに役立ちます。

個性やパーソナリティを示す事で、あなた自身の誠意や真剣さ、そしてあなたが売ろうとしているものも見せる事ができます。このようにパーソナリティはユーザーとブランドとの距離を縮めてくれる可能性を持っています。

例)MailChimps

f:id:thablue19:20140724204655j:plain

お猿さんのイラストが、サービスの迅速さを表現しています。このデザインがウケてMailChimpsは人気サービスとなり、おおくのユーザーに知られるところとなりました。 

2. ミニマル、そしてスタイリッシュに

多くのWebデザイナーはデザインの世界的なトレンドをおさえていることでしょう。現在よいデザインとされているのは、とにかく不要な要素を削ぎ落したミニマルなデザインです。ミニマルであるだけでは、シンプルさしか表現出来ませんが、スタイリッシュなデザインはユーザーの心をひきつけます。

伝えたい要素を慎重に選び抜いて考えられたデザインは、ユーザーが見たいものへ的確に辿り着くのを助けます。しかし、それは企業やWebサイト側がユーザーに見てもらいたいものとは違います。

3. パララックススクロールを取り入れる

パララックススクロール演出は、Webサイトの訪問者の興味をグッと惹き付けられるため、近年使用される機会が増えています。

例)Nizo

f:id:thablue19:20140724204803j:plain

有名なNizoのサイトでは、美しいシングルページレイアウトの中にユーザーの興味を惹くイカしたスクロール演出が施されています。

CSS3やJavaScriptによるパララックス技術は、アニメーションとして楽しいというだけでなく、予想外な3D体験をユーザーにもたらしてくれるという点に人気が集まっています。これは、潜在顧客とサイトのつながりをより深めてくれることにつながります。

4. ユーザーインターフェースにインタラクションな要素を取り入れる

人が退屈な時に興味を持つもの、それは「楽しい事」「無料」です。企業サイトのユーザーインターフェースにも是非これを取り入れるべきです。サイトに工夫を施して、ユーザーが遊べる仕掛けをするのです。例えば、ロールオーバーのアニメーション、インタラクティブなカルーセルがこういった仕掛けです。

例)Rog.ie

f:id:thablue19:20140724204617j:plain

Rog.ieでは、ナビゲーション部分にユーザーが遊べる仕掛けがなされています。ナビゲーション部分にマウス(カーソル)を持って行くと、ロゴやアイコンが浮かび上がる可愛らしい演出がなされます。小さなことですが、こうした事が記憶に残るユーザー体験になって行きます。

5. 高解像度の画像を使う

感情を動かす要素を持ったウェブサイトは、ユーザーが個人的なつながりを感じるような力を持ちます。多くの人はフェイス・トゥ・フェイスのコミューケーションを好みます。これは話している相手の気持ちや人間性がより伝わるからでしょう。画像を使うのであれば、できるだけ高解像度のものを使うとユーザーからの反応が増えて行くはずです。

例)Andrea Mann

f:id:thablue19:20140724204708j:plain

ライターでありジャズボーカリストでもあるAndrea Mannの公式サイトでは、フロントページに美しい本人の画像が使われています。こういった事が、サイト訪問者とサイトのつながりを強めてくれるのです。

 

 

小さな事にこだわる

翻訳は以上です。僕の感想としては、やはり細かい所にとことんこだわって行く事で、ユーザーはサイトに対する信頼を感じてくれるようになるのだということです。例えば、ナビゲーション部分のホバー効果は、実装作業の煩雑さと比較すると結果となる演出は小さく感じられます。しかしこういった小さな演出や工夫の積み重ねこそが、ユーザーの心に残るサイトの構築という事です。

目の前の効率や、サイト作成者目線だけでサイトを作っていてもユーザーのためになるサイトをデザインする事はできません。僕自身もユーザーインターフェース、ユーザーエクスペリエンスに関する知識をもっとつけて、今後の自分の仕事に活かしていきたいと思います。