GUIをエンジニアが考える

Slide 1

Slide 1 text

GUI をエンジニアが考える Gunma.web #48 @kanayannet

Slide 2

Slide 2 text

大前提わたし = デザイナーじゃないわたし = 絵心がない自覚あり絵心求めるならデザイナーさん呼んでほしいそれでもGUI を考える場面はある

Slide 3

Slide 3 text

今回当てはまる方がそれなりにいそう！

Slide 4

Slide 4 text

よろしく !!

Slide 5

Slide 5 text

Agenda どこをやる? 何から始める? どこまでやる? どのようにやる? 文章は読まれない注意事項

Slide 6

Slide 6 text

どこをやる ?

Slide 7

Slide 7 text

どこをやる ? 理想: エンドユーザ向けのこれから利用頻度がすごくあがりそうなページをやる現実: ワタシ、デザイン、チョットデキル

Slide 8

Slide 8 text

謙虚に考えるいきなり利用頻度高くなりそうなデザインやって炎上したらどうしよう？

Slide 9

Slide 9 text

リスクが少ないところから新規のサービス既存のサービスとほぼ絡まない予期せぬ副作用怖い自分が知っている人しか使わないもの..etc クレームの影響範囲を絞れるデザイナーさんが忙しくて手が回らないページやる理由になりやすいというかやらないと誰も..orz

Slide 10

Slide 10 text

何から始める？

Slide 11

Slide 11 text

何から始める？課題を明確化する？何が不便か？実際に使う人に聞く課題を解決する手段を明確化する仕様を決める

Slide 12

Slide 12 text

どこまでやる？

Slide 13

Slide 13 text

あるある話聞いてるうちに「色々」言われる「やってくれるかも？」と期待されるとあるある話

Slide 14

Slide 14 text

心がける事容易性と効果的かどうかで「取捨選択」する「実現可能」で「分析可能」なものから

Slide 15

Slide 15 text

ん？

Slide 16

Slide 16 text

ここまではソフトウェア開発と大きく変わらない

Slide 17

Slide 17 text

どのようにやる？

Slide 18

Slide 18 text

ワイヤーフレームいきなり豪勢なGUI にしない必要な要素とコンセプトは別途説明する課題を解決する主旨を強めにPR

Slide 19

Slide 19 text

ツールは ? Figma 推奨編集を共同で出来るチームを作ってそこに招待する形

Slide 20

Slide 20 text

話しながらその場で見せながらコラボレーション

Slide 21

Slide 21 text

Figma の注意事項チーム内に作らないとdefault: 公開 URL を知っていれば気になる情報 Adobe の絡み方 -> 買収心配しすぎ?

Slide 22

Slide 22 text

綺麗なデザインにした後も綺麗なデザインにする人はデザイナー -> お願いw デザインされたパーツの色情報など CSS をそのまま取得可能

Slide 23

Slide 23 text

デザイナー捕まらない時は ...

Slide 24

Slide 24 text

ワイヤーフレーム -> Bootstrap でもいいのでは？エンジニアでも「それっぽい」デザインは出来るよ下記は趣味で管理してるメール配信の仕組み

Slide 25

Slide 25 text

文章は読まれない

Slide 26

Slide 26 text

よくあるパターン

Slide 27

Slide 27 text

一体どれだけの人が ... これを書くなという話ではない。ボタンを押す前に読む人がどれだけいる？読んだとしてもうっかり押すよ。 disabled やろうね。

Slide 28

Slide 28 text

これもあるある UI

Slide 29

Slide 29 text

サーバサイドでもフロントでも変換かければいいよね。ハイフン必要なら桁数でつける -> っていうかいる？全角は半角に変換させる綺麗なデザインとかそれ以前の問題配慮不足

Slide 30

Slide 30 text

注意事項

Slide 31

Slide 31 text

綺麗さを追求しすぎない絵のスペシャリストではないので「機能美」という言葉もあるが... 必要な要素を揃えた結果「機能美」と言われるくらいが丁度いい

Slide 32

Slide 32 text

心がけ必要な時に必要なものを必要なだけ Just In Time!! -> Agile

Slide 33

Slide 33 text

まとめ

Slide 34

Slide 34 text

まとめエンジニアじゃないので絵心自信がないそれでもデザイナーが手をつけきれないページはある狙い目 -> やるしかない必要な要素を整理して最低限のゴールをまずは目指す Agile とか意識するエンジニア経験が自然と生きるのでは？機能面での丁寧さ重要文章で解決しすぎない

Slide 35

Slide 35 text

Figma 便利ワイヤーフレームで対話をしながら色々と言われるけど... ある意味我慢 -> 誘惑に負けて必要以上に手をつけない Adobe は気になる