1冊は持っておきたい！UIデザインや人間の認知についてしっかり学べるデザインの解説書 -UIデザインの教科書

Post on:2019年2月1日

sponsors

UIデザインの考え方を学びたい、UIデザインを説明するためのロジックを学びたい、使いやすい・分かりやすいとは具体的にどうデザインすればよいのか、そんな人にかなりお勧めの一冊を紹介します。

UIデザインや人間の認知について知りたいことがすぐに分かり、役立つと思います。

UIデザイナーやディレクターだけでなく、UI制作に関わるすべての人にお勧めです。
本書は2013年に刊行された「UIデザインの教科書」の新版で、2018年の最新環境にあわせて、構成および内容を全面的に書き直しされたものです。

UIデザインの教科書 [新版]
マルチデバイス時代のインターフェース設計
ISBN978-4-7981-5545-6
[Amazonでみる]
[楽天でみる]

Kindle版は値段が少し安く、お得です。

紙面のキャプチャを少しだけご紹介。

本書は7章構成で、UIデザインの基本的な考え方、デバイスごとの違いやルール、人間の認知特性、実際のUIデザインのロジックを具体的な事例を見ながら学ぶことができます。

UIデザイン業界の歴が長い人ほど、Webサービスといえばデスクトップで見るWebサイトをデザインすることだったという人が多いでしょう。最近ではそのWebサイトもスマホで見ることも増え、TVで見たり、スマホのアプリだったりとその幅は広がっています。

本書ではPCのデスクトップだけでなく、スマホ、タブレット、TV、4つのデバイスを対象にマルチデバイス時代のインターフェイス設計について、UIデザインを学べます。

1-3章では、デバイスごとのハードウェア的な特徴とソフトウェア的な特徴を学びます。入力方法・画面のサイズ・画面との距離や視角・搭載されているOSやフォントなどが実例と図解と共にまとめられています。

UIやUXを考える上で必要なのは、人間の認知特性です。4章では、色・形・動きから人がどのような認知特性を備えているのか、適切なインタラクションにするにはどうしたらよいのかが学べます。

例えば、送信ボタンのデザイン。
右の文字だけではボタンと認識しにくく、考える必要があり、ユーザーの精神的な負荷が高まります。左のように一目でボタンと分かるデザインにすることで、この精神的な負荷が低くなります。

5章ではアプリやWebサイトの具体的な設計手法について学べます。コンテンツは通常、前後、縦、横方向に繋がりがあり、どのようにリンクを張り、移動するのかが重要です。最近ではアプリでもWebサイトでもこの遷移表現にさまざまな工夫がされています。

普段使用しているアプリやWebサイトにも、たくさんの気づきがあるでしょう。親と子の移動でもAppleのサイトのようにビジュアル的に見た目で伝える方法やiOSの設定にあるようなスライドを使った動きで伝える方法など、事例が豊富に解説されています。

インターフェイスのデザインでは、現在地の表現も重要です。ユーザーに階層を伝え、今見ているコンテンツがどこにあるのか正確に理解できる情報を提供する必要があります。例えば、ナビゲーションのように並べた要素から現在地を目立たせる方法は、大別すると5種類しかありません。

6章では、ナビゲーションとインタラクションについて解説されています。使いやすいインターフェイスをデザインすることとは、目的を達成するために、どのようなナビゲーションを、どのようなインタラクションで実現するのが最適であるかを考えることです。

ヘッダ、フッタ、カラムと左右ナビゲーションなど、スマホやWebサイトでよく利用されるインターフェイスもそれぞれごとに詳しく解説されています。

最近ではコンテンツをスクロールするだけでなく、スマホのような縦長スクリーンに適したページングも求められています。ページングはスクロールとは異なり、ページごとの区切りがはっきりと存在します。

最後の7章では、デザインガイドラインやミニマルデザインなど、デザインを形にするうえで知っておくと役立つ情報が解説されています。マルチデバイスでデザインする要点を押さえておきましょう。

UIデザインの教科書 [新版]の目次