UIとは?ユーザビリティを向上させてユーザーから好印象を持たれよう!のアイキャッチ画像

デザイン

更新日: 2024/11/22

UIとは?ユーザビリティを向上させてユーザーから好印象を持たれよう!

character_balloon

イエローちゃんイエローちゃん

ピンクちゃんどうしたのー?

character_balloon
character_balloon

UIってなぁに?

あーUIかぁー

character_balloon

じゃあ今日はUIについて説明していくね!

character_balloon

UIとは?

UIとは?ユーザビリティを向上させてユーザーから好印象を持たれよう!の画像_2枚目
character_balloon

UIとはUser Interface の略で、主にWebサイトやアプリケーションのデザイン性の高さについて言及するときに使われることが多いよねー

character_balloon

ユーザーっていうのは利用者、インターフェースっていうのは接点って意味だよ

character_balloon

Webサイトやアプリケーションとユーザーをつなぐ接点、つまりサイト上の画像や動画やフォントなど、ユーザーが認識したり操作したりするすべての要素のことを言うんだ

character_balloon

読みづらい文字や聞きづらい音や、どこになにがあるかわからないデザインは、使いづらくて困るよねー

character_balloon

UIを意識したデザイン設計は、Webサイト構築においてすごく重要なんだよ!

UIの重要性ってなに?

UIとは?ユーザビリティを向上させてユーザーから好印象を持たれよう!の画像_4枚目
character_balloon

ユーザーがそのWebサービスやアプリケーションをまた使いたいって思うのはどんなときだと思う?

そうねぇ・・気に入ったときかしら

character_balloon
character_balloon

そうだよねー好きになったらWebサイトをまた見たいと思うし、そのアプリを使って調べたら遊んだりしたくなるよねー

character_balloon

じゃあどうして好きになると思う?

使いやすかったりわかりやすかったり、かわいかったりするからかしら!

character_balloon
character_balloon

そうだね、つまりユーザーに好印象を持ってもらうことが重要なんだ

character_balloon

ユーザーに好印象を抱かれるために必要なのが、UIを意識してユーザビリティを高めることなんだよ

character_balloon

UIはユーザーとサービスの接点だから、UIを意識することが読みやすさやわかりやすさに繋がるんだよねー

UIとUXの関係性について知ろう!

character_balloon

UIとよく似た物としてUXっていうのがあるんだよねー

character_balloon

Webデザインの話題になると、どちらも必ず登場するキーワードだよ!

character_balloon

この2つはよく似ているけど違っていて、でもどちらもWebサイトに欠かせないものなんだ

character_balloon

UIとUXについて詳しく説明していくね

UIとUXの違いってなに?

UIとは?ユーザビリティを向上させてユーザーから好印象を持たれよう!の画像_8枚目
character_balloon

UIもUXも、使いやすくわかりやすいWebサイト構築に欠かせないものだよ

character_balloon

UIは色や形や音、配置場所なんかによってユーザーが見やすいための工夫や要素のことなんだよねー

character_balloon

インターフェースっていうのは境目や接点って意味で、Webサービスとユーザーを繋ぐ部分だよ

character_balloon

UXはUser Experience の略で、ユーザーがWebサービスやアプリケーションを通して得る体験のことなんだよねー

character_balloon

エクスペリエンスっていうのはまさに体験って意味で、どう感じたかどんな印象を持ったかなど、ユーザーに残る感覚だよ

UIを改善してUXを高めよう!

UIとは?ユーザビリティを向上させてユーザーから好印象を持たれよう!の画像_10枚目

UIとUXは違う物なのに、どうしてよく一緒に使われるのかしら?

character_balloon
character_balloon

優れたUIだとユーザー体験(UX)が高まるし、使いにくいUIだとユーザー体験(UX)に悪影響が出るよね

character_balloon

UIとUXにはそういった相関性があるから、UXを改善するためにWebサイトやサービスのUIを常日頃から意識して改善するのが重要なんだよ!

優れたUIを3つご紹介!

character_balloon

最後に、人気のあるUIを3つ紹介するね

優れたUI1.Relux

UIとは?ユーザビリティを向上させてユーザーから好印象を持たれよう!の画像_14枚目
参照: Relux
character_balloon

Web系で優れたUIとして挙げられるのは、Reluxだね

character_balloon

Reluxは高級ホテルのプラットフォームで、スマートフォンのUIが綺麗なことで有名だよ

character_balloon

上画像が実際のReluxのスマートフォンでの表示なんだけど、ホテルの写真を画面いっぱいに使っているUIなんだよ!

character_balloon

他に、こういう画面いっぱいになるまで写真を表示しているサイトは少ないから珍しいUIなんだけど、高級なホテルの一覧だから綺麗な一覧で表示できてるよね!

優れたUI2.iphone

UIとは?ユーザビリティを向上させてユーザーから好印象を持たれよう!の画像_16枚目
参照: iphone
character_balloon

2つ目に紹介する優れたUIは、iphoneだね

character_balloon

iphoneは、みんな知ってるApple社から出ているスティーブ・ジョブズが作ったスマートフォンだよね

character_balloon

UIはUser Interfaceの略で、ユーザーが接する全てのものだから、iphoneのデザインもUIとして考えるべき事例の1つだよ

character_balloon

そんなiphoneのUI開発の逸話を紹介するね

character_balloon

当時のスティーブ・ジョブズはできる限り小さい携帯を求めていたんだって。

character_balloon

で、エンジニアが持ってきたiphoneを水槽に入れて、気泡が出てきたら「気泡が出るっていうことは、まだ小さくできるよね?」ってエンジニアを一蹴して再度、UIを作り直させたっていうのが有名な話があるんだよね

それはエンジニアの心が折れちゃいそうね、、。

character_balloon

優れたUI3.スプラトゥーン

UIとは?ユーザビリティを向上させてユーザーから好印象を持たれよう!の画像_18枚目
参照: スプラトゥーン
character_balloon

最後に紹介する優れたUIは、スプラトゥーンだよ

character_balloon

任天堂が作る代表的なFPSゲームだね!

character_balloon

スプラトゥーンは、ゲーム内で使用するフォントから自作してて、かなりこだわったUIになってるんだよね〜

character_balloon

デザイナーの開発秘話が語られてる記事があるから、それを読むと「どれだけUIにこだわっているのか」がわかるよ!

まとめ

character_balloon

最後に、UIについてまとめておくね!

まとめ

◆UIとは User Interface の略で、ユーザーとサービスの接点のこと


◆UIを意識してデザイン設計することが重要


◆よく似ていてUIに大きく影響するUXも意識すべき

character_balloon

UIについて少し理解が深まったかな?

ユーザーの視点に立ってUIを意識してみるわ!

character_balloon

イエローちゃんありがとう

character_balloon
character_balloon

またなんでも聞いてね!

最新の記事一覧
最新の記事一覧