Catch on to a trend

IT・Web業界のトレンド

今さら聞けないUIデザイン。著者登壇のイベントも!~イチ押し本『UIデザイン必携』vol.1

2022.05.31

人の能力や共通認識を知って、UIデザインを考える

Webクリエイターとして、どうしたらもっとよいUIになるか、悩むことはないですか?

今回は、人の能力や共通認識などを踏まえたUIデザインについてです。著者は「UIデザイン(設計)の答えはひとつには絞れない。しかし、設計には良し悪しがある」と言います。

UXとUIの違いを再確認して、よいUI設計について考えてみませんか。

何から始める?UIデザイン。イベントで著者にインタビュー!

UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために

原田秀司(著)

出版社:翔泳社(2022/04/13)

Amazonカスタマーレビュー3.9(2022/5/31現在)

ユーザーとしてサイトを使っていて『このサイトは使いやすい』『あのサイトは分かりづらい』と思う反面、クリエーターとして、どうしたらよいUIデザインになるのか悩むことはありませんか?

使いやすさや分かりやすさは、人の習性が関係してるものもあります。一般的なルールや人の能力などを知っておけば、UIデザインがうまくいかないときに、立ち返って考えられるはず。

UI・UXの基本と、UIデザインで知っておきたいことを本から抜粋してお伝えします。

ポイント1.UIが悪いと、よいUXにつながらない

UIとUXは、併記して書かれることが多くあります。しかし、UXは主観と感情に基づいた体験、UIは分かりやすさや使いやすさで、違う分野のものです。

※紹介書籍(P14)の図を参考に作成

よいUIであれば、よいUXを提供できます。しかし、UI(分かりやすさや使いやすさ)が悪いとそこでつまづき、次のUXに進むことができません。

Webデザインでは、サイト全体の構造から、ボタンの配置や装飾まで、さまざまなところで、UXを意識したUIデザインが求められます。

ポイント2.人の能力や共通認識を知って、分かりやすさを考える

サイト制作をしていて、「もっと分かりやすく」「もっと目立たせてほしい」という要望を受けることはないですか?よいUIデザインを設計するためには、人の能力や共通認識を知っておくことが大事です。

認知能力で見分ける

下のA~Cのうち、どれが一番「6」を見つけやすいですか?

※紹介書籍(P48)の図を参考に作成

Bは瞬時に「6」だけを見つけることができたと思います。Aは全ての数字を見る必要があり、Cは色数が多く見分けづらいですね。色に対する認知能力を使うことで、効果的なデザインができますよ。

コントラストで認知のバランスをとる

「あれもこれも目立たせたい」とすると、逆に全てが目立たない結果になります。

※紹介書籍(P88)の図を参考に作成

一番目立たせたいものを整理し、コントラストを付け、視覚的な認知のバランスをとることが大切ですね。

共通認識を踏まえる

アイコンには区別のしやすさ、省スペース化など、さまざまなメリットがあります。使い勝手がよい分、使うときには注意が必要です。
知られてない解釈や、解釈が分かれるアイコンにはラベルを付けるといいですよ。

※紹介書籍(P144)の図を参考に作成

『UIデザイン必携』の著者、原田秀司さんのイベント開催決定!

今回ご紹介した書籍の著者である、原田秀司さんをお招きし、イベントを開催!

TVのアプリケーション画面設計を手掛けられたことがきっかけで、UIデザインの重要性を認識されたという原田さん。当時の事例を交えながら、原田さんがUIデザインでどのようなことを大切だと考えているのか伺います。

さらに、ウェブスタッフのキャリアカウンセラーが、書籍の中から気になるトピックについて根掘り葉掘り質問する予定です。

トレンドに左右されない、いつの時代でも通用するUIデザインの考え方のポイントを知りたい、そんな方は、ぜひご参加ください!

※当日の状況により、イベント内容が予告なく変更になる場合がございます。あらかじめご了承ください。

最後に. 陥りがちな盲点に注意

Webサイトの制作をクライアントワークで行っていると、目指すべき目的が、担当者の個人的な評価にすり替わってしまうことも…。
気持ちよく仕事をしながら、最適なUIを考えるためにも、陥りがちな盲点を知っておくといいですね。この本では、仕事をするうえで、人間の想像力や謙虚さなど、こころに留めておきたいことが書かれています。

UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために

原田秀司(著)

出版社:翔泳社(2022/04/13)

Amazonカスタマーレビュー3.9(2022/5/31現在)

Career advice

転職のアレコレをプロに相談!
キャリアアドバイス

「今のままで本当にいいのか」と漠然とした不安や焦りをお持ちの方も、ウェブスタッフにお気軽にご相談ください。あなたの今のスキルやキャリアに対する心配ごとなどをお聞きして、将来を見据えたキャリアアドバイスを行います。

お申込みはこちら


予測不可能な時代。後悔のない人生の歩み方~イチ押し本『LIFE SHIFT2: 100年時代の行動戦略』

沈黙が気まずい…。質問の工夫で、意見交換はこんなに活発に!~イチ押し本『問いかけの作法』

後輩や新人へ教えるのが難しい、ビジネスマンの基本~イチ押し本『入社1年目の教科書』

  • 自分に合った働き方を見つけたい!8月・9月就業に向けて今から準備する
  • ウェブスタッフは、セパタクロー日本代表 小林裕和選手を応援しています!
  • Node.js古川陽介氏×ニジボックス若手エンジニアが語り尽くした!“2022年のフロントエンド技術トレンドとキャリアの歩み方”レポート
  • 未経験からWeb業界への転職準備

人気の記事

フロントエンドとバックエンドとは?意味の違いとエンジニアの仕事

1

Reactとは?フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説!

2

UI/UXとはどういう意味?それぞれの違いと特徴まとめ

3

Webエンジニアの仕事内容と必要なスキルとは?転職活動のポイントやキャリアパスをご紹介

4

コーダーの仕事とは?コーディングに必要なスキルや年収を徹底解説!将来性を高めるためには?

5

フロントエンドとバックエンドとは?意味の違いとエンジニアの仕事

1

Reactとは?フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説!

2

UI/UXとはどういう意味?それぞれの違いと特徴まとめ

3

Webエンジニアの仕事内容と必要なスキルとは?転職活動のポイントやキャリアパスをご紹介

4

コーダーの仕事とは?コーディングに必要なスキルや年収を徹底解説!将来性を高めるためには?

5

あなたのライフスタイルに合わせて働きたい方は、WSハケン 1つの会社で長くはたらきたいかたは、WSキャリア

Career advice

転職のアレコレ。プロに相談したい方へオススメ!

最新のIT・Web業界動向を知るキャリアカウンセラーが行う
「キャリアアドバイス」

ある程度経験を積んだので次のステップにキャリアアップしたい、しばらくWeb業界を離れていたが再度業界に戻りたい、 未経験・経験浅めだがどのように転職活動を行っていったらいいかなど、ウェブスタッフでは様々なご要望に対応したキャリアアドバイスを行っております。

お申込みはこちら

ウェブスタッフが運営するサイトでは、利便性向上・分析・広告配信等のためにCookie等のデータを使用しています。当社が取得したアクセスデータとの関連付けの削除(オプトアウト)に関しては「個人情報の取り扱いについて」をご覧ください。

同意して閉じる

確認する

WEB STAFF ウェブスタッフ株式会社

ウェブスタッフは、IT・Web業界専門の求人を取り扱う人材エージェントです。
IT・Webクリエイター・エンジニアの派遣・転職はお任せください。在宅勤務・フリーランスへのキャリアチェンジもサポート。

ページトップへ ページトップへ