UXの優れたWebデザイン3選

こんにちは!新卒デザイナーの浅本です。

UX(ユーザー体験)を考えることは大切だと分かっているけど、実際に取り入れようと思うと難しく、結局直感的にデザインをしてしまっているなんてことはないでしょうか?この記事では、UXを考えたWebデザインをする上で私が参考にしたものや、UXの部分がとても考えられていると感じたWebサイトをご紹介します!

見た目が良いだけじゃなくて、どんなユーザー体験をさせたいのか分かりやすいサイトをインプットしたいと思っているデザイナーさんや学生さんは是非読んでみてください。

BALMUDA The Pot

https://www.balmuda.com/jp/pot/

トースターで有名なバルミューダの新製品の紹介ページです。

一般的に理想的とされるような朝を演出しているWebサイトなので、この商品を手に入れたときの自分自身の生活を想像させます。

このサイトを見てユーザーが感じること

トースターで有名になったバルミューダの新製品なので、「新製品を出したんだ!今度はケトルかー。何が凄いんだろう。」と期待を持ってサイトを見ます。

メインビジュアルには、商品を実際に生活空間に置いたイメージをスタイリッシュな写真で見せているので、「すごくオシャレだな!」と感じさせます。

小さくて美しい電気ケトルというメッセージが書かれているので、「確かに美しいし、毎日使いたいな!」と感じさせます。

この時点で欲しい!という気持ちになっているので、「もっと詳しく知りたいな」という気持ちになります。

デザインの詳細ページや淹れ方の詳細ページ、ストーリーのページを見ることで、更に魅力を知ることが出来るので、「これは凄い!」と感じさせます。

商品の魅力を十分に理解した段階で価格が見えます。ここまでで感じた魅力を考えると価格が予想より安かったので、「この価格なら予約しちゃおうかな」と感じさせます。

更に今なら購入ボタンの下にキャンペーンのお知らせがあります。さらに今ならお得なキャンペーンがあるので、「それならなおさら今予約するべきだよな」と感じさせます。

Adobe フォトグラフィプラン

https://www.adobe.com/jp/creativecloud/photography.html

PhotoshopとLigthtroomがセットになったお得なプランの紹介ページです。

普通に撮影しただけの写真と加工した写真の違いをひと目で分かりやすく対比させています。

また実際に手持ちの写真を加工体験することも出来ます。

このサイトを見てユーザーが感じること

カメラが好きでいつもこのページの広告を目にしているので、「PhotoshopとLightroomがセットで980円っていう広告、よく見るし、気になるから見てみよう」という気持ちになり、このページに。

メインビジュアルのすぐ下でPhotoshopを使う前と使った後の写真の例を見せているので、「いつも撮っている写真がこんなに変わるのか…」と感じさせます。

そしてサイト内に埋め込まれた体験版。ワンクリックで見た目が変えられるということを実際に体験できるので、「え、ワンクリックでこんなことが出来るの?」と感じさせます。

実際に自分の写真で調整を体験することも出来るので、「あ、体験も出来るやってみよう!」という気持ちに。

実際に体験してみると簡単に綺麗な写真に出来るので、「すごくいい!」と感じさせます。

このプランでどんなことができるのかを提示することで、「PhotoshopとLightroom以外にも980円でこれだけのアプリが使えるんだ!」という気持ちに。

活用例を見せることで「どの写真も全然違う作品になってる!」と感じさせます。安い値段設定で、簡単に綺麗な写真にできるので、「欲しいな…」という気持ちにさせます。

Photoshop = プロというイメージがあるので、「でも、やっぱりプロ向けなんじゃないの…?」と思われてしまいます。そこで動画を用いて、実際の操作を見せることで、「簡単じゃないか!」と感じさせます。

利用できるデバイスを記載することで、「パソコンだけじゃなくてスマホでも!すごいな!」という気持ちに。

このような体験をさせることが出来ます。どんな効果があるのか、どれだけ簡単なのかを感じることが出来る工夫をあらゆるところで感じますね!

Apple macOS Sierra

http://www.apple.com/jp/macos/sierra/

macOS Sierraの紹介ページです。既存のMacユーザーに対して、新しいバージョンを紹介するページとなっています。新しくなったmacOSで何が出来るようになったのかを動きを入れて表しています。

このサイトを見てユーザーが感じること

Macを使っていて、OSアップグレードの通知が来たので、「macOS Sierraにアップグレードしようかなー。」「何が変わったんだろう」という気持ちでこのページに。

新機能を見せることで、「そういえば、Siriが入ったらしいな。何が出来るんだろう。」と感じさせます。

予想を超える機能を見せることで、「まあ、大した機能無いんでしょ…え、便利そう…。」という気持ちに。

実際に出来ることを見せることで、「そんなことも聞けるんだ!すごいっ!」という気持ちに。

1つの機能だけではなく、多くの機能を知りたいので、「Siri以外はどうなんだろう?」という気持ちに。メインの機能以外も画像つきで分かりやすく説明することで、「すごく便利になってる!」と感じさせます。

たくさんの魅力を見せたことで、「早く試したい!」という気持ちに。

無料でこの体験ができるということを伝えることで、「無料ならアップグレードするしかないでしょ!」という気持ちに。このような体験をさせることができます。

何が変わったのか、何が出来るようになったのかを画像を用いて分かりやすく伝えているのだと感じることが出来ます。

まとめ

いかがでしたでしょうか?

いつも何気なく見ているサイトも、考えてみるとこういうユーザー体験をさせたいからこういうデザインにしたのかな?と思えることがあるはずです。

ぜひ、この機会に皆さんも「このサイトを見てユーザーにどう感じさせたいんだろう?」と考えてみましょう!

浅本 侑樹

浅本 侑樹

2012年より専門学校HAL大阪 Web開発学科でWebデザインやWebプログラミング、システム設計、ネットワーク構築などを広く学ぶ。 2016年4月に新卒でbasicに入社。デザイナーとして配属され、CIを始めとしたデザインを担当している。 趣味は写真撮影と料理。

Recommend Articles

1

バナーのデザインで悩んだ時に参考にしたい5つのパターン

簡単なようで難しいバナーをデザインすることって難しいですよね。小さいスペースに必要な要素を入れなければならないので、悩んだことがある方も多いのではないでしょうか?この記事ではバナーデザインを取り上げるだけではなく、どんなところが参考になるのかを合わせてご紹介します!バナーのアイデアで煮詰まっているデザイナーさんや、デザインの勉強のためにバナーのコピーをしようと思っている学生さんは是非読んでみてください。

2

【イベントレポート】UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」

サービスの設計をする際にペルソナを決めるのはもちろんですが、それをチームでうまく共有し活用するのは想像以上に難しいですよね。チーム内でうまく共有できず、いつの間にかペルソナが忘れられてしまっている…なんてことは少なくないのではないでしょうか。そうしたペルソナ作成の難しさを解決するヒントをさぐるため、先日、株式会社アイ・エム・ジェイ R&D室主催のイベント「UX、デザイン思考、サービスデザインのための『チームで使える共感ペルソナ™入門 』」に参加してきました!

3

簡単にオシャレで見やすくなるスライドの作り方

この記事では、デザイナーではない方や新人のデザイナーさんがプレゼンテーション(パワーポイントなど)のスライド作成で困ったときに、簡単にオシャレで見やすいスライドを作る方法をご紹介します! 法則に則って作成すれば、簡単にキレイなスライドを作ることが出来ますよ!

4

別に最初から正社員じゃなくても良い〜未経験からWebデザイナーになるまで私が行ったこと〜

今年の7月からデザイナーとして働いているのですが、実は元からデザイナーだったのではなく、アルバイトとしてベーシックに入社したという経緯があります。なぜ正社員ではなく、アルバイトからスタートして、どのような経緯でデザイナーにコンバートしたのかをここにシェアして、今後未経験の業界に転職を考えている人、特にWebデザイナーへの転職を考えている人への参考になればと思います。

5

「実績や得たノウハウを発信するところまでがシゴトの報酬」 iOSエンジニア堤修一さんの仕事論に迫る| dotFes 2016 shibuya

2016年10月からサンフランシスコでFyusion社でiOSエンジニアとして活躍されている堤修一さん。今回はdotFes 2016で行われた「デザイン×ライフスタイル 制作者として海外で働くということ」というテーマのセッションで、海外で働くためのワークスタイルを語られました。

Basic Designers’ Portfolio

ferret

ferret One

phocase

留学Debut

Designer Wanted!

  • Kunihiro Okamura
  • Hikaru Kobayashi
  • You
  • Fumiya Shibusawa
  • Yuki Asamoto

この内容で送信します。よろしいですか?