プログラマが 最低限抑えておきたい UI デザイン知識３選 白栁隆司 2021年7月14日 UI/UXデザイナーLT会 vol.4

自己紹介 エンジニアカウンセラー　白栁 隆司 Youtubeに平日ほぼ毎日動画投稿中！ #ほぼ日ITエンジニアニュース @IT 自分戦略研究所 エンジニアライフにて「コレがワタシの生きる様」連載中（木曜日） ４つのことを、ITエンジニアに勧めてます 1. 傾聴によるコミュニケーション 2. メンタルヘルス（セルフケア） 3. セルフマネジメント 4. 日々の生活の中からエンジニアリングを学ぶ

プログラマもデザインしよう 「プログラマ→デザイン分からなくていい」は間違い ”質の良い”仕事の為には、できた方がいい ● 一番最初に動く画面を見るのはプログラマ ● デザイナ任せのデザインが最高とは限らない ● そもそもデザイナ任せでいいの？責任転嫁では？

３つだけ覚えておこう 1. 絶対座標と相対座標 2. 間（空間） 3. 視線誘導 Zの法則

1. 絶対座標・相対座標 ● 絶対座標：画面上の１点を原点[0, 0]として、そこからの 位置変化を扱う ○ ex. グラフィックソフト, WinForm ● 相対座標：アイテム間の位置関係で決まる ○ ex. HTML, AndroidStdio, WPF

2. 間（空間） ギチギチに情報を詰めて情報量を多くすれば必要な情報 は詰められるかもしれないが見やすい情報ではありえな い。見辛い情報は情報をしっかりと伝えることができず情 報量が無駄になってしまっている。これを回避する為に は、適度な間（空間）を取ること情報 を間引くことで伝えたい情報の厳選をすることが 必要となる。これはコーディングにも活用できる

2. 間（空間） ● 情報に適度な間（空間）を作る＆省略（間引く） ○ ギチギチに情報を詰めても伝わらない ○ 情報量より伝える情報の厳選で勝負する ● 強調なども活用して伝えやすくできる ● コーディングにも活用できる！

2. 間（空間） 世界最小のテトリス ※140バイト https://gist.github.com/aemkei/1672254 より

3. 視線誘導 Zの法則 ● 人間の視線はZ型に動く、というルール ○ 見せたい情報をZ型に配置しておく ○ 重要情報はより上に、左側に ○ 右下のエリアも大事！ ● チラシの多くはこのルールで作られている

プログラマがデザインできる必要はない ● 簡単なデザインロジックを覚えておく利点 ○ デザインの評価ができる ○ デザイナとは違う視点からの指摘ができる ● デザイナに任せるからこそ、知るべき ● チーム ← 互いの仕事のへのリスペクト

ご清聴ありがとうございました エンジニアカウンセラー 白栁隆司 デザイン＝設計！楽しい！！