原文：https://www.webdesignerdepot.com/2022/02/whats-the-difference-between-good-ui-and-good-ux/本記事は2022年2月2日に公開された情報を和訳したものです。英文を翻訳したものであるため、詳細や正しい表現は英文の原文を参照ください。「このサイトは使いやすい！」「このサイトは使いにくいな、わかりづらい…」普段インターネットを使っている人は、こんな感想を持った経験があるのではないでしょうか？ユーザーの方に「いいサイト」と思ってもらうにはどのようにすればよいのでしょう。この疑問を解決するのに欠かせない概念が「UIとUX」です。一般的に「UI/UX」とまとめられて表記されがちなので、対立する概念であったり、相互補完する概念であったり、と思われている方は少なくないと思います。しかし厳密には、UIとUXはそのような関係ではありません。ユーザーインターフェイス（UI）デザインとユーザーエクスペリエンス（UX）デザインは、人々が誤って使用することがよくある二つの用語です。それぞれの側面は互いに関係がありますが、UI / UXデザインには明確な違いがあります。この2つがどのような概念で、どのような関係なのか、見ていきましょう。UXとUIの最大の違いとは？UIはユーザーインターフェイスの略です。「Interface：インターフェイス」は「境界面、接点」と訳せます。つまり、UIは「人とモノ（主にデバイス）をつなぐ窓口のようなもの」なのです。一方で、UXはユーザーエクスペリエンスの略です。「Experience：エクスペリエンス」が「体験、経験」と訳せるように、UXは「人がモノやサービスに触れて得られる体験や経験」のことを指します。UIとは、デザインの機能性やユーザーの目に触れるものです。UXは、視覚的なものとインタラクティブなものの両方が組み合わさって、ユーザーの感触を作り出すものです。この2つは、Webサイトやアプリとの相互作用に適用されるものなので、人々が混同するのも無理はないでしょう。トップクラスのデザイン会社は、それぞれの分野を専門とするチームメンバーを擁していることが多いです。しかし、UXデザイナーはUIも意識し、UIデザイナーはUXも意識する必要があります。UI/UXそれぞれの要件を網羅しながら、優れたUI/UXデザインを提供するには、どうすればよいのでしょうか。効果的なUIデザインを実現するために続いてUIデザインにフォーカスしていきます。UIはUXに影響を与え、デザインがどのように機能するかに関わっています。UIデザイナーは、サイト訪問者の期待に応え、イライラさせないインターフェイスを作り上げることが求められます。UIは、Webサイトのフレームワークの中で機能的な機能を開発する仕事です。また、UXはUIと完全に同じわけではありませんが、計画段階では密接に関係しています。優れたUIデザインの要素には、どのようなものがあるのでしょうか？1. スタンダードの設定良いUIであるためには、期待通りのパフォーマンスを発揮しなければなりません。以前ボタンをクリックしても、何も起こらないという経験をしたことはありませんか？このような事態は極力避けなければなりません。そのために、サイトをどのように動作させたいか最低限必要な基準を決めましょう。例えばリンクやボタンをクリックしたら、何が起こるでしょうか？ユーザーは自分の行動が期待通りの結果を生み出したと、どのようにして知ることができるでしょうか？行動の一貫性は、サイトのパフォーマンスにとって非常に重要です。2. 正しい色を選ぶUXデザイナーはさまざまな色が感情に与える影響を見るのに対し、UIデザイナーは色合いがブランディングにマッチしているか、異なる色が読みやすさと使いやすさのためにどれだけコントラストをつけられるかを見ます。UI/UXデザインは、一人のデザイナーの仕事の橋渡しをすることが多いので、開発の際は感情的にも機能的にもすべてが意図したとおりに動くかどうかを念入りに確認する必要があります。また、別のデザイナーと協力して、サイトの美しさを追求しながら、ユーザーの感情を引き出すこともあります。例えば、青が好きな人もいるので、青いボタンがポジティブな結果をもたらすこともあります。UXデザイナーやUIデザイナーは、スプリットテストを活用して、どのユーザーが最も反応するのかを確認すべきです。そして、サイト訪問者の反応を見ながら、調整を加えていく必要があります。3. 認知的な事柄に焦点を当てるインタラクションデザイン財団によると、人は短期記憶で5つ程度しか保持できないそうです。ユーザーは必要なものを見つけるために手がかりを頼りにする傾向があるため、デザイナーは代わりにユーザーに認識してもらえるよう工夫する必要があります。UIデザイナーは、直感的なナビゲーションシステムを開発し、配置、色、言語など、すべてのページで同じ手がかりを使用することができます。そうすれば、ユーザーはそのシステムを記憶することなく、認識することができます。4. エラーを防ぐWebサイトやアプリをデザインする際に、エラーを最小限に抑えることがあなたの仕事です。デザイナーの仕事の中で最も重要なもののひとつが、テストを繰り返すことです。リンク切れや画像の表示、動作の不完全さなど、ユーザーが遭遇する可能性のある問題を考えてみてください。そのような問題を未然に防ぐには、どうしたらよいでしょうか。特に、SaaS（Software as a Service）やアプリを設計する際には、エラーの防止が不可欠です。ユーザーはすぐに不満を募らせ、問題のトラブルシューティングを行うよりも、別の解決策を探すようになります。このような事態を防ぐためにも、エラーを未然に防ぐことがとても大切なのです。効果的なUXデザインを実現するために優れたUXデザインは、CVR（コンバージョン率）を400％以上向上させます。サイトを訪れた人は、自分のニーズに合っていると感じ、イライラすることなく立ち去ることができるのです。では、優れたUXデザインの最も重要な側面は何でしょうか？以下に優れたUIデザインのヒントを５つ並べました。1. 良い構造を作るあなたのサイトの階層はどうなっていますか？ユーザーがサイトを立ち上げたとき、最初に目にするのは何でしょうか？あるページから次のページへ、どのように移動するのでしょうか？よく設計されたウェブサイトは、ページのさまざまな側面を分類し、新しいコンテンツが成長するにつれて、自然に適切なカテゴリに分類されます。サイトの構造を作るときは、5年後にどのように拡張されるかを考えてください。初日から使える階層にしたいのはもちろんですが、将来的にコンテンツが大きく変化することも想定しておく必要があります。ナビゲーションの階層も、新しいエリアに簡単に対応できるようにする必要があります。予期せぬ事態を想定し、いざというときにそれをデザイン全体に組み込む方法を知っておきましょう。2. 美しい景観を選ぶサイト訪問者に良い印象を与えるには、数秒しかありません。時間をかけて、機能的かつ視覚的に魅力的なデザインに仕上げてください。カラーパレット、画像は鮮明で適切なもの、タイポグラフィは読みやすく魅力的なものであるべきです。画面から離れ、遠くから自分のデザインを見てみましょう。何か目に余るものはありませんか？サイトを訪れた人から、何が好きで何が嫌いかフィードバックをもらいましょう。ユーザーエクスペリエンスに重点を置いているため、建設的な批評を受けるには、ターゲットとなるユーザーからの意見が最も適しています。彼らの懸念やアイデアに耳を傾けてください。3. サイト訪問者とのコミュニケーションユーザーがサイトやアプリにインタラクティブな要素を求めていることは、多くの専門家が認めています。ユーザーは、あなたが意見を聞いてくれていることを知り、反応を返すことを望んでいるのです。例えば、サイトにライブチャットオプションを追加したり、SMSによるカスタマーサポートを行うなどの工夫が望ましいでしょう。相手の立場に立って考えてみましょう。顧客は、あなたのサイトを初めて訪問し、あなたのブランドについて全く知らないかもしれません。彼らは、あなたを信頼する理由も、あなたとの約束を守る理由もありません。潜在的な顧客は、せっかく稼いだお金を手放す前に、いくつかの疑問を持っているかもしれません。そのため、さまざまなコミュニケーション手段を用意することで、万が一問題が発生した場合に、あなたが誠実に対応できることを示すことが大切なのです。あなたが電話、ライブ チャット、または電子メールを送信し、即座に応答を得ることができると知っている場合、あなたや会社への信頼度は一気に増します。4. 明確な方向性を示す優れたUXは直感的なものです。そのためユーザーが次に進むべき道を指し示すCTA（コール・トゥ・アクション）や画像を追加することが優れたUXに必要な要素です。矢印、次のステップを見る人や指差す人、文字、CTAボタンなどのグラフィックなど使用しましょう。案内がどの程度明確であるかフィードバックを受け、必要に応じて微調整してください。ユーザーが立ち止まって、次に何をすべきかを考える必要がないようにするのが理想です。ページ上のすべてのものが、最終的なゴールへと導くものでなければなりません。5. 複雑なデータを分解するどの業界にも、専門家でないと理解しがたい複雑なデータが存在します。それでも、複雑な情報を分解し、シンプルな方法で共有することが良いUXにつながります。例えば会員登録のプロセスを思い出してみてください。優れたUXデザイナーは、テキストを表示するだけでなく、ステップに番号を振ります。複雑なもの・わかりづらいものを可視化することは、ユーザーの理解を深めるのに役立ちます。UIとUXはどのように連携しているのか？はじめにUIとUXの違いを解説しましたが、それでもUIとUXの境界線が曖昧という方は多いのではないでしょうか？良いUIによって良いUXが生まれる、その強い結びつきのせいで境界線が曖昧で混同されやすいのです。UIは、閲覧者にとっての要素の見え方や、すべての要素をどこに配置するかを考えます。一方UXは、ウェブサイトの流れや、ユーザーがどこから始まり、次に進み、どこに行き着くのかに注意を払います。UIチームは、そのボタンをどこに配置するか、サイズ調整が必要かどうか、デスクトップやモバイル端末での使い勝手にどう影響するかを判断しなければなりません。UXのチームは、ページにボタンを追加することを決定します。UIとUXがいかに密接に関わり合い、使いやすい体験を生み出しているかは、お分かりいただけたのではないでしょうか。UXデザイナーは機能とインタラクティビティに注目し、UIデザイナーはインターフェイスの見栄えを考えます。UIとUXはどちらか一つが欠けてもいけないものですし、どちらかが優勢になってもいけません。UIとUXは相乗効果として捉えるのがベストです。それぞれ異なる機能を持っていますが、ターゲットユーザーが反応する使いやすいサイトを作るには、UIとUXが連携する必要があります。優れたUIなくして優れたUXはありえませんし、その逆もまた然りです。優れたデザイナーを目指してその両方を考慮し、最大限の効果を発揮するように実装していきましょう。