もっと早く知りたかった! 認知心理学による使いやすいUIデザイン、実務に役立つ知識をしっかり学べるデザイン書 -UIデザイン必携

WebサイトやスマホアプリのUIデザインについて、実務に必要な役立つ知識と情報をさまざまな角度から学べる解説書を紹介します。

「わかりやすいUI」「使いやすいUI」ぼんやりと分かっているけど、うまく言葉にできない、明確に整理できていない、UIデザインの考え方を学びたい人にお勧めです。国内外の実例も多数掲載されており、非常に分かりやすい解説書です。

UIデザイン必携

本書は「UIデザインの教科書(紹介記事)」を大幅にリニューアルしたもので、2022年最新の環境にあわせて、構成および内容は全面的に刷新されています。デザイナーやディレクターをはじめ、デベロッパーやコーダーなどUIに携わるすべての人にお勧めします。

UIデザイン必携

UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために
ISBN 978-4-798-16962-0
[Amazonでみる]
[楽天でみる]

著者: 原田 秀司
出版社: 翔泳社
発売日: 2022/4/13

本書は先日発売されたばかり!
Kindle版も発売されています。

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

紙面のキャプチャ

Webサイトやアプリに欠かせないのが、UIとUXです。UIとはユーザーインターフェイス(User Interface)の略で、ユーザーがWebサイトやアプリとやりとりするための接点です。UXとはユーザーエクスペリエンス(User Experience)の略で、やりとりから得られる体験のことです。

UIとUXはお互いに深く関係しており、良いUIなら良いUXを提供できますが、たとえば地図アプリでお店を探すときに道データが未登録で遠回りのルートしか表示されないのように、悪いUXをUIでカバーすることはできません。

紙面のキャプチャ

本書はWebサイトやアプリに使用されるさまざまなデバイスを対象に、ユーザーインターフェイスの設計と改善を成功させるための知識とテクニックを学べます。

紙面のキャプチャ

ユーザーインターフェイスを設計するには、人間の認知特性を知っておく必要があります。たとえば、視覚の認知特性を使用したものとしては、色・形・動きなどがあります。たくさんの同じ色の中に、一つだけ異なる色があると、目立ちますよね。WebサイトやアプリのUIにも色数をむやみに増やさず、少数の色だけに絞ってデザインすることで、特定要素に注目させるのが簡単になります。

紙面のキャプチャ

少数の色といってもデザインが寂しくなることはありません。ベースカラー・メインカラー・アクセントカラーの3色で配色するだけで、魅力的なデザインになります。たとえば、Amazonではベースのホワイト、メインのダークブルー、アクセントのオレンジ、3色配色が使用されています。ポイントは、少数の色を中心としてデザインするところにあります。

紙面のキャプチャ

UIは動きや変化によってユーザーは理解して操作することができます。この動きはインターフェイスを支える重要なエッセンスです。リンクをホバーした時にカーソルが変化する、アイテムをタップした時に背景が変化するなど、能動的な変化はユーザーに理解を与えます。

紙面のキャプチャ

人間の認知特性を使用したデザインのテクニックとして、近接もあります。たとえば、同じ要素(または似た要素)が反復で配置されている時、どちらの方向にスクロールするかで、要素間の上下と左右のスペースを調整することで自然に感じられるスクロールの向きがあります。

紙面のキャプチャ

本書は6章構成で、この第4章「構造とナビゲーション」がもっともボリュームがあります。Webサイトもアプリも単一の画面だけではありません。トップページやポータルページがあり、別のページとリンクし合い、配下ページがあり、縦・横・前後の三次元の構造でつながっています。

紙面のキャプチャ

実際の事例が豊富なのも本書の特徴の一つです。AmazonやAppleをはじめ、ユニクロ、日本経済新聞、大塚製薬など、国内外のさまざまなWebサイトやアプリを例に、UIの仕組みやテクニックを学べます。

紙面のキャプチャ

「割り込み」とは、その画面にとどまりながら別のことができるインターフェイスです。ポップアップやツールチップなどのオーバーレイ、クリックやタップで開閉できるインレイなど、別の画面に行き来することがなくなるため、インタラクションのコスト増加を抑えることができます。こういったさまざまなUIのテクニックも実例とともにくわしく解説されています。

紙面のキャプチャ

そのWebサイトやアプリを初めて触ったユーザーが、分からないのは当然のことです。操作が分からない、場所が分からない、状態が分からない、これらの分からないときの要因、どうすれば分からないを回避して分かる状態になるのか、紐解きます。

紙面のキャプチャ

分かりやすいというのは、使いやすい、直感的である、という言葉に置き換えることができます。Webサイトやアプリのインタラクションのコストを下げるには、使いやすいインターフェイスを提供することにあります。使いやすくするには3つのポイントがあり、その1つが「シンプルさ」です。AppleやGoogleもこのシンプルさを実現したUIを提供しています。

UIデザイン必携の目次

UIデザイン必携の目次

UIデザイン必携の目次

UIデザイン必携の目次

UIデザイン必携の目次

UIデザインについての解説書は今でこそ増えてきましたが、UIデザインの考え方から、認知特性によるインターフェイス設計、環境による影響、サイトやアプリの構造とナビゲーション、使いやすい・分かりやすいとは具体的にどうデザインすればよいのかなど、UIデザインについてロジカルに学べる本書はかなり貴重だと思います。

UIデザイン必携

UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために
ISBN 978-4-798-16962-0
[Amazonでみる]
[楽天でみる]

著者: 原田 秀司
出版社: 翔泳社
発売日: 2022/4/13

献本の御礼

最後に、献本いただいた著者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

sponsors

top of page

©2022 coliss