はじめてのUIデザイン
Date: 2022/5/16
Book
紹介する本
タイトル：はじめてのUIデザイン 改訂版
著者：池田 拓司 宇野 雄 上ノ郷谷 太一 坪田 朋 元山 和之 吉竹 遼
「UIデザイナーを目指している人に渡せる最初の1冊を作りたい。」というお考えのもと、なんとEPUBファイルで無料でダウンロード可能になっています。
kindleでも100円という破格です。
筆者は一応フリーランスデザイナーとしてお仕事をいただいていますが、デザインのインターフェイスばかりを学習していました。情報設計がうまくできておらずエンジニアさんとうまくコミュニケーションが取れなかったことをがあり、もっと根本的な部分の勉強がしたいと思いこの本を手に取りました。
「もっと早く知りたかった」、「自分の知識量はまだまだだな・・・」とデザインに対するモチベーションが上がりました。
「デザインを本格的に勉強したい」、「デザインを仕事としたい」
そんな方におすすめの1冊だと思います。
かなりの情報量なのでこの記事では筆者の印象に残った部分を中心に記述しています！
学んだこと
・UIデザインとは？
・インターフェイス（色やフォント）を作る前の情報設計の方法
・UIの作り方
UIデザインとは？
利用者が目的を達成するためにある＝課題を解決するためにするもの
サービスの提供価値をユーザーに正しく届けるためのもの
→結果としてサービスに愛着を持ち、長く使ってくれるファンを生み出すことができる
情報設計
まず必要なのは情報設計＝ わかりやすさを設計すること
ユーザーシナリオを作る
目的の達成するまでの様子をわかりやすく書く
ポストイットなどを使ってユーザーの動きを再現する。
その過程で必要な要素は何なのかを整理する。
価値シナリオ
ユーザーがしたいと思っていること（価値、欲求）を見つける
（例： 海外旅行が好きでコロナ前は年に2回ほど旅行に行っていた）
行動シナリオ
目的を達成するまでのシナリオを作り、そこで発生するタスクを見つける
（例： 海外旅行に行きたいがコロナのためしばらく行けていない。帰りの電車で以前の旅行で知り合った友人たちのInstagramをチェックして行きたいところをピックアップしている）
操作シナリオ
上記のタスクを実行するための操作
（例：
・Instagramで友人の投稿をチェック
・友人が訪れた場所をコピーしてGoogleで検索
・良さそうであればGoogle Mapのお気に入りに登録）
また、たくさんので要素を並べる場合はどの基準でまとめるのかも重要
（例：あいうえお順、A to Z、時間軸、種類、性質による区分）
参照
LATCH 5つの情報整理方法
UIを作る
情報設計ができたらいよいよデザイン（インターフェイス）の作成に入ります。
言語化された情報を具体化する
・情報に優劣をつけて、強調する（そのページで一番して欲しいことはなに？）
・名詞にできるものはオブジェクト、動詞にできるものはアクション
（例：ボタン：ボタンコンポーネント 選択する：写真を選択、人物を選択）
デザインの一貫性
一貫性を意識すると以下の利点が
・プロダクトの振る舞いに統一感を
・ユーザーの学習コストを減らす
・UI制作のプロセスを効率化する
・開発の工程を減らす
一貫性はカラーやフォントだけでなく、動きの一貫性、メニューなどの位置の一貫性もある
また、独自性の高いUIを使っては行けないわけではなく、上記の利点が得られない、デメリットがあることを理解して利用することが大切
まとめ＆感想
すぐにインターフェイス部分のデザインをしようとしない
調べるのはOK、参考もたくさん用意した方がいいが、カラーのデザインに取り掛かるのは情報設計がきちんとできてから
「何のためのデザインなのか」「ユーザーにどう動いて欲しいのか」を常に意識する
カラーとかはダサくてもいい。まずはユーザーに負担をかけずサービスを利用してもらうことを考える！
明日から実践したいこと
・「何のためのデザイン？」と問いかけながらデザインする
・インターフェイスよりも情報設計にこだわる
・「どこにどう一貫性があるのか」を説明できるようなデザインを心がける
Share
