GUIをエンジニアが考えるGunma.web #48@kanayannet
View Slide
大前提わたし =デザイナーじゃないわたし =絵心がない自覚あり絵心求めるならデザイナーさん呼んでほしいそれでもGUIを考える場面はある
今回当てはまる方がそれなりにいそう！
よろしく!!
Agendaどこをやる?何から始める?どこまでやる?どのようにやる?文章は読まれない注意事項
どこをやる?
どこをやる?理想:エンドユーザ向けのこれから利用頻度がすごくあがりそうなページをやる現実:ワタシ、デザイン、チョットデキル
謙虚に考えるいきなり利用頻度高くなりそうなデザインやって炎上したらどうしよう？
リスクが少ないところから新規のサービス既存のサービスとほぼ絡まない予期せぬ副作用怖い自分が知っている人しか使わないもの..etcクレームの影響範囲を絞れるデザイナーさんが忙しくて手が回らないページやる理由になりやすいというかやらないと誰も..orz
何から始める？
何から始める？課題を明確化する？何が不便か？実際に使う人に聞く課題を解決する手段を明確化する仕様を決める
どこまでやる？
あるある話聞いてるうちに「色々」言われる「やってくれるかも？」と期待されるとあるある話
心がける事容易性と効果的かどうかで「取捨選択」する「実現可能」で「分析可能」なものから
ん？
ここまではソフトウェア開発と大きく変わらない
どのようにやる？
ワイヤーフレームいきなり豪勢なGUIにしない必要な要素とコンセプトは別途説明する課題を解決する主旨を強めにPR
ツールは?Figma推奨編集を共同で出来るチームを作ってそこに招待する形
話しながらその場で見せながらコラボレーション
Figmaの注意事項チーム内に作らないとdefault:公開URLを知っていれば気になる情報Adobeの絡み方 ->買収心配しすぎ?
綺麗なデザインにした後も綺麗なデザインにする人はデザイナー ->お願いwデザインされたパーツの色情報など CSSをそのまま取得可能
デザイナー捕まらない時は...
ワイヤーフレーム -> Bootstrapでもいいのでは？エンジニアでも「それっぽい」デザインは出来るよ下記は趣味で管理してるメール配信の仕組み
文章は読まれない
よくあるパターン
一体どれだけの人が...これを書くなという話ではない。ボタンを押す前に読む人がどれだけいる？読んだとしてもうっかり押すよ。disabledやろうね。
これもあるあるUI
サーバサイドでもフロントでも変換かければいいよね。ハイフン必要なら桁数でつける ->っていうかいる？全角は半角に変換させる綺麗なデザインとかそれ以前の問題配慮不足
注意事項
綺麗さを追求しすぎない絵のスペシャリストではないので「機能美」という言葉もあるが...必要な要素を揃えた結果「機能美」と言われるくらいが丁度いい
心がけ必要な時に必要なものを必要なだけJust In Time!! -> Agile
まとめ
まとめエンジニアじゃないので絵心自信がないそれでもデザイナーが手をつけきれないページはある狙い目 ->やるしかない必要な要素を整理して最低限のゴールをまずは目指すAgileとか意識するエンジニア経験が自然と生きるのでは？機能面での丁寧さ重要文章で解決しすぎない
Figma便利ワイヤーフレームで対話をしながら色々と言われるけど...ある意味我慢 ->誘惑に負けて必要以上に手をつけないAdobeは気になる
ご清聴ありがとうございました！
kanayannet
n1215
manfredsteyer
kazutan
itohiro73
kotomin_m
koluku
cocoeyes02
usamik26
gennei
j5ik2o
77web
kentaroutakeda
sferik
hursman
philhawksworth
lemiorhan
kneath
ammeep
marcelosomers
jrom
phodgson
rasmusluckow
deanohume
michaelherold