エンジニアにありがちな自己満足UI（笑） / How to make iikanji UI design?

2019/05/01 高専カンファレンスin讃岐登壇スライドです

Transcript

1. KOSENCONF130SANUKI How to make iikanji UI design? エンジニアにありがちな 自己満足UI（笑） うべこうせん はすみ(@hsm_hx)
2. 今日お話すること テキストプレースホルダ ①　ぼくたちはデザインができない ②　私のデザインがイケてないのは 　　どう考えてもお前らが悪い
3. ぼくたちはデザインができない WE ARE NOT GOOD AT DESIGN
4. センスをマッマの胎内に置いてきてしまったオタクのポーズ デザインとは？ ものをかっこよく見せるやつ センスが無いとどうにもならない 最悪適当でもなんとかなる
5. センスをマッマの胎内に置いてきてしまったオタクのポーズ デザインとは？ ものをかっこよく見せるやつ センスが無いとどうにもならない 最悪適当でもなんとかなる
6. センスをマッマの胎内に置いてきてしまったオタクのポーズ デザインとは？ ものを使いやすく見せるやつ 知識が無いとどうにもならない 最悪適当でもなんとかならない
7. デザインとは？ どちらが見やすいですか？
8. デザインとは？ どちらが使いやすいですか？
9. デザインとは？ 使おうと思いますか？
10. デザインとは？ 違いは何だと思いますか？
11. ① 基準線(左，中央，右)を意識する ② パーツの性質(色・サイズ・フォント)を揃える
13. 基準線を意識する ・左揃え 　　普通はこれを使う。 　　最もストレスなく情報を読み取れる ・中央揃え 　　短いフレーズやキーワードにだけ使う。 　　アイコンと一緒に使われがち ・右揃え 　　後述。同じ操作群の中でも性質の違うものなど
15. パーツの性質を揃える ・フォント 　　UIに使う場合は普通のものを選ぶ。 　　M+や源ノ角ゴシック，メイリオなど ・色 　　基本は全体で色味を統一する。 　　グレースケール→+1色→…　原色は使いづらいかも ・サイズ 　　タイトル，サブタイトル，本文の3種類
16. イケてるデザインって何なんだ それでもやっぱりデザインがわからないオタクのポーズ 基準線を合わせるとイケてる? 色は多いほうが強い
17. イケてるデザインって何なんだ それでもやっぱりデザインがわからないオタクのポーズ 動線が短いこと 1秒で概要が把握できること
20. この画面で伝えたいこと 施設名 使える状態か？(提供時間) 何が使える場所なのか？ 施設名を大きく一番上に 提供時間を色で表現 大きいアイコンと透明度 関連するパーツを近づける
21. 私のデザインがイケてないのは どう考えてもお前らが悪い WHY IS MY DESIGN CHEEP ?
22. UIデザインの原則 ユーザーの想像通りの動きをすること 想定する利用場面に適していること ユーザーの気持ちを推し量れないオタクのポーズ
23. UIデザインの原則 ユーザーの気持ちを推し量れないオタクのポーズ
24. UIデザインの原則 ユーザーの気持ちを推し量れないオタクのポーズ
25. デザインを添削する 違いは何だと思いますか？
26. デザインを添削する
27. デザインを添削する
28. 最低限のデザインをするために 原則を守りましょう 使う側の気持ちになってみましょう ノンデザイナーズ・デザインブック やってはいけないデザイン を読みましょう ① ② ③
29. 『使ってもらえるもの』づくり