1.0ハイブリッドテクノロジーズhttps://hybrid-technologies.co.jp/blogHT Blog Adminhttps://hybrid-technologies.co.jp/blog/author/ht_admin_blog/rich600338<blockquote class="wp-embedded-content" data-secret="fhDdY0GMvQ"><a href="https://hybrid-technologies.co.jp/blog/uiux/20210224-3/">UX/UIとは？意味やUIとUXの違い、デザインの改善ポイントを解説</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://hybrid-technologies.co.jp/blog/uiux/20210224-3/embed/#?secret=fhDdY0GMvQ" width="600" height="338" title="“UX/UIとは？意味やUIとUXの違い、デザインの改善ポイントを解説” — ハイブリッドテクノロジーズ" data-secret="fhDdY0GMvQ" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript"> /* <![CDATA[ */ /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://hybrid-technologies.co.jp/blog/wp-includes/js/wp-embed.min.js /* ]]> */ </script> https://hybrid-technologies.co.jp/blog/wp-content/uploads/2021/02/ux-ui_img2-700x525-1.png700525はじめに 「UI」と「UX」という言葉を聞いたことはあるでしょうか？ あまり聞きなれない単語かもしれませんが、実は私達の生活に大きく関わっているのがこのUI/UXです。 昔からパソコンを利用されている方は時代の流れとともにUI・UXが革新的な進歩を遂げてwebのデザインやアプリケーションソフトやツール等が大きく変わっている事はご存知ではないでしょうか？ このIct、Iot時代において決して無視できない事柄として、UI、UXは間違い無く上げられるでしょう。Googleによるトレンド傾向を見てもここ10年間右肩上がりの話題の内容となっています。 ではそもそもUIとUXなぜ並行して説明されているのか？ また正式名称は？ 開発事例などを含め説明していきましょう。 「UI」、「UX」の正式名称は？その違いは？ そもそもこのUIとUXの正式名称は何かご存知でしょうか？ 「UI（ユーザーインターフェース）」とは？ UIとは「User Interface：ユーザーインターフェース」の事を指しています。 UIは日ごろから触れている存在でもあり、「なんとなく聞いたことがある」という方もいるかもしれません。 このユーザーインターフェースという言葉は、「製品やソフト、アプリケーション等の利用者（ユーザー）を繋ぐ窓口、接点（インターフェース）」などと良く表現されます。 分かりやすい具体例をあげましょう。非常に身近なUIとは何か？もしかしたらあなたが今も触れているかもしれません。 そう、パソコンに繋がれている「マウス」や「キーボード」はパソコンと私たちを繋ぐためのUIと言えるでしょう。またスマホを使っているのであれば「タッチパネル」が無いと私たちのパソコンやスマホ操作はままならないでしょう。 少し感じにくいかもしれませんが、実在するハードウェア以外にも私たちが使用しているwebブラウザや検索ツールなどのソフトウェアもUIといえるでしょう。このようにシーンに合わせて実に様々な形状をしており利用のされ方も多岐に渡る…それがUIといえるでしょう。 関連リンク：UIデザイン（ユーザーインターフェース）とは？重要性や設計するときのポイントを解説 「UX（ユーザーエクスペリエンス）」とは？ UXとは「User Experience：ユーザーエクスペリエンス」の事を指しています。 こちらは少し聞きなれない略称かもしれません。このユーザーエクスペリエンスという言葉は、「利用者（ユーザー）がUIを通じて得られる経験・体験（エクスペリエンス）」と表現されます。つまり、UXと利用者が実際にUIに触れた結果持たされる経験・体験ということです。 従ってUIによってもたらされるUXとは触れた人により大きく変わってきます。勿論、「素晴らしい、快適、便利」などのプラスの意味での体験もあれば「不便、いまいち、使いにくい」と言ったマイナスの感情に働いてしまう事も認識しておく必要はあるでしょう。 例えば若者がパソコンやスマホを利用した結果「非常に便利、無くてはならない」と感じれば、機器に不慣れのご高齢の方は「よくわからない機械」という感情をいだくこともあるでしょう。 関連リンク：UXデザインとは？UIデザインとの違いや改善するためのポイントを徹底解説 ではこのUIとUXの違いは？ 「UIとは決まったソフトやハードなどのモノの提供に対し、UXはその利用者の体験や経験による反応」といったところでしょう。 しかしこの違いが曖昧となりがち、またはよくわからないという声は非常に多いです。 事実、このUI・UXという単語は検索ワードでその違いについて調べられる事が多々あります。 今まで説明してきたようにUIとUXは互いに密接に関係しており、これらを切り離して考えることはナンセンスといえます。つまりUXという大きな輪の中のひとつにUIが存在しているという考えが重要です。 UX/UIの具体事例 UXとUIの関係性を示す具体例としては、以下のようなケースが挙げられます。 【例①】 （UX）ECサイトで欲しい商品をスムーズに見つけて購入できた→（UI）商品の写真や購入ボタンの配置がわかりやすい 【例②】 （UX）会員登録や申込時の情報入力が簡単だった→（UI）違和感がない位置・色のリンク、見やすいフォント・レイアウト、入力フォームの項目数は必要最低限 つまり、ユーザーがUIに触れた結果生まれた体験がUXであると言えます。企業は「情報を見つけやすい」「簡単に操作できる」などユーザーにとってプラスとなり得るUXを目標として、それを達成できるようなUIを作り上げることが重要です。 とはいえ、良いUIを生み出せば必ずしもUXも良くなるとは断言できません。操作性や視認性に優れていても、コンテンツそのものの質が低ければUXは向上しないからです。まずはユーザーのニーズにマッチしたUXをデザインし、「UIはUXの質に影響する要因の1つに過ぎない」ことを理解のうえUIデザインを考える必要があります。 UX/UIが重要な理由 近年はスマートフォンの普及が急激に加速したことから、24時間・365日いつでもインターネットにアクセスできる人も増えています。それに伴いインターネット上で提供されているサービス・商品も増え続けており、ユーザーは自分にあった情報を容易に取捨選択できるようになりました。また、技術や市場の発達によりどの企業も一定の質を保ったサービスや商品を提供しており、もはや品質の良さだけで市場競争力を確保することが困難になりつつあります。サービスや商品の質は良くても、「ページの読み込みが遅い」「レイアウトが分かりにくくて操作にストレスを感じる」といったようにコンテンツの質が低ければ淘汰されてしまうと言っても過言ではありません。 さらにパソコンやスマートフォン以外の機器もインターネットに接続できる「IOT化」が進んでいることも、UX・UIが重要視されている原因の1つです。従来よりもインターネットの損z内がより身近となった現代は、「操作性の良いUI」を備えて「快適で便利というUX」を実現する製品やサービスが求められている傾向にあります。 優れたUX/UIとは？UX/UIを改善する際のポイント ポイント①ターゲットユーザーについて分析する UI/UXデザインを設計するにあたって、それをどのようなユーザーが、どういった目的で使うのか把握する必要があります。そのためにおすすめの方法が、ペルソナの設定です。例えば、中高生と大学生では好むデザインや機能は異なります。あるいは、同じジャンルであっても、予算によって求められる機能や価値は異なるでしょう。 ユーザーのニーズを把握する手法としてユーザーテストが有効です。ターゲットユーザーに自社の商品やサービスを使ってもらい、その様子を観察することで、課題や問題点が見つかるでしょう。 ポイント②改善のゴールを設定する UI/UXデザインの設計にあたってゴールの設定は重要です。改善を実施することで解決したい課題の設定や、ユーザー目線での問題を解決できているかの確認も忘れないようにしましょう。 改善箇所がゴールに達したら、ユーザーテストの実施を行います。ユーザーの意見を反映させたり、リリース後に効果計測を行ったりすることも、ユーザーから支持されるUI/UXを設計する上で不可欠な作業です。 ポイント③データを用いて定量的に改善を進める […]