3日前に「はじめてのUIデザイン」という本を買ってみました！

きっかけは、フォロワーさんの多くがこの本の発売イベントに申し込んでいたからです。

この本の存在は4月ぐらいからなんとなーく知っていたのですが、以前読んだUIデザインに関する書籍とそんな内容変わらないかな？と思い、無意識にスルーしていました…。

結論から言うと、買ってよかったです。私のようなUIデザイン学びたての人が理解しやすいように、基本的なところから丁寧に説明しようとしてくださっているのが伝わりました😢✨

バイブルにしたいくらい良かったので、私なりに学べてよかったポイントをネタバレしない程度にまとめていこうかな～と思います！PDFで一部公開しているので、こちらで軽く読んでみるのもアリです👍

・・・・・

▼目次
各章で学べる内容（要約ver.）
１.　はじめに
２.　UIの「見える部分」を学ぶ
３.　UIの「見えない部分」を学ぶ
４.　UIが「機能する環境」を学ぶ
５.　UIをデザインしてみよう
６.　UIデザインができたら
７.　UIをデザインする前の心得
全体を通して良かったポイント
個人的に「知れてよかった」と感じたポイント
最後に

各章で学べる内容（要約ver.）

全部で7章あります。各章でどんなことがわかるのか、私なりに噛み砕いてまとめてみました💡

１.　はじめに

🌟POINT
・ この本で学べることの説明
・ UIデザインの歴史
・ UIデザイナーは何をする人なのか
・ UIデザイナーが関わるメンバー

２.　UIの「見える部分」を学ぶ

🌟POINT
・コンポーネント（パーツ）の種類、役割、どのようなシーンで使えばいいのか、注意が必要な場合の紹介
・ビジュアル要素の基礎（UIデザインver.）

３.　UIの「見えない部分」を学ぶ

🌟POINT
・情報設計とはなにか？
・ユーザーがアプリを使って目的を達成するまでの道のり（シナリオ）の作り方
・目的達成するための手がかりを見つけやすくする、コンテンツの分類方法
・コンテンツごとに「ユーザーが何をみてどう行動するのか」を整理し、図式化するまでのやり方
・ペーパープロトタイプの作り方

４.　UIが「機能する環境」を学ぶ

🌟POINT
・アプリの様々な操作方法、ガイドライン、画面サイズの紹介
・ iOSデザインとAndroidデザインの違い、気を付けるべきポイント
・サイズを表す単位（dp、sp、dpi、pt）について
・Webサービスとアプリとの違い、効果的なレスポンシブデザインの設定方法

５.　UIをデザインしてみよう

🌟POINT
・3章で作った情報設計をUIに落とし込む方法
・UIを作るときに必要なツールの種類、ツールを使ってできること、連携サービスの紹介
・一貫性のとれているUIデザインについて
・どのような思考やテクニックが挟まれているかを、実際の制作の流れとともに紹介

６.　UIデザインができたら

🌟POINT
・ユーザー体験をデザインするために必要な「画面遷移」と「インタラクション」を考えるときに必要なこと
・エンジニア、カスタマーサポート、マーケティング、広報などの人たちにどうやってデザインを伝えるか、便利なツールの紹介
・デザインシステムを作るときに大切なこと、誰が見てもわかりやすいデザインデータの作り方、数字（データ）の見方

７.　UIをデザインする前の心得

🌟POINT
・新しいサービスを作るときに意識しておきたいこと、bosyu（SNSを使ったカンタン募集サービス）・IRIAM（バーチャルライブアプリ）の事例
・価値あるサービスを作るために必要なサービスコンセプトの検証→評価→判断のポイント
・ サービスロゴを作るときの心得
・これからUIデザインを始める方へのメッセージ

・・・・・

全体を通して良かったポイント

① 図や写真付きの説明

文章だけではなく写真や図があったおかげで、抽象的な内容でもスッと理解することができました。

コンポーネントの説明画像

コンポーネントの存在意義の図

TwitterアプリのUIフロー図

※一般公開されているPDFから抜粋しています

② 具体例を用いた説明

この本では架空のサービス（音楽アプリ、スペースレンタルアプリ）を題材にしてUIデザインがどうやって作られていくのかを追って説明してくれています。
実際の仕事の様子をイメージしながら読み進められるので、例えがあるとないとで全然違うな～って思いました！（理解力が乏しいのでとても助かりました😅）

③ 実際に現場で使われているツール・サービスの紹介

SkecthやAdobe XDの存在は知っていましたが、デザインデータをエンジニアと共有するときに便利なサービスであったり複雑なインタラクションをつけられるアプリは知りませんでした…。今は必要ないかもしれませんが、実際に働くようになったときに知っていたほうが良い情報だなって感じました。

・・・・・

個人的に「知れてよかった」と感じたポイント

① サイズを表す単位（dp、sp、dpi、pt）の違い

「なぜpxじゃなくてptがフォントのサイズに使われているんだ？」ってずっとモヤモヤしてて、調べてもわかりやすい説明を見つけられなかったため非常に助かりました。✨

② ターゲットの違いによるユーザビリティの例

「女性がメインターゲットだったらこういう工夫をする」といった内容から、「サービスによって「使いやすいデザイン」というのは異なるんだな」ということがわかりました😌

③ シナリオは「実現できるかどうか」を考えずに書いていく

私はアイデア出しをする際「これって現実的じゃないかも…」と考えてしまい、手が止まってしまうことが多かったです。「まるでペルソナが何でも思い通りにできるかのようにシナリオを作る」というところを意識していきたいな～と思いました！

④ ユーザーシナリオ、コンテンツの分類軸、フロー図、ペーパープロトタイプの作り方（3章の内容）

この部分が一番ありがたかったです！！！自分で架空のサービスを作る際に参考にしたいと思います。

⑤ IRIAMのロゴがどうやって作られたか（プレゼン資料）

UIデザインとはあまり関係ありませんが、このプレゼン資料を見てロゴに隠された面白さに気付きました…！19案ひとつひとつにちゃんと言語化された意味があるんですね💭 決定したロゴもかわいい。

・・・・・

最後に

UIデザイナーとは「ビジュアルをレイアウトする人」ではなく「デザインを検討し、デザインを伝達できる人」ということをこの本から学びました。本質的なところなので、日々意識していきたいです😊

この本で学んだことをインプットで終わらせたくないので、Cocoda!のサービスお題を情報設計からやってみようと思います！その過程も近々noteに書いていくので、よかったら読んでください😶