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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. よろしく
    !!

    View full-size slide

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

    View full-size slide

  6. どこをやる
    ?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 何から始める?

    View full-size slide

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

    View full-size slide

  12. どこまでやる?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. どのようにやる?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 文章は読まれない

    View full-size slide

  25. よくあるパターン

    View full-size slide

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

    View full-size slide

  27. これもあるある
    UI

    View full-size slide

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

    View full-size slide

  29. 注意事項

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide