もっと早く知りたかった！ 認知心理学による使いやすいUIデザイン、実務に役立つ知識をしっかり学べるデザイン書 -UIデザイン必携
Post on:2022年4月28日
sponsors
WebサイトやスマホアプリのUIデザインについて、実務に必要な役立つ知識と情報をさまざまな角度から学べる解説書を紹介します。
「わかりやすいUI」「使いやすいUI」ぼんやりと分かっているけど、うまく言葉にできない、明確に整理できていない、UIデザインの考え方を学びたい人にお勧めです。国内外の実例も多数掲載されており、非常に分かりやすい解説書です。
本書は「UIデザインの教科書（紹介記事）」を大幅にリニューアルしたもので、2022年最新の環境にあわせて、構成および内容は全面的に刷新されています。デザイナーやディレクターをはじめ、デベロッパーやコーダーなどUIに携わるすべての人にお勧めします。
本書は先日発売されたばかり！
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デザインについてロジカルに学べる本書はかなり貴重だと思います。
献本の御礼
最後に、献本いただいた著者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
