KFDのススメ / About KFD

KFDのススメ小田島太郎 @shimataro999 2019/11/26 UX JAM in OSAKA 02

https://shimataro.me/ 自己紹介 • 小田島太郎 / https://shimataro.me/ • ウェブエンジニア（最近はインフラ寄り） •
趣味は手品 ◦ 手品業界→ウェブ業界 • 本日は、デザインセンス零のエンジニア目線で話します。 2

KFDとは？ 3

KFDとは？ 4 K…カーチャン J( 'ー`)し F…フレンドリー D…デザインカーチャン J( 'ー`)し
にもわかるデザインを作ろう！

ありがたいありがたい 5 カーチャン J( 'ー`)しの生態

カーチャン J( 'ー`)しの生態（１） 6 J( 'ー`)し「ヤフーのうるるって何だっけ？ ( ಠ_ಠ)「うるる？ J(
'ー`)し「えっちてぃー…っていうやつうるる U R L

カーチャン J( 'ー`)しの生態（２）（Windows10インストール中） J( 'ー`)し「うわぁぁぁぁぁぁ！！パソコンがハッキングされた！！！ ( ಠ_ಠ)「！！！！！！？？？？？ J(
'ー`)し「なんかパソコンから声がする！！ 7 こんにちは、Cortanaと申します

カーチャン J( 'ー`)しの生態（３）（今年の初めの出来事） J( 'ー`)し「グーグルって潰れるの？ ( ಠ_ಠ)「えっ？ J(
'ー`)し「ほら、ネットニュースに2019年4月に終了って書いてある… 8 Google+、4月2日にサービス終了

ただの笑い話ではない決して稀な事例ではない • 我が家の J( 'ー`)しだけの問題ではない • 誰しも、興味のないことは深く知ろうとしないうるるはともかく、それ以外はデザイン上の問題
• いきなりでかい声で話しかけるんじゃねーよ • サービス名が紛らわしいんだよ 9

明日からできるKFD 10

やってほしいことを明確に ❌「□□を入力します」誰が入力するの？自動的に入力されるの？ ⭕「□□を入力してください」 11

エラーは状況ではなく、解消方法を伝える ❌「△△が入力されていません」入力されていないのはわかった。じゃあどうすればいいの？ ⭕「△△を入力してください」 ※プログラマ目線でやりがちなミス（入力されていないときにメッセージを出すため） 12

余計な手間をかけさせない ❌「電話番号に全角文字は使えません」内部で半角変換してやれよ J( 'ー`)し「全角文字って？」 ❌「電話番号にはハイフンを含めないでください」内部で削ってやれよ 13

明日からやること • J( 'ー`)しを観察する • J( 'ー`)しを脳内で再現する •
J( 'ー`)し目線でデザインを見る「J( 'ー`)しがこのデザインを見たらどう反応するかな？」「J( 'ー`)しがわからない表現を使っていないかな？」 14

まとめ • J( 'ー`)しを観察しよう • J( 'ー`)しに伝わるデザインを心がけよう •
手間は最小限にしよう • 手品に興味があったらおはなししましょう！ 15

https://shimataro.me/ 16

shimataro