---

ニジボックスのUIデザインフローや案件事例をご紹介！

---

「UIデザイン」という言葉は、今ではビジネスにおいて当たり前に使われる言葉になっています。

「UIデザイン」は単なる「見栄えが良いデザイン」とは違います。見栄えが優先されがちな、いわゆるビジュアルデザイン、グラフィックデザインは、視覚的にイメージを伝えるための表現だといえますが、「UIデザイン」は、ユーザーが直感的、かつスムーズにそのサービスを使いこなすことができるユーザーインターフェースを構築するためのデザインです。分かりやすくいえば使い勝手に特化したデザインといえるでしょう。

今回は、UIデザインについて学びたい、身につけたいというデザイナー、あるいはデザイナーと仕事をともにするプロデューサーやディレクターといった職種の方にぜひ読んでいただきたい本を紹介します。

UIデザインの基本は、ユーザーにストレスを与えないこと

そもそもUIデザインの根本にある考え方は「ユーザーにストレスを与えないこと」にあります。使いにくい、分かりにくい、そういった感覚を生じさせないことが重要なのです。

一つ、UIデザインの例を挙げてみましょう。誰もが買い物をしたことがあるコンビニエンスストアやスーパーですが、最近ではセルフレジも増えています。その多くはタッチパネルで操作しますが、店員が使う画面とはデザインが異なります。

もちろん、機能が違うということもありますが、研修などでレジの取り扱いを訓練している店員とユーザーではレジを操作するための知識量が違います。なので、誰でも迷わずに決済方法を選び、スムーズに支払うことができるデザインが求められます。「デザインが分かりにくいもの（＝UIデザインの考えに基づいていないもの）」だと、どう使ったらいいのか分からないというストレスがユーザーに生じます。その結果、「セルフレジは嫌だ」と不満がたまり、店への印象も悪化します。

また、ユーザーが操作にもたつき、店員がフォローに入ることになり、せっかく効率化のために導入したセルフレジがかえって手間を増やしてしまうのです。

また、コンビニエンスストアといえば、セルフサービスのコーヒー販売においてもUIデザインに関する課題が生じたこともありました。セルフサービスのコーヒー販売は、レジでカップを受け取り、自分でコーヒーメーカーを操作するものですが、サイズの選び方などが分かりにくいという意見が続出したのです。グラフィックデザインの観点では優れたコーヒーメーカーでしたが、店舗側で分かりやすく書き直したシールを貼るなど、対応を余儀なくされました。
このケースは、UIデザインが考慮されていなかった典型の一つだといえます。見栄えを重視したビジュアルデザインばかりにこだわり、使い勝手、分かりやすさを重視したUIデザインへの配慮がなかったのだといえます。

UI、UIデザインについては下記の記事で詳しく解説しているので、ぜひ併せてご覧ください。

UIデザインを学ぶべき理由とは

レジやコーヒーメーカーをはじめとする機器類のデザイン、建物や什器のデザインなどにとどまらず、UIデザインはWebサイト、アプリなどのデザインでも重要です。
ストレスを感じるWebサイトに再び訪問しようとするでしょうか。購入から決済までに手間ばかりかかるECサイトでまた買い物をしようと思うでしょうか。使いにくいWebサイトよりも、使いやすいWebサイトを選ぶのは当たり前です。

今注目されている「UX(User Experience)」の考え方は、ビジネスにおいて欠かせない、注目されている考え方です。そのUXを実現するための大切な要素であるUIデザインは、学んでおく必要があるといえます。

「ユーザー視点」に基づいた「UIデザイン」について学ぶことは、デザイナーだけではなく、ビジネスに関わる全ての方に必要だといえます。

以下では、体系的にUIデザインを学ぶ、あるいは事例からUIデザインの理解を深めるための書籍を紹介していきます。
今では、WebサイトにもUIデザインを解説するサイトがたくさんありますが、書籍で学ぶメリットはまだまだ大きいです。例えば、体系的に学べることや、手元において、いつでも手にとれることなどが挙げられます。

まず読んでおきたいUIデザインの基礎を学ぶ5冊

まずは、UIデザインの入門書といえる5冊を紹介します。デザイナーでなくても、UIデザインの基本が学べる本ばかりです。

1. UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計

UIデザインを学びたい人にとって、まず読んでおきたい一冊です。2013年に初版が発行され、現在手に入るのは2019年に改定された新版です。UIデザインの定義から心理学の影響、UIの考え方を具体的なデザインに落とし込む方法まで、分かりやすく解説されています。特にWebサイトやスマホアプリのデザインに関する解説にページが割かれており、「分かりやすさとは何か」「使いやすさとは何か」を意識するデザインの考え方が理解できるようになっています。

■参考書籍：
翔泳社、原田 秀司 　著 （2019） 『UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計』

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

Webサイトやスマホアプリでの実例を交えて、ハンドブック形式で「UIデザインに迷ったときに役立つ本」です。中身は図版を多用しているため、視覚的に理解できます。経験値があるデザイナーなら感覚的に理解していることを体系的に分かりやすくまとめてくれています。
UIデザインにおける一般的なルールや普遍的な考え方を押さえ、人間の行動心理や習性に基づいたUIデザインを理解できます。実際にデザインをしているときの解決策や、よくある失敗を防ぐヒントも満載です。

■参考書籍：
翔泳社、原田 秀司 　著（2022） 『UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために』

3. はじめてのUIデザイン 改訂版

Amazon Kindle版限定の解説書です。UIの基礎、考え方や初心者のための実践知識がまとめられています。これからUIデザイナーを目指す人、デザイナーと一緒に仕事をする発注側の担当者、ディレクターなどにとって、入り口として分かりやすい本になっています。
この一冊でUIデザインに携わるデザイナーに求められる基本的な知識、ノウハウが身につくように考えられています。執筆したのは、第一線で活躍しているデザイナーの方々です。

■参考書籍：
池田 拓司、宇野 雄、上ノ郷谷 太一、坪田 朋、元山 和之、吉竹 遼　著 （2020）『はじめてのUIデザイン 改訂版』

4. UIデザイン みんなで考え、カイゼンする。

UIデザインを担当するデザイナーだけではなく、Webサイトの構築、Webサービスの開発、アプリ開発に携わる、全ての方に向け書かれたUIデザインの入門書。デザイナーにとっても有用な情報は網羅されていますが、それ以上に、チームとしてUIデザインに取り組む方法、現場でのプロジェクトの進め方まで解説しています。
UIデザイナーがチームの中でどういった役割を果たすべきかまで言及されており、単なるUIデザインの解説にとどまらず、ビジネス書として読むこともできます。

■参考書籍：
エムディエヌコーポレーション、栄前田 勝太郎、河西 紀明、西田 陽子　著 （2019）『UIデザイン みんなで考え、カイゼンする。』

5. UI/UXデザインの原則

UI UXデザインにおける「原則1:ユーザー心理/行動に則って考える」「原則2: ユーザー心理/行動をUI/UXデザインに落とし込む」「原則3: UI/UXデザインにおける三方良しをつくる」の3原則と、それを実践するための法則を軸に解説しています。
この3原則を実現するための法則をそれぞれ解説してくれており、短時間でUI UXデザインのポイントを理解できます。

■参考書籍：
幻冬舎、平石 大祐　著 （2020） 『UI/UXデザインの原則』

基礎は身についている方向けの実践として読んでおきたい4冊

続いて、UIデザインについての知識は一通り持っている方が、一層理解を深め、実践的な知識を身につけるための本をご紹介します。心理学の観点から深掘りされた本もあり、非デザイナーの方にも有益な情報が含まれています。

1. オブジェクト指向UIデザイン──使いやすいソフトウェアの原理

UIデザインの多くは「何をするか」という「行動」を起点にデザインを考えることが多いのですが、この本では「名詞＝オブジェクト」を起点としたUI、オブジェクト指向ユーザーインターフェースを解説してくれています。
デザイン視点での解説ではなく、プログラミング、開発視点のUIデザインの考え方を解説しており、従来と異なる発想、違う角度からUIデザインを考えるための一冊です。

■参考書籍：
ソシオメディア株式会社、上野学、藤井幸多　著、上野学　監修　（2020）　『オブジェクト指向UIデザイン ――使いやすいソフトウェアの原理』

2. 【新版】UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX

今ほどUIデザインという考え方が一般化していなかった、2015年頃までのデザイナーたちの経験と考えをまとめた『UI GRAPHICS』を2018年に再編した新版です。少し古い本に思えますが、世界中の先輩デザイナーによる実例が豊富に紹介されており、「UIデザインの本質」に触れることができる本だといえます。
現在、当たり前とされているUIの考え方の起源も紹介されており、UIデザインの理解を深める際の参考になるでしょう。

■参考書籍：
ビー・エヌ・エヌ新社、安藤 剛、水野 勝仁、萩原 俊矢、ドミニク・チェン、菅 俊一、鹿野 護、有馬 トモユキ、渡邊 恵太、須齋 佑紀、津﨑 将氏　著　（2018）　『【新版】UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX』

3. インタフェースデザインの心理学 第2版 ―ウェブやアプリに新たな視点をもたらす100の指針

1980年代からデザイン、ユーザーエクスペリエンスの研究をしている行動心理学者がまとめたUIデザインの解説書。UIデザインについて、その研究結果から導き出された100の指針を提示してくれています。特に心理学からの視点に重きを置いており、他の解説書を読んだあとに読むと「そういう理由だったのか」とふに落ちることも多いでしょう。続編として『続・インタフェースデザインの心理学 ─ウェブやアプリに新たな視点をもたらす+100の指針』も発売されています。

■参考書籍：
オライリージャパン、Susan Weinschenk　著、武舎 広幸、武舎 るみ、阿部 和也　訳　（2021）　『インタフェースデザインの心理学 第2版 ―ウェブやアプリに新たな視点をもたらす100の指針』

4. だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる

「作りたいWebサイト、アプリ」ではなく、「使いやすいWebサイト、アプリ」を作るという視点で、ほとんどのページにおいて、見開きで「良い例」「悪い例」を並べて解説してくれています。なぜ良いのか、なぜ悪いのかが詳しく解説されていて、実践的な内容になっています。
デザインの改善だけではなく、コンテンツの中身にまで踏み込んで「ユーザー視点」とは何かを掘り下げていますので、デザイナー以外の方にもおすすめです。

■参考書籍：
エムディエヌコーポレーション、香西 睦　著　（2016）『だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる』

UIからUXへ、より深く理解するための3冊

UIデザイン、そしてUXデザインまで思考を深め、より高度な知識を得ていくための3冊です。デザイナーの方もそうでない方も、Web制作、アプリ制作、お客さまとのコミュニケーションに関わる方なら、ぜひ読んでおきたい本ばかりです。

1. UXデザインの法則 ―最高のプロダクトとサービスを支える心理学

UIデザインはUXデザインと密接に関連しています。厳密に分けることも難しいかもしれません。この本では、心理学の観点から「UXデザイン」について、10の法則を解説しています。実例に基づいた解説が多く、実践的でありながら、UXデザインの背景にある考え方を知ることができる本です。
UIデザインからより深いUXデザインに考えを進めるときに手にする一冊としておすすめです。

■参考書籍：
オライリージャパン、Jon Yablonski　著、相島 雅樹、磯谷 拓也、反中 望、松村 草也　訳　（2021）『UXデザインの法則 ―最高のプロダクトとサービスを支える心理学』

2. UXライティングの教科書 ユーザーの心をひきつけるマイクロコピーの書き方

「UXライティング」とタイトルにありますが、原稿を書くライティングというよりも、ボタン上の文字、入力フォームのガイド、エラーメッセージなどの、「マイクロコピー」について解説した本です。マイクロコピーをデザイナーやディレクターが書くことも珍しくないため、デザイナーやディレクターが読んでおくべき一冊だといえます。
世界51カ国で出版されている本でもあり、UI UXに関する考え方を知るために、デザイナー、ディレクター、プランナー、ライター、さらには経営者まで読んでおいて損はないでしょう。

■参考書籍：
翔泳社、仲野 佑希　監修、キネレット・イフラ　著、郷司 陽子　訳　（2021）『UXライティングの教科書 ユーザーの心をひきつけるマイクロコピーの書き方』

3. UXデザインの教科書

この記事の最初に紹介した『UIの教科書』とそっくりのタイトルですが、著者や内容に関連性はありません。しかし、ぜひ並べて読んでほしい本だといえます。「UX」とは何かを体系的に、実例を交えて解説しており、U IUX、そのデザインに関わる全ての人が基礎知識として持っておきたいことを網羅しています。ただ、内容が少し高度なので、『UIの教科書』の内容を理解してから読んだほうがいいでしょう。

■参考書籍：
丸善出版、安藤 昌也　著　（2016）　『UXデザインの教科書』

まとめ

今回は、UIデザインを学ぶときに役立つ書籍12冊を紹介しました。UIデザインを解説したブログなどもたくさんありますが、書籍も、ぜひ目を通しておきたいものです。

ニジボックスでは、サイト制作や開発における情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面のご支援も行っております。

下記資料にて、人間中心設計の考え方をベースとした、UXリサーチ結果に基づくユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。

ご興味を持たれた方はぜひ、ダウンロードリンクよりご参照ください！