Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GUIをエンジニアが考える

 GUIをエンジニアが考える

kanayannet

March 05, 2023
Tweet

More Decks by kanayannet

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. よろしく
    !!

    View Slide

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

    View Slide

  6. どこをやる
    ?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. 何から始める?

    View Slide

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

    View Slide

  12. どこまでやる?

    View Slide

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

    View Slide

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

    View Slide

  15. ん?

    View Slide

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

    View Slide

  17. どのようにやる?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. 文章は読まれない

    View Slide

  26. よくあるパターン

    View Slide

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

    View Slide

  28. これもあるある
    UI

    View Slide

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

    View Slide

  30. 注意事項

    View Slide

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

    View Slide

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

    View Slide

  33. まとめ

    View Slide

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

    View Slide

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

    View Slide

  36. ご清聴
    ありがとう
    ございました!

    View Slide

  37. View Slide