Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GUIをエンジニアが考える
Search
kanayannet
March 05, 2023
Programming
0
250
GUIをエンジニアが考える
kanayannet
March 05, 2023
Tweet
Share
More Decks by kanayannet
See All by kanayannet
無関心の谷
kanayannet
0
200
生成AIの使いどころ
kanayannet
0
150
github copilot と 心理的安全性
kanayannet
0
200
FW と ライブラリ の考え方
kanayannet
0
220
TDDと今まで
kanayannet
0
540
個人開発 稼げなくてもいいアプリ
kanayannet
0
520
システムの堅牢性
kanayannet
0
290
Agile的学習方法
kanayannet
0
280
http2http3
kanayannet
0
200
Other Decks in Programming
See All in Programming
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
エラーって何種類あるの?
kajitack
5
340
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
730
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
440
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
330
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
580
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Bash Introduction
62gerente
614
210k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Fireside Chat
paigeccino
37
3.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
240
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Being A Developer After 40
akosma
90
590k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Why Our Code Smells
bkeepers
PRO
337
57k
Transcript
GUI をエンジニアが 考える Gunma.web #48 @kanayannet
大前提 わたし = デザイナーじゃない わたし = 絵心がない自覚あり 絵心求めるならデザイナーさん呼んでほしい それでもGUI を考える場面はある
今回当てはまる方がそれなりに いそう!
よろしく !!
Agenda どこをやる? 何から始める? どこまでやる? どのようにやる? 文章は読まれない 注意事項
どこをやる ?
どこをやる ? 理想: エンドユーザ向けのこれから利用頻度がす ごくあがりそうなページをやる 現実: ワタシ、デザイン、チョットデキル
謙虚に考える いきなり利用頻度高くなりそうなデザインやっ て炎上したらどうしよう?
リスクが少ないところから 新規のサービス 既存のサービスとほぼ絡まない 予期せぬ副作用怖い 自分が知っている人しか使わないもの..etc クレームの影響範囲を絞れる デザイナーさんが忙しくて手が回らないページ やる理由になりやすい というかやらないと誰も..orz
何から始める?
何から始める? 課題を明確化する? 何が不便か?実際に使う人に聞く 課題を解決する手段を明確化する 仕様を決める
どこまでやる?
あるある話 聞いてるうちに「色々」言われる 「やってくれるかも?」と期待されるとあるあ る話
心がける事 容易性と効果的かどうかで「取捨選択」する 「実現可能」で「分析可能」なものから
ん?
ここまでは ソフトウェア開発と大きく変わらない
どのようにやる?
ワイヤーフレーム いきなり豪勢なGUI にしない 必要な要素とコンセプトは別途説明する 課題を解決する主旨を強めにPR
ツールは ? Figma 推奨 編集を共同で出来る チームを作ってそこに招待する形
話しながらその場で見せながら コラボレーション
Figma の注意事項 チーム内に作らないとdefault: 公開 URL を知っていれば 気になる情報 Adobe の絡み方 ->
買収 心配しすぎ?
綺麗なデザインにした後も 綺麗なデザインにする人はデザイナー -> お願いw デザインされたパーツの色情報など CSS をその まま取得可能
デザイナー捕まらない時は ...
ワイヤーフレーム -> Bootstrap でもいいのでは? エンジニアでも「それっぽい」デザインは出来 るよ 下記は趣味で管理してるメール配信の仕組み
文章は読まれない
よくあるパターン
一体どれだけの人が ... これを書くなという話ではない。 ボタンを押す前に読む人がどれだけいる? 読んだとしてもうっかり押すよ。 disabled やろうね。
これもあるある UI
サーバサイドでもフロントでも 変換かければいいよね。 ハイフン必要なら桁数でつける -> っていうか いる? 全角は半角に変換させる 綺麗なデザインとかそれ以前の問題 配慮不足
注意事項
綺麗さを追求しすぎない 絵のスペシャリストではないので 「機能美」という言葉もあるが... 必要な要素を揃えた結果 「機能美」と言われるくらいが丁度いい
心がけ 必要な時に 必要なものを 必要なだけ Just In Time!! -> Agile
まとめ
まとめ エンジニアじゃないので絵心自信がない それでもデザイナーが手をつけきれないページ はある 狙い目 -> やるしかない 必要な要素を整理して最低限のゴールをまずは 目指す Agile
とか意識するエンジニア経験が自然と生 きるのでは? 機能面での丁寧さ重要 文章で解決しすぎない
Figma 便利 ワイヤーフレームで対話をしながら 色々と言われるけど... ある意味我慢 -> 誘惑に 負けて必要以上に手をつけない Adobe は気になる
ご清聴 ありがとう ございました!
None