TechTrainにはさまざまな技術領域に長けた ITエンジニアのメンターが約140名所属しています。そんなメンターの方々から、「その技術、いま学ぶならどう学ぶ？」をテーマにインタビューした結果から、分野別の学習ロードマップにまとめてご紹介します！

アプリケーションの開発において「デザイン」と言っても、様々あります。今回ロードマップとしてお伺いしたのは、中でもtakanoripさんが得意とする「UIデザイン」をメインとした内容です！
また、”デザインロジカルに考える”というtakanoripさんならではのデザインの学習ロードマップとなっておりますので、より良いUIデザインを作りたいという方は、最後までご覧いただき開発の中で実践してみてくださいね。

UIデザインとは？

UIとは、ユーザーインターフェースの略で、「ユーザーとの接点、つなぎ目」を意味します。

ユーザーとサービスをつなぐ役割を持つUIデザインは、大きくわけると、4つの観点で捉えることができます。それは、情報デザイン、画面デザイン、ユーザビリティ、インタラクションデザインです。

「UIデザイン」というと、”情報をどう伝えるか？”の画面デザインをイメージするかと思いますが、サービスとユーザーをつなぐという観点では、”誰に”、”どんな風に”、”どういう状況で”情報を届けるのか？を考えたデザインの全てを「UIデザイン」といいます。

早速、takanoripさんのおすすめの学習ロードマップをみていきましょう。

TechTrain流学習ロードマップ

おすすめのコンテンツを9つご紹介！

学習の進め方

”デザインをロジカルに考える”takanoripさんらしい、エンジニアがデザインについて学ぶためのステップが整理されたロードマップになっています。

ここでは、体系的に学ぶことができるように以下の流れでロードマップを引いています。

情報デザインを学ぶ
画面デザインを学ぶ〜Webアクセシビリティ〜
画面デザインを学ぶ〜UIデザイン〜
ユーザビリティを学ぶ〜認知科学・認知心理学〜
インタラクションデザインを学ぶ

「なんとなくこういうデザインにしよう」というところから、意図を持ってデザインすることができるようになるには、その意図を表現するための知識が必要不可欠です。

自分でデザインができるようになる前に、まずは、なにかしらデザインされたものを見た時に、デザインした人の意図のようなものをなんとなく推測できるようになるところからがスタートラインです。具体的なイメージでいうと、スマホでアプリを触っているとき、「このボタンがここにあるのは、こういう事情や意図があってここに置いてあるのかな？」など推察ができるようになるといったようなイメージです。

ただ、このように意図の汲み取りをできるようになるには、知識のインプットだけではなく、たくさんのデザインに触れる機会も必要です。ぜひ、ロードマップを進めながら、生活の中で何気ないもののデザインに込められた意図を意識してみてくださいね。

情報デザインを学ぶ

まずは、「何を伝えるか？」の情報デザインをするにあたり必要な情報設計から。情報設計に特化した書籍というのは、実はそう多くありません。

情報をユーザーに伝えるために、どう組み立てるかというところにフォーカスされていて装飾の話は出てきません。ただ、この機能はここに置いた方が良いな、機能の説明はここにおいた方が良いななどUIデザインをする時に、まずは情報設計が必須知識となります。UIデザインの前準備として、最初に知識をつけておきましょう。

①今日からはじめる情報設計

情報を整理整頓するための考え方と心構えを7つのステップに分けて解説する情報アーキテクチャ(IA)の入門書。まずは、ここからUIデザインの学習をスタートしましょう。

②IA100

表紙にある“Webサイトと人をつなぐ”が、まさにtakanoripさんのいうUIデザインそのもの。伝えるための情報アーキテクチャ(IA)の全体像を理解するための100の要素が載っています。

“エンジニアは、常に情報設計に向き合っていると思います。読みやすいコードを書くとき、機能の全体像をみて、コードの順番や分割はこうしよう、関数はこういう風に分割しようというような意識をしていますよね。情報設計は、その考え方と似ています。それをUIやプロダクト開発に応用していけるので、最初のステップとして最適だと思います。

by takanoripさん”

画面デザインを学ぶ〜Webアクセシビリティ〜

Webアクセシビリティは、情報デザインと同様に、UIデザインをする上では避けて通れない必須知識。アクセシビリティは、「情報を伝えるための基本知識」といえます。デザインを作るための避けるべきBADパターンである、見づらいコントラスト比や、読みづらい文章のレイアウトなどのことです。例えば、文章内で誘導リンクをおく時に「◯◯はこちら」の”こちら”部分だけをリンクにするとわかりづらいよね、といったこと。
最初に、避けるべきBADパターンを基礎として学ぶことで、より効果的にUIデザインの勉強ができます。

③ウェブ・インクルーシブデザイン

よりたくさんの人にわかりやすく、使いやすいデザインをするために必要な考え方がまとまった一冊。

④Webアプリケーションアクセシビリティ

Webアクセシビリティの基礎「HTMLとWAI-ARIA」を解説から、「フォーム」、色やテキストなどの「UIデザインの基本」、モーダルダイアログや通知などの「少し複雑なUIパターン」の3つに分けてWebアクセシビリティを解説しています。よくある事例を元にしていて、この1冊でより実践的にアクセシビリティを学ぶことができます。

“ここまでお話ししてきた情報設計・Webアクセシビリティは、プロダクト開発の中でデザイナーとエンジニアが協業することが多い分野です。知識をつけてデザイナーとコミュニケーションができるようになると、ガッツリデザインができる！という人でなくてもデザイン寄りの仕事に活かすことができるので、より仕事の幅が広がるのではないかなと思います。
by takanoripさん”

画面デザインを学ぶ〜UIデザイン〜

「何を伝えるか？」、「情報を伝えるための基本知識」を身につけたところで、「UIデザイン」に取り掛かります。ここまでくるとUIデザインで手を動かすことができるようになっているはず。UIデザインに関する本はいくつか出版されていますが、書いてあることは大きく変わらないので、自分が読みやすい本を選ぶと良いと思います。選ぶ時に気をつけることは、最初はあまり文字が多くなくビジュアルの説明が多いものを選ぶこと。迷ったら手にとって欲しいおすすめの本は次の2冊です。

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

価格がお手頃な点も魅力的な上、中身も網羅されていて、UIデザインを始める入門本としてイチオシの1冊。数年前に出版されていますが、時代に左右されず良い情報が載っている良書。

⑥縁の下のUIデザイン ──小さな工夫で大きな効果をもたらす実践TIPS＆テクニック

UIデザインに関する引き出しを増やすために活用する中級者向けの書籍。タイトル通りTIPS形式でより良いデザインの方法が載っています。HOWがたくさん載っていますが、UIデザインを学び始めに読むと、そのTIPSをどこで活かすかわからないなと感じてしまうので、⑥に持ってきています。⑤『はじめてのUIデザイン改訂版』までで紹介してきた「デザインとは何か」を知ってから、さらにいいUIデザインにするにはどうしたらいいかという悩みが出てきた時に読みましょう。

“⑤『はじめてのUIデザイン改訂版』までくると、「なんとなく一人でUIデザインができる」ようになります。そして、⑥『縁の下のUIデザイン ──小さな工夫で大きな効果をもたらす実践TIPS＆テクニック』まで学ぶと「なんかイケてないかも…をアプデできる」ようになってきます。

ここから先は、本を読むだけでなく自分で何か作ってみることが重要です。インターネットで題材を見つけたりして、たくさんアウトプットをしましょう！

by takanoripさん”

ユーザビリティを学ぶ〜認知科学・認知心理学〜

ユーザビリティは、単なる「使いやすさ」を表す指標ではありません。ただ、現時点で確立された定義はまだありません。ただ、「プロダクトを届けたいと思っているユーザーが、また使いたいと思える」UIデザインを考えるために、非常に大事なことです。UIデザインのブラッシュアップをするためには、自分でアウトプットができるようになったこのタイミングで学ぶのがおすすめです。より具体的なHOWの書籍と概念を学ぶ本をそれぞれ紹介します。

⑦インタフェースデザインの心理学第2版

科学的な観点に基づいた人間の思考や行動に合ったデザインをするための必読書。例とともにTIPS形式で書かれており、これを読むと、⑥『縁の下のUIデザイン ──小さな工夫で大きな効果をもたらす実践TIPS＆テクニック』のHOWがなぜ良いデザインなのかの根拠や背景を理解できます。

⑧新版アフォーダンス

今まで紹介してきた本に比べると、抽象的な内容がメイン。UIデザインを学ぶ文脈でご紹介をしていますが、デジタルを前提に書いている書籍ではありません。

どんなことが書いてあるかというと、例えば、「ドアノブって、なんで回したり押したり、つい触りたくなっちゃうのか」のような話。

日常にあるものに対して「何気なく触ってるけど、それがなんでそういう行動を起こさせるのか」を知ることで、この行動を促すためのUIデザインをするとしたら、こういうデザインはどうか？とイメージを膨らませるための知識としてピッタリな本といえます。

実務に直接役立つかというと難しいところですが、今世の中にない新しいプロダクトのUIデザインや、斬新なUIデザインを考えるシチュエーションがきたら、この書籍の知識があると良いデザインができると思います。

“⑦『インタフェースデザインの心理学第2版』までは、割と実践的な内容ですが、⑧『新版アフォーダンス』は、ここまで学習してきたUIデザインから、もう少しはみ出して、「なんでこれがこう触ってみたくなるんだっけ。」みたいなデザインのもっと根本の話に興味が出てきたら、読んでみると面白いと思います。人によっては、知的好奇心を満たすだけになる可能性もあるので、面白そうだなと思ったら読むぐらいでいいんじゃないかなとは思いますね。笑

by takanoripさん”

インタラクションデザインを学ぶ

インタラクションデザインとは、ユーザーの操作・動作によって生じるシステムの変化・反応という、具体的な「やりとり」をデザインすることを指します。例えば、ユーザーがこのアクションをしたら、こんなフィードバックを返しましょうというようなユーザーとプロダクト上でのやりとりというとイメージが沸きやすいでしょうか。では、ロードマップの最後の書籍を紹介していきます。

⑨ABOUT FACE: インタラクションデザインの本質

インタラクティブデザインを考える上で効果的で実践的な方法（デザイン原則・デザインパターン・デザインプロセス）を解説している1冊。
実はこの本、「インタラクションデザインの本質」と言いながら、デザインに関する様々な分野に関して書かれている本で、とってもおすすめ。実務で活かせる実践的な学習をするなら⑧『新版アフォーダンス』よりも、こちらを読む方が良いのですが...なにせ鈍器くらい分厚い。先に手にするとそのビジュアルから心が折れてしまう方もいるのかなと思い最後に紹介しています。
とにかく読むのに時間がかかる本なので、まずは、興味がありそうなところからちょっとずつ読んでいくような辞書的のような使い方をすると良いでしょう。

“本当に分厚くて、1番最初に手を出すと心折れると思うので、ある程度知識が身についてきてから読んでください。おすすめの購入タイミングは、⑤『はじめてのUIデザイン改訂版』を読み終わった後ですね。そのタイミングでとりあえず買っておいて、中身は読まなくても本棚に置いておく。ある程度知識がついてから興味のあるところから読み始めて欲しいです。
デザイン系の本は、内容が古くなることはあまりないので、絶版する前に買っておいてほしい。この書籍もかなり昔の本ですが、何度も翻訳されて、時代に合わせてコンテンツを追加して今でも読まれている本なので、手元に置いておいて損はないと思います。
by takanoripさん”

参考書籍

ソフトウェアエンジニアのためのUIデザイン概論

本ロードマップは、takanoripさん執筆『ソフトウェアエンジニアのためのUIデザイン概論』を参考に編集した箇所があります。

この本はWebエンジニアのために「UIデザインとは何か」「なぜUIデザインを学ぶのか」について、UIの歴史や心理学の観点から解説しています。バックグラウンドを知ることでUIデザインをより深く考えるきっかけになるような書籍です。

まとめ

ここまで、9つのコンテンツを紹介してきましたが、いかがでしたか？

最後に、takanoripさんからこのロードマップを通して、デザインの勉強をする上で大事なことをひとつお伝えします。

それは、「フィードバックをもらうこと」。

デザインは「できた」だけではダメで、他の人から見て「いい感じ」かどうかが大事。アウトプットをゴールにせず、フィードバックをもらうためのアウトプットという意識をして実際に自分で手を動かしてみてください。

“デザインにおいては、アウトプットを公開してからがスタートライン。そこからフィードバックをもらうことによって、それをより使いやすかったり、より見やすいように改善することで、だんだんレベルアップしていきます。まずは、自分で作ったデザインにフィードバックをもらうところからやってみてください。
by takanoripさん”

TechTrainでは、プロのUI/UXデザイナーのメンタリングを提供中です。UIデザインのレベルアップをしたいエンジニアは、活用してみてくださいね。今回ロードマップを紹介してくれたtakanoripさんへの相談も可能です！

TechTrain流 学習ロードマップ - Flutterの学び方

この記事に登場するメンター

あなたは何タイプ？無料でエンジニアタイプ診断を受けてみよう

TechTrain流学習ロードマップ - Flutterの学び方