top of page

優れたUIのデザインを制作する為に押さえておきたいポイント

UIやUXという言葉、最近特によく耳に、そして目にするようになりました。ややこしい用語を初心者の方にもできるだけわかりやすく、現役デザイナーがお話します。今回はPart2.

優れたUIのデザインを制作する為に

前回はデザイン制作におけるUI、UXについての意味・関係性をご説明いたしましたが、今回は『UI(ユーザーインターフェース)=ユーザーと媒体との繋がり』について掘り下げてご紹介いたします。

ユーザーが疑問を感じないデザインがベスト!

突然ですが「通販サイトで買い物をする」シーンをイメージしてみてください。

「さて、買い物するぞ!」とサイトを開いてみたあなたの目の前にこんなページが飛び込んできました。

●商品購入ページが見つからない

●ボタンが無くてクリック箇所がわからない

●画像等の絵が不明瞭

●テキスト情報が読みづらい

ウンザリしてサイトを利用する気が無くなってしまうのではないでしょうか?

これは「ユーザーに疑問や不満を感じさせてしまう」という悪いUIの例ですが、こんなデザインばかり作っていると上司やクライアントから厳しい指摘をもらってしまいそうですし、何より自分が作ったデザインが「ユーザーが利用しづらいものである」というのはとても悲しいですよね…。

そんな事にならない為にも、上記のような悪い点を解消し「ユーザーが快適に利用できる優れたUI」のデザインを作る必要があります。

ポイントは「情報をわかりやすく整理し」「ユーザーの疑問点=?を無くす」という事で、「?」が残っているのならしっかり発見して潰す必要があります。

より具体的なデザインのポイントとは

実際にデザイン制作の際に押さえておきたいポイントをご紹介します!

●無駄な文字情報・色数を増やさない

●文字サイズはターゲットに合わせ適切な大きさで

●アイコン、ピクト等のビジュアル化も必要

●大切な情報は繰り返し伝える、強調する

●情報を適切に整列、グルーピングする

●アンカーリンクのカラー等、世間のデザイン認識で一般化しているものはそれに習う

上記は一例ですが、このような事を制作時に意識しているだけでUIの快適さは向上します。

また制作したデザインを試しにモノクロに変換し「各情報がわかりやすい?」「大切な情報がしっかり強調されている?」とチェックしてみるのも一つの方法です、カラーの状態と違いごまかしが効かないので意外な発見がある事も…!

また「動画・画像を多用しページが重く表示が遅い」等のサイトも良いUIとは言えません。設計に関してはエンジニアとも相談・協力して快適に利用できるサイトを目指しましょう!

ターゲットを想定したUIデザインを作る

ただ、デザインを見せたい相手「ターゲット」によって快適なUIは変わります。

例えばシニア向けなら

●文字は大きく

●明度差を付け認識しやすい配色

●シンプルで簡潔なデザイン

にする等の工夫も必要。

制作者の目線だと「わかりやすい!使いやすい!」と自信たっぷりでも、年齢・性別・デザインを見ているユーザーの環境等によっては「わかりづらい…」と感じさせてしまう事もあります。

制作者は完成したデザインを見る時、客観的に「初めて見る人の目線」に立つ事はなかなか難しいもので、自分の主観のみでUIの良し悪しを判断してしまいがちです。

完成したデザインは、チームメンバー等に確認・使用してもらい客観的な意見をもらうようにしましょう。フリーランスの方も同様、家族や友人など多くの人から意見をもらう方が良いでしょう。

勿論、可能なら想定しているターゲットに近い立場の人に見てもらうのが一番です!

そこで発生した「わかりづらい、使いづらい」というポイント「?」を潰す事でより良いUIのデザインに近づける事ができます。

優れたUIデザインを自分一人で作る事は難しいので色々な人に協力してもらいドンドン意見をもらうようにしましょう!

今回はデザインにおけるUIについてご説明いたしました。

次回は「良いUXのデザインを作るには具体的にどうすれば良いのか?」という事をご紹介いたします!

 

最後までお読みいただきありがとうございました。 ラライフでは、専門のキャリアカウンセラーがあなたのライフスタイルに合わせたキャリアをアドバイス。新しいことにチャレンジしたい方をとことん応援しています。 仕事のご紹介だけではありません。今の仕事の悩みや将来のことなど、あなたの心の不安やこれからのことをお話できる有料カウンセリングも行っています。どうぞお気軽にご相談ください。

ご相談はWantedlyメールFacebookTwiter  よりお願いいたします。

皆さまからのご連絡を心よりお待ちしています。

FOLLOW ME
  • Black Facebook Icon
  • Black Twitter Icon
  • Black Instagram Icon
SEARCH BY TAGS
まだタグはありません。
FEATURED POSTS
GALLERY
ARCHIVE
CONTACT

メッセージを送信しました

bottom of page