デザインの世界でよく聞くUI、UXを正しく理解しよう！【UI編】

私は4月からWebデザイナーとして働くのですが、デザイン学校を出ておらず、普通の大学に通ってきたので、デザインの知識をもっと勉強しなければと思いnoteで勉強しています。

ユーザーに支持されるサイトを作れるように、今回はUI、UXを正しく理解するための記事を書きます。

この記事はUI編です。

UIとは

意味

UIとはUser Interface（ユーザーインターフェース）の略です。

Interface（インターフェース）は「接点、境界面」という意味があります。

目的

UIの目的は『ユーザーを目的に辿り着かせる』こと。

サービスとユーザーを繋ぐ接点となるのがUIで、快適にユーザーを目的に辿り着かせるデザインにすることが重要です。

ユーザーが迷うことなく目的に辿り着くことができれば「使いやすい！」と感じるので、UIの設計が良いサービスといえます。

具体例

下層ページに飛べるボタンはボタンだとわかる形状にする

引用：就労移行支援ONE MORE

シャドウでボタンらしい立体感があり、さらに矢印の装飾で次に進むというような印象を感じますね。

飛べるリンクだとわかるようにする

#女子旅にホバーしているので、色が変わっています。またリンクに下線を引くのもリンクであることを認識してもらう工夫です。

見出しとテキストのジャンプ率をつけて可読性をあげる

引用：彩匠堂

セクションタイトルが一番大きく、見出しにはテキストの背景にラインを引くデザインで、その下にテキストというように、ユーザー無意識で読み進められます。

可読性の高いデザインにすることで、快適に目的に誘導してあげられます。

情報はまとまりを意識

引用：株式会社情報都市

これはフッターですが、近接と整列がされてあるので、情報ごとにまとまりがあり見やすいと思います。

イメージに合う正しい画像選定

引用：株式会社関東農産

引用：iDID

画像はテキストの意味合いに合わせて選定します。

イメージがリンクしていれば、判読性があがり、ユーザーがサイトを快適に読み進んで目的にたどり着きやすくなります。

UIデザインで気をつけること

まとめると基本は以下の3つになるかなと思いました。

・視認性（目で見たときの確認のしやすさ）あげる
・可読性（文章の読みやすさ）をあげる
・判読性（文字や文章の意味の伝わりやすさ）をあげる

また、ターゲットに合わせて度合いは考える必要があります。

調べてみて、どれも「ユーザーを目的に辿り着かせるため」の工夫だと改めて確認できました。

次はUXについての記事を書いていこうと思います。