プログラマが最低限抑えておきたいUIデザイン知識３選

2021年7月14日 UI/UXデザイナーLT会 - vol.4 #uiuxdesignerslt でLT登壇した時の資料です。
https://rakus.connpass.com/event/215913/

「プログラマはでざいんができなくていい」とは考えていませんか？
“より良い仕事”の為には、それではいけないと、僕は考えています。

チームとしてお互いをリスペクトして、任せっぱなしにしない為には、プログラマもデザインのことを少しだけ知っているといいでしょう。
そのきっかけになる３つのことを、資料にまとめました。
コーディングに使えるテクニックも入っています。

Transcript

1. プログラマが 最低限抑えておきたい UI デザイン知識３選 白栁隆司 2021年7月14日 UI/UXデザイナーLT会 vol.4
2. 自己紹介 エンジニアカウンセラー　白栁 隆司 Youtubeに平日ほぼ毎日動画投稿中！ #ほぼ日ITエンジニアニュース @IT 自分戦略研究所 エンジニアライフにて「コレがワタシの生きる様」連載中（木曜日） ４つのことを、ITエンジニアに勧めてます 1. 傾聴によるコミュニケーション 2. メンタルヘルス（セルフケア） 3. セルフマネジメント 4. 日々の生活の中からエンジニアリングを学ぶ
3. プログラマもデザインしよう 「プログラマ→デザイン分からなくていい」は間違い ”質の良い”仕事の為には、できた方がいい • 一番最初に動く画面を見るのはプログラマ • デザイナ任せのデザインが最高とは限らない • そもそもデザイナ任せでいいの？責任転嫁では？
4. ３つだけ覚えておこう 1. 絶対座標と相対座標 2. 間（空間） 3. 視線誘導 Zの法則
5. 1. 絶対座標・相対座標 • 絶対座標：画面上の１点を原点[0, 0]として、そこからの 位置変化を扱う ◦ ex. グラフィックソフト, WinForm • 相対座標：アイテム間の位置関係で決まる ◦ ex. HTML, AndroidStdio, WPF
6. 2. 間（空間） ギチギチに情報を詰めて情報量を多くすれば必要な情報 は詰められるかもしれないが見やすい情報ではありえな い。見辛い情報は情報をしっかりと伝えることができず情 報量が無駄になってしまっている。これを回避する為に は、適度な間（空間）を取ること情報 を間引くことで伝えたい情報の厳選をすることが 必要となる。これはコーディングにも活用できる
7. 2. 間（空間） • 情報に適度な間（空間）を作る＆省略（間引く） ◦ ギチギチに情報を詰めても伝わらない ◦ 情報量より伝える情報の厳選で勝負する • 強調なども活用して伝えやすくできる • コーディングにも活用できる！
8. 2. 間（空間） 世界最小のテトリス ※140バイト https://gist.github.com/aemkei/1672254 より
9. 3. 視線誘導 Zの法則 • 人間の視線はZ型に動く、というルール ◦ 見せたい情報をZ型に配置しておく ◦ 重要情報はより上に、左側に ◦ 右下のエリアも大事！ • チラシの多くはこのルールで作られている
10. プログラマがデザインできる必要はない • 簡単なデザインロジックを覚えておく利点 ◦ デザインの評価ができる ◦ デザイナとは違う視点からの指摘ができる • デザイナに任せるからこそ、知るべき • チーム ← 互いの仕事のへのリスペクト
11. ご清聴ありがとうございました エンジニアカウンセラー 白栁隆司 デザイン＝設計！楽しい！！