エンジニアが「UIデザインの教科書」を読むべき３つの理由

みなさん、いかがお過ごしでしょうか。フロントエンドチームのY.I.です。今回は『エンジニアが「UIデザインの教科書」を読むべき３つの理由UI』と題して、書籍「UIデザインの教科書」をエンジニアの目線から紹介させていただきます。

f:id:toranoana-lab:20210127190440p:plain

書籍情報

書籍名	UIデザインの教科書［新版］マルチデバイス時代のインターフェース設計
発行日	2019年01月21日
著者	原田秀司
発行所	翔泳社
ISBN	9784798155456

www.shoeisha.co.jp

どんな内容？

UIデザインを考える上で基本となる知識が身につく本です。対象者は「Webサイトやアプリの制作・開発に直接関わる初心者から中級者」とされています。

本書は大きく４つのステップに分かれており、順番に読んでいくことでUIデザインの知識を体系的に学ぶことができます。内容はUIデザインの概念・前提知識から始まり、設計方法、各種技法へと進んできます。この１冊を通して、確かなUIデザインの基礎を身につけることができます。

f:id:toranoana-lab:20210127201359p:plain — p.8: 本書の構成。大きく4ステップで構成されており、順番に読み進めてもよいし、気になった章だけ読んでもよい。

こんな方にオススメ！

本書の対象読者に「Webサイトやアプリの制作・開発に直接関わる初心者から中級者」とあるように、本書はUIデザインを学びたい全てのWebデザイナー、エンジニアに対してオススメできます。

特に私が強く推したい対象読者は、「UIデザインを学びたてのエンジニア」です。理由としては「デザインの根拠となる背景が丁寧に書かれているため、腹落ち感が強く、実務に生かしやすい」という点が挙げられます。

全体の構成の話になりますが、本書は全７章から成る構成のうち、３つの章を「UIをデザインする上で最も必要となる前提知識（2章: 物理的な制約、3章: ソフトウェアの影響、4章: 人間の認知特性）」に対して割いています。このことから、本書がUIデザインをする上での論拠となる背景に重点をおいていることがわかります。

エンジニアにとって、デザインをすることには「センス」が求められると感じられるかもしれません。しかし本書の２~４章を通して、UIデザインにはセンスではなく知識（理解）が必要であることが実感できます。そのため、UIデザインを学びたてのエンジニアにとって、本書はデザインセンスに対する不安を取り去ってくれる一冊となるでしょう。

エンジニアが「UIデザインの教科書」を読むべき３つの理由

次に、私が実際に読んでみて素晴らしいと思った点を「読むべき理由」として３つ書かせていただきます。

1. 書籍としてとても読みやすい

まず一つ目は、この本自体がとても読みやすく作られているため、ストレスフリーに読み通すことができる点です。レイアウトや色使いといったデザイン的な要素だけでなく、文章に関しても簡潔でわかりやすい表現となっており、まるで本書自体がデザインや文章の重要性を体現しているかのようです。優れた文章の例として、p.076 で述べられている「一貫性のメリット」について見てみると、文章表現の分かりやすさが伝わると思います。

一貫性があることのメリットは、まず最初に、デザインの意味や操作をユーザーが予測できるようになるということです。ひとたびサービスでの...（中略）
一貫性のメリットの2点目は、機能の追加や改善が簡単になることです。一から考え直すことなく、既に存在するルールに従って....（中略）
メリットの3点目は、信頼性が生まれることです。ずっと同じ規則性に縛られた世界では、秩序ある一貫性が安心感を生みます。上に例で挙げたAndroidや...（中略）

引用：p.76 「4-3: 一貫性」より

一つ一つの文にて主語・述語の関係が分かりやすく盛り込まれており、読み手にとってとても負担の少ない文になっていることが分かるかと思います。また一つの論題に対して順番を列挙して説明されているため、予測可能で読みやすい文章となっています。普段から技術文章を読み慣れているエンジニアにとって、本書はストレスフリーでありがたい存在です。積読にするつもりが、いつの間にか読み終わってしまっていることに気づくでしょう。

2. 優れたUIデザインの知識がまるっと身に付く

二つ目に素晴らしいと感じた点は、UIデザインの基礎となる知識がふんだんに盛り込まれている点です。これにより、実務でデザインをする上で必要な考えを身に付けることができます。

例として、４章で書かれている「4-2: インタラクションコスト」の箇所を見てみましょう。ここではデザインを考える上での一つの要素として、ユーザーが受ける負担（インタラクションコスト）に関して、そのコストを下げることの重要性を説いています。

インタラクションコストの１つである精神的な負荷とは、アタマが支払うエネルギーのことです。ユーザーが考えたり、判断したり、あらゆる精神的な活動を行ったときに発生する負荷（負担/労力/コスト）に相当します。ユーザーが...（中略）...ボタンの場合でも、見ただけではっきりとボタンだと認知できる場合と、そうでない（考える必要がある）場合とでは、ユーザーの受ける負荷は変化します。

引用：p.73 「4-2: インタラクションコスト」より

このようなUIデザインに関わる前提知識が、本書では数多く提示されています。実務で迷った際も、これらの基本知識に立ち返ることで問題を解決することができるでしょう。

3. ユーザーの目線でデザインを考えることができるようになる

三つ目は、常にユーザーの目線で解説をしている点です。この姿勢は、UIの設計方法に関して述べている５、６章に強く現れています。ここで著者は一貫してユーザー目線での設計を行う姿勢を崩しません。例として、「5-6: わからないとは何か」を見てみましょう。ここでは「わからない」というユーザーの気持ちに寄り添い、それを踏まえて設計することの重要性を説いています。

見た目の格好良さやトレンドの基準というものは時代とともに移り変わって行きますが、根底にあるユーザーのニーズというものは変わりません。ユーザーがいつも必要としていることは、どこを操作すればどこに行けるかを知り、情報を見つけて、それを読むことだからです。（中略）しばしばユーザーが直面する「わからない」という理由を突き詰めると、結局のところ大きく２つの要員に集約されます。「場所がわからない」か「操作がわからない」、あるいはその両方です。

引用：p.114 「5-6: わからないとは何か」より

また６章では要素別（「ナビゲーション」「インタラクション」「ヘッダ」「フッタ」「パンくず」...）に具体的な設計方法を提示していますが、ここでもユーザー目線での提案がなされています。本書のアドバイスに従うことで、読者はユーザー目線でデザインすることが自然とできるようになるでしょう。