誰でもつくれる！UIデザイン入門 機能するUIの基本と実践 Compass Design

ななうみ(著者), かいわれ(イラスト)

• 販売会社／発売会社: マイナビ出版
• 発売年月日: 2020/07/30
• JAN: 9784839972820

商品レビュー

2022/11/09

カバーがかわいいので、ライトな感じを想像したけど、中身はとても実践的。

今まで整理できていなかったデザインをうまく要素分解してる。

個人的には階層構造の話と、アニメーション活用の話が新しかったです。

もちろん基礎もしっかり書いてありました。

2021/11/16

イラスト入りでとても読みやすくわかりやすい！オススメ。
入門といってるが、デザインの必須要素がすべて詰まってる。

●基本編
よいUIを構成する３つの観点＝認知、操作、感情。
UIデザインの3ステップ＝情報の整理、要素の配置、意匠。

●IA・レイアウト編
メッセージを決める、どうなってほしいか決まる、どう伝えるか決まる、効果的なレイアウトになる
誰がどんな文脈で使うか、一般的なUIになっているか
要素の洗い出しと優先順位
体験設計
デバイスの特性を把握（タッチパネル、マウス、リモコンなど）操作方法、OS、画面サイズ等の特性
人間の特性を把握する。視線の動き、適切なリスト数、読みやすい行数、第一印象、
レイアウトで機能させたい点＝理解度の向上、操作性の担保、印象値の保守
理解度の高いレイアウト、認知コストを下げる、要素をまとめる、冗長性を緩和、次の行動を明示する
方針次第でレイアウトは変化する

●オブジェクト・造形編
要素は５つ＝線、面・枠、アイコン・記号、写真・イラスト・動画、文字
オブジェクトの造形の意味
オブジェクトの機能・役割と特徴

●フォント・カラー編
認知的機能と心理的機能
フォントの誘目性と判読性
コンテンツとフォントの親和性
ゴシック体・サンセリフ体、明朝体・セリフ体、手書き書体、デザイン書体
色の誘目性と視認性
色の３要素＝色相、彩度、明度
有彩色と無彩色、暖色と寒色、膨張色と収縮色

●レイヤー・アニメーション編
視覚上の階層構造と情報の階層構造
オーバーレイヤ、パブリックレイヤ、ローカルレイヤ、コンテンツレイヤ
アニメーションが担う２つの役割＝構造理解の助け、心理的価値の向上
スワイプでカードが移動、バナーがスライドして変わる、メニューを押すと情報が出る、ページが縮小してカードになる、
マイページに風船を飛ばす、進捗をプログレスバーで知らせる、グラフの表示にアニメーションを入れる、スタンプを押した感を出す

●これからの学び編
サービス環境ｘシステム環境ｘユーザ環境
多くの観点を持つ
複雑なものはシンプル化して考える
ユーザ視点と開発視点
人間の価値観ｘ生活スタイル