Tweet
Tweet

Slide 1

Slide 1 text

KOSENCONF130SANUKI How to make iikanji UI design? エンジニアにありがちな 自己満足UI（笑） うべこうせん はすみ(@hsm_hx)

Slide 2

Slide 2 text

今日お話すること テキストプレースホルダ ①　ぼくたちはデザインができない ②　私のデザインがイケてないのは 　　どう考えてもお前らが悪い

Slide 3

Slide 3 text

ぼくたちはデザインができない WE ARE NOT GOOD AT DESIGN

Slide 4

Slide 4 text

センスをマッマの胎内に置いてきてしまったオタクのポーズ デザインとは？ ものをかっこよく見せるやつ センスが無いとどうにもならない 最悪適当でもなんとかなる

Slide 5

Slide 5 text

センスをマッマの胎内に置いてきてしまったオタクのポーズ デザインとは？ ものをかっこよく見せるやつ センスが無いとどうにもならない 最悪適当でもなんとかなる

Slide 6

Slide 6 text

センスをマッマの胎内に置いてきてしまったオタクのポーズ デザインとは？ ものを使いやすく見せるやつ 知識が無いとどうにもならない 最悪適当でもなんとかならない

Slide 7

Slide 7 text

デザインとは？ どちらが見やすいですか？

Slide 8

Slide 8 text

デザインとは？ どちらが使いやすいですか？

Slide 9

Slide 9 text

デザインとは？ 使おうと思いますか？

Slide 10

Slide 10 text

デザインとは？ 違いは何だと思いますか？

Slide 11

Slide 11 text

① 基準線(左，中央，右)を意識する ② パーツの性質(色・サイズ・フォント)を揃える

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

基準線を意識する ・左揃え 　　普通はこれを使う。 　　最もストレスなく情報を読み取れる ・中央揃え 　　短いフレーズやキーワードにだけ使う。 　　アイコンと一緒に使われがち ・右揃え 　　後述。同じ操作群の中でも性質の違うものなど

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

パーツの性質を揃える ・フォント 　　UIに使う場合は普通のものを選ぶ。 　　M+や源ノ角ゴシック，メイリオなど ・色 　　基本は全体で色味を統一する。 　　グレースケール→+1色→…　原色は使いづらいかも ・サイズ 　　タイトル，サブタイトル，本文の3種類

Slide 16

Slide 16 text

イケてるデザインって何なんだ それでもやっぱりデザインがわからないオタクのポーズ 基準線を合わせるとイケてる? 色は多いほうが強い

Slide 17

Slide 17 text

イケてるデザインって何なんだ それでもやっぱりデザインがわからないオタクのポーズ 動線が短いこと 1秒で概要が把握できること

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

この画面で伝えたいこと 施設名 使える状態か？(提供時間) 何が使える場所なのか？ 施設名を大きく一番上に 提供時間を色で表現 大きいアイコンと透明度 関連するパーツを近づける

Slide 21

Slide 21 text

私のデザインがイケてないのは どう考えてもお前らが悪い WHY IS MY DESIGN CHEEP ?

Slide 22

Slide 22 text

UIデザインの原則 ユーザーの想像通りの動きをすること 想定する利用場面に適していること ユーザーの気持ちを推し量れないオタクのポーズ

Slide 23

Slide 23 text

UIデザインの原則 ユーザーの気持ちを推し量れないオタクのポーズ

Slide 24

Slide 24 text

UIデザインの原則 ユーザーの気持ちを推し量れないオタクのポーズ

Slide 25

Slide 25 text

デザインを添削する 違いは何だと思いますか？

Slide 26

Slide 26 text

デザインを添削する

Slide 27

Slide 27 text

デザインを添削する

Slide 28

Slide 28 text

最低限のデザインをするために 原則を守りましょう 使う側の気持ちになってみましょう ノンデザイナーズ・デザインブック やってはいけないデザイン を読みましょう ① ② ③

Slide 29

Slide 29 text

『使ってもらえるもの』づくり