＜無料＞資料ダウンロード
【失敗しない】Webサイト制作ガイド(事例付)
年間数百サイトを手掛けるWebディレクターが徹底解説！
おはようございます。
Neutral Worksの津久井です。
最近、何かにつけて登場する「UX」という言葉。
「自分はデザイナーじゃないしなあ。」などと思って、今までなんとなくの理解でゴマかしてきました。
しかし、最近あまりの頻度でUXに関するブログを目にするため、そろそろちゃんと知らないとマズイと思うようになってきた今日この頃でした。
そんなときに、「WebDesignerDepot」さんという海外ブログに良い記事を見つけました。ということで、許可をいただいて僭越ながら私が抄訳させていただきました。
この記事はWebデザイナー向けに書かれているため、読者がWebデザイナーである前提で書かれています。Webを仕事にしていらっしゃらない方には、多少分かりにく言い回しや例が出てくるかもしれませんが、どのような職についている人に対してもUXに関する理解を深めてくれるものだと思います。
少しばかり長いですが、各見出しと下線部を流し読みするだけでも十分かと思います！ぜひご一読ください。
ーーーーーーーーーーーーーーーーーーーー
目次
序文
“User Expericence”という言葉は、非常に幅広い意味で使われています。会議でもよく口にされては、”User Interface”と同義であるかのように使われています。ですが、実際はこのふたつの言葉の意味は違います。
「UX」と「Webデザイン」というふたつ仕事の役割が徐々に重なってくるにつれて、おそらく私たちの仕事もこの混乱の影響を受けるでしょう。あなたのクライアントさえも、あなたの仕事が何なのかが正確には分からなくなっているかもしれません。
あなたがそれを望むか否かは分かりませんが、UXはWebデザイナーの仕事に非常に大きな影響を与えています。世界一良いデザインをしたとしても、それが「使えるもの」でなければ成功はしません。そして「使えるもの」にするためには、UX戦略を全く無視する訳にはいかないからです。
これからお伝えするUXに関する知識は、プロジェクトのユーザビリティをどのように向上させるかを示し、あなたをクライアントにとって必要不可欠な存在にしてくれることでしょう。
1. UXはUIではない
あなたが「UX」と「UI」という言葉を使わなかったとしても、いずれクライアントからその言葉を聞かされることになるでしょう。そうなれば、何があなたの仕事で、何があなたの仕事ではないかをクライアントに分かってもらうために、あなたはそのふたつの言葉の違いを説明をしなくてはいけません。
“User Interface”は、クライアントが触れる実際のシステムのことを指します。例えば、iPhoneの設定画面のレイアウトはひとつのUIです。
それに対して“User Experience”は、そのUIに触れることで呼び起こされるユーザーの感情に関することです。例えば、簡単に操作できる設定画面でユーザーが満たされた気持ちになれば、それはUXです。
つまり、UXはUIによって引き起こされる感情の結果ということになります。優れたUXデザイナーは、人の感情とユーザーの行動パターンについてよく知っています。なぜなら、それらがユーザーがインターフェースにどう反応するかに大きく影響するからです。
2. UXはWebだけのものではない
WebデザインはUXのごく一部分でしかありません。全ての紙媒体、プロダクト、そして場所でさえもUXがあります。
美味しくないレストランはあまり良くないUXを、簡単に開けられる包装は良いUXを提供していると言えます。
オフラインのUXデザインは、WebのUXとは一見無関係に見えるかもしれません。実際、優れているWebサイトのナビゲーションを作成することと、実際の道で運転するスポーツカーをつくることは同じではありません。しかし、現実ではこの２種類のUXは相互に影響し合っています。
Webサイトのナビゲーションは、Webと現実の世界が重なる良い例と言えます。ナビは、かつてはページの左側に置いてありました。しかし、ある時から「人々は本質的に左から順に優先順位を高くつけており、重要なコンテンツは左側にあるべきだ」という考えが出てきました。そして、2000年代の始めまでに多くのサイトでナビは右側に配置されるようになりました。
もしあなたがWebデザイナーであれば、Web以外のUXについて考えることは決してマイナスにはなりません。このクロストレーニングがあなたの知識を広げ、Webのプロジェクトを新たな視点で見るきっかけになるでしょう。
UI/UXとは？意味と違いをわかりやすく解説
この記事では、UI/UXのデザインに焦点をあてて解説します。近年競合サイトとの差別化を図るために、「UI」および「UX」が重要視されています。その理由やデザインする際のポイントなど、初めての方でも「UI」と「UX」について理解できるように紹介します。
3. UXは芸術と科学の融合
芸術と科学は一見奇妙な組み合わせに思えるかもしれませんが、UXはまさにその融合です。UXがどのように芸術と科学を融合させているかを知ることは、課題解決に向けたあなたのデザインプロセスに大きく貢献するでしょう。
問題解決に向けてデザイナーが具体的なシナリオを組んでいくという点で、UXは科学的であると言えます。例えば、時代遅れのWebサイトがあったとして、それが売上に打撃を与えているとします。デザイナーはそのサイトを改善する方法を提案し、それが実際に実施されていくことで、その提案は解決策となります。
その解決策の段階になって、芸術が大事になってきます。色やフォント、レイアウト、そしてそれらすべてを統合して美しいものを創り出します。画廊で芸術品を見ているのと同様に、デザインは感情的な反応を呼び起こし、それが外面的な行動をも生み出します。
4. UXは目的思考のデザインを生み出す
全てのデザイナーがおそらく自分のやり方を貫こうとするクライアントに出会ったことがあるでしょう。これはかなり難しい問題で、クライアントのやり方が問題を解決するための最適な答えであるとは限りません。これと同じように、自分のアイディアよりも良い解決策があったとしても、他人には耳を貸さないデザイナーもいます。
UXは、このようにある考えに固執するのではなく、最も効率的な解決策を導くために目的思考をベースにしています。例えば、ユーザーが「体験者の声」リンクをページのトップに持ってきたいと言ったとします。その方が「より多くのトラフィックを得られるから」という主張です。
しかし問題の原因は、必ずしもそのリンクの場所であるとは限りません。今までと同じ場所でより視覚的に見やすくすることで「トラフィックを増やす」という目的を達成できるかもしれません。
どちらの解決策でも問題は解決できると思います。
目的思考とは、これらの選択肢に対してオープンでいることです。
5. UXはブランドそのものを表す
時として、あなたは自分がデザインのトランス状態に入っていると気付く時があるかもしれません。色がスパッと決まり、文字はピシッと噛み合い、画像は想像力に溢れている。そして、そのどれもがクライアントのブランドアイデンティティには全く合わないモノになっていたことに後から気付きます。
クライアントの要望に合わないモノを作ることに熱中しすぎない様に気をつけなくてはいけません。笑ってしまうかもしれませんが、そういうことは実際（そして多々）起こっています。
良いUXはブランドのアイデンティティを反映させているものです。だからこそ、あなたはクライアントが目指しているモノに対して常に向き合っている必要があります。あなたが担当するブランドについて、事前にちゃんと質問しましょう。そして、あなたがブランドの望む方向にきちんと沿っているか、それともズレてきているのかをハッキリ伝えてもらうように、しっかりとスケジュールを立てましょう。
6. ユーザーのためのUX
「ユーザーのためのUX」というとバカバカしく聞こえてしまうかもしれません。なぜなら、UXとはそもそもがユーザーのためのモノだからです。
しかし、多くのWebデザイナーが自身のクリエイティビティの犠牲になっています。彼らがつくるデザインは、クライアントのニーズも満たし、あらゆるものを兼ね揃えています。でも、それでもユーザーのニーズには合っていないことがあります。
ユーザーのためのデザインをすることは、クリエイティブな人にとってかなり困難な場合があります。なぜなら、あなたがせっかく考えた意見や、やっと閃いた素晴らしいアイディアを噛み殺さなくてはいけない時があるからです。あなたが「これが間違いなく最高のモノだ！」と思ったとしても、もしかするとその状況には合っていないかもしれません。
しっかりと目的に沿っているかを確認するために”user-driven design”について少し知っておくと良いでしょう。大まかな流れとしては、まずは複数のタイプのユーザーを調査するところから始めます。そして、彼らがあなたの取り組んでいるサイトの上でどのような動きをしているかをマッピングする。最後に、デザインが完了したらリリースする前にABテストを実施し、最適解を導いたか確認しましょう。
7. 行動を引き起こすトリガーを明確にする
優れたUXは、心理学を非常に重要視しています。UXデザインの素晴らしいところは、ユーザーの傾向についてただ知っているのではなく、そこからコンバージョンへと繋がる新たな行動を引き起こすという点だと思います。しかしそこには、良いやり方とあまり良くはないやり方があると考えています。
例えば、お知らせ機能を例に挙げてみましょう。
お知らせ機能はユーザーに行動させるためのものですが、しばしばユーザーにとって「行動すること」が時間と努力を要するものであるという事実は忘れられてしまうようです。最適とは言えないタイミングで求めていない「お知らせ」を通してユーザーを攻め立て、何で反応がないんだろうかと自分勝手に考えてしまうデザイナーもいます。
コツは、ユーザーのモチベーションが1日を通してどのように変化するかを調査することです。そうすることで、適切なタイミングで「お知らせ」することが出来るでしょう。
例えば、仕事に向かっている人に対してお知らせを送ることはあまり良いとは言えません。彼らは「仕事に到着する」というゴールに対して、必死で急を要しているからです。同じお知らせだとしても、家に帰る途中であればもっと注目してもらえます。帰宅時は、行きと比べて何かをする余裕があるからです。
あなたのゴールは、ユーザーの1日をより快適にする何らかの方法で彼らを導くことです。ユーザーの欲求と習慣を意識すればするほど、あなたのデザインは良くなっていくでしょう。
8. スクロールを促す
スクロールすることで、ユーザーはサイトのより深いところへ進んでいき、より多くの時間を費やしやすくなります。そして、多くの時間を費やせば費やすほどコンバージョンに繋がりやすくなります。だから、アクションへつながるボタンをページの一番下に設置し、ユーザーがそこまでスクロールしなくてはいけないようにするのです。
ファーストビューを大事にするようなサイトでも、スクロールを促すことができます。下向きの矢印や、続きを読むためにスクロールしなくてはいけないように部分的に隠されているテキストなどの「スクロールできることを知らせる合図(英：scroll cues)」があることで、ユーザーはより多くの時間をサイトで過ごすようになります。
9. 「ユーザーはどんな経験をしたか？」
問題に取り組む前に、まず正確にその問題について把握しなくてはいけません。そのためには、まず現状のサイトにおけるユーザーの行動を分析しましょう。
そして、今どのようにそのサイトとユーザーが関わっているのかを分析するために、自分自身に対して的確な問いを投げかけて考えてみましょう。何が上手くいっていて、何が上手くいっていないのかを見極めるのです。
もしできるのであれば、カスタマーサービスにも協力してもらいましょう。カスタマーサービスに寄せられるユーザーのクレームであったり、不満の声を実際に聞いてみることで、今までに起きたトラブルに関するデザイン的な問題を見つけられるかもしれません。
10. ユーザーを導くのはコンテンツである
UXはユーザーがクリックするアイコンやページの色だけの話ではありません。訪問者が目にするほぼ全てのものがコンテンツです。それが文字でも写真でもビデオでも、です。しかし、多くのデザイナーはコンテンツ担当チームと話すことや、コンテンツに関する戦略を強化することを完全に無視してしまっています。
見た目の良いサイトでさえ、良いコンテンツがなければ、ただの無用な長物です。だからこそ、あなたの次のデザインではこう考えみましょう。
今取り組んでいるのは、既にある程度充実した中身のあるサイトのリデザインなのか？ だとすれば、どのようにその影響力を新しいサイトに取り込んでいくのか？
または、全く新しいサイトを1から築き上げているのだろうか？
最終的なゴールは、分かりやすくて先に進みやすいコンテンツを作り上げることです。究極的にはユーザーが友達にサイトをガイドしてもらってるように感じさせることでしょう。この友達とは、あなたが何をしたいのかを正確に把握しており、それがある場所を教えてくれる存在です。
11. あらゆる矛盾をなくそう
「矛盾」はユーザーにとって最も大きな問題のひとつです。しかし一方で、デザイナーは「矛盾」を含んだ色やスタイルをあえて駆使し、自分が作るデザインをなんとかユーザーの記憶に残るものにしようとしています。
ナビアイコンを例に挙げてみましょう。あるホームページでハンバーガーメニューをナビアイコンとして使っていたとします。同時に、ランディングページではドロップダウンの矢印をナビアイコンとして使っています。このふたつの異なるアイコンは、実際は同じ働きをしています。
別のページで異なるナビのタイプを目にすることは、ユーザーのナビに対する印象に影響を与えてしまっています。それが結果として混乱を生んでしまっているのです。
そのような混乱を感じてしまうユーザーは、例えその感覚を的確に言葉にして表現できなかったとしても、苛立ちを感じやすくなり、残念ですがサイトに戻ってくることはないでしょう。それに対して「矛盾」のないサイトは、難しいことを考えさせずにただユーザーがしたいようにさせてくれるものです。
12. 意味のない要素は全て消そう
UXデザインはここ10年で大幅に進化してきました。不恰好な若年期を終えて、洗練された成人へと進化してきたのです。明るすぎる色使いや、ページ中に広がったナビのリンクはもうなくなりました。今日のサイトは、良いUXのために合理化されてスリムになってきています。
では、なぜ意味のない要素をページから消していかなくてはいけないのでしょうか？なぜなら「意味のない要素」というのが以前と比べて、より大きな（マイナスの）意味を持つようになってきたからです。そのような要素があることで、1つで済むはずの動作が2つになったり、見てほしい要素から視線を逸らさせてしまったりします。
このようなものを取り除いていくにあたって、要素の価値を正確に測る方法を知らなくてはいけません。不要な要素を調べる良い方法としては、ユーザーのマインドセットを持ってみるのはどうでしょうか。
自分自身にこう尋ねてください。
この要素は自分にどのような影響を与えているか。そして、それは自分の目標に達するための手助けになっているか。
結論
あなたはUXデザイナーではないかもしれません。
しかし、良いUXデザインの原則を自分に取り入れ始めたら、きっと自分のデザインするWebサイトがより良く、そしてより効率的になっていくのが分かるでしょう。それはデザインの最終的なゴールだと思っています。
結局は、ユーザーを彼らが必要とする情報へスムーズに案内し、その情報を用いて何ができるのかを見せてあげることに尽きるのではないでしょうか。
この知識が手助けとなり、あなたは素敵なUXデザインを設計し、ユーザーにポジティブな印象を与えることができることを願っています。
ーーーーーーーーーーーーーーーーーーーー
以上となります。
最後までお読みいただき有難うございました！
