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
デザイナーとエンジニアで一緒にワイヤーフレームを作ったらとても良かった話
Search
yuuri
December 13, 2024
Design
1
27
デザイナーとエンジニアで一緒にワイヤーフレームを作ったらとても良かった話
yuuri
December 13, 2024
Tweet
Share
More Decks by yuuri
See All by yuuri
クライアントワークのデザイナーがNotionで個人的タスクを管理している話
yr_tms
1
110
Other Decks in Design
See All in Design
NAHO SHIMONO_Portfolio2025
nahohphp
0
220
Tableau曲線表現講座(2024.11.21)
cielo1985
0
270
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
OLTA株式会社/デザイン紹介資料
taxy
0
120
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
650
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
200
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
160
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
910
Les petites aventures de CSS, saison 2025
goetter
3
4k
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
240
Building foundations 堅牢なデザイントークンの設計
hilokifigma
0
380
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
A designer walks into a library…
pauljervisheath
205
24k
Building Your Own Lightsaber
phodgson
104
6.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
It's Worth the Effort
3n
184
28k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Transcript
2024.12.13 Figma Winter Night 2024 Yuuri Isogai デザイナーとエンジニアで一緒に ワイヤーフレームを作ったらとても良かった話
株式会社 Fusic デザイナー 礒谷 悠莉 Yuuri Isogai 2021年1月にFusicの社内1人目デザイナーとして入社。 BtoB/BtoC問わず 、Webシステムやモバイルアプリの
UIデザインを主に担当。顧客と一緒にサービスフローの設 計を行ったり、UXデザインの領域でも奮闘中。 実装することも好きで、Figmaで設計したコンポーネントを ひたすらStorybookに構築することが趣味。
本題に入る前に
Fusicでのシステム開発プロジェクト クライアントワーク 自社プロダクト
Fusicでのシステム開発プロジェクト クライアントワーク 自社プロダクト
開発に関わるメンバーの構成イメージ 顧客 Fusic プロジェクトメンバー エンジニア デザイナー プロジェクトメンバー
ここから本題の話
プロジェクトの流れ こういうものを 作りたい
プロジェクトの流れ こういうものを 作りたい
プロジェクトの流れ こういうものを 作りたい ディスカッション 提案
プロジェクトの流れ こういうものを 作りたい ディスカッション 提案
プロジェクトの流れ こういうものを 作りたい ディスカッション デザイン 実装 提案
プロジェクトの流れ こういうものを 作りたい ディスカッション デザイン 実装 提案
プロジェクトの流れ こういうものを 作りたい デザイナー
プロジェクトの流れ こういうものを 作りたい デザイナー 顧客から受け取った要件を確認しながら ワイヤーフレーム(最初のたたき台)を作成する
プロジェクトの流れ こういうものを 作りたい デザイナー 顧客に具体的なイメージを持って検討してもらうため 顧客から受け取った要件を確認しながら ワイヤーフレーム(最初のたたき台)を作成する
プロジェクトの流れ こういうものを 作りたい デザイナー 顧客に具体的なイメージを持って検討してもらうため 要確認の項目・提案したい箇所をエンジニアに共有 顧客から受け取った要件を確認しながら ワイヤーフレーム(最初のたたき台)を作成する
プロジェクトの流れ こういうものを 作りたい エンジニア
プロジェクトの流れ こういうものを 作りたい エンジニア 顧客から受け取った要件を確認しながら 確認事項+詳細を詰める必要がある要望をリストアップ
ある日 ワイヤーフレームと確認メモリストを見たエンジニア
ワイヤーフレームを見ると ここ確認しなきゃ!が分かりやすいな〜
(そういえば同じインプット作業を別々でやっているな…)
そうだ!一緒にワイヤーフレーム作ってみよう!
これから作ろうとしているもののイメージ
一緒にやってみた お互いに要望リストを確認しながら画面に表示したい要素をFigmaで作成 この段階でユーザー目線を意識しながら画面内に要素を配置して行く
一緒にやってみた お互いに要望リストを確認しながら画面に表示したい要素をFigmaで作成 この段階でユーザー目線を意識しながら画面内に要素を配置して行く お仕事マッチングサービスのユーザープロフィール画面 例)
一緒にやってみた お互いに要望リストを確認しながら画面に表示したい要素をFigmaで作成 この段階でユーザー目線を意識しながら画面内に要素を配置して行く お仕事マッチングサービスのユーザープロフィール画面 要望リスト ユーザー 所在
得意な業 実績 例)
一緒にやってみた お互いに要望リストを確認しながら画面に表示したい要素をFigmaで作成 この段階でユーザー目線を意識しながら画面内に要素を配置して行く お仕事マッチングサービスのユーザープロフィール画面 要望リスト 項目+サンプルデータをワイヤーに並べていく t ユーザーq t 所在l
t 得意な業j t 実績 t ユーザー名: 佐藤太 t 所在地: 東京都新宿± t 得意な業務: ウェブデザイン、マーケティン t 実績: 5年以上の経験、数々のプロジェクトを成功に導いた実績あり 例)
一緒にやってみた お互いに要望リストを確認しながら画面に表示したい要素をFigmaで作成 この段階でユーザー目線を意識しながら画面内に要素を配置して行く お仕事マッチングサービスのユーザープロフィール画面 FigmaのAI機能に生成してもらった 要望リスト 項目+サンプルデータをワイヤーに並べていく ユーザー
所在 得意な業} 実績 ユーザー名: 佐藤太¡ 所在地: 東京都新宿Ä 得意な業務: ウェブデザイン、マーケティン§ 実績: 5年以上の経験、数々のプロジェクトを成功に導いた実績あり 例)
とても粗いざっくりワイヤーフレーム
確認事項や提案アイデアのメモを残していく
ワイヤーフレーム(という名のたたき台)が完成
一緒にやってみて良かったこと
一緒にやってみて良かったこと I お互いに別々でやっていた要件のインプットと確認したい項目のすり合わせが同 時にできて効率が良かった
一緒にやってみて良かったこと I お互いに別々でやっていた要件のインプットと確認したい項目のすり合わせが同 時にできて効率が良かった I 実装に時間がかかるから今回のスコープでは難しい、ということもリアルタイム で分かるので、ワイヤーを使ってから判明することを回避できる
一緒にやってみて良かったこと I お互いに別々でやっていた要件のインプットと確認したい項目のすり合わせが同 時にできて効率が良かった I 実装に時間がかかるから今回のスコープでは難しい、ということもリアルタイム で分かるので、ワイヤーを使ってから判明することを回避できる I この要件だと、もっとこうした方がユーザーにとって良いのでは?それは実現可 能なのか?と思いついた提案アイデアについて、リアルタイムでエンジニアと
ディスカッションできる
おまけ
顧客とのディスカッション
None
顧客とのディスカッション F エンジニアが機能要件についてお客さんと話している時に、デザイナーがリアル タイムでワイヤーを更新しながらイメージを形にして行く
顧客とのディスカッション F エンジニアが機能要件についてお客さんと話している時に、デザイナーがリアル タイムでワイヤーを更新しながらイメージを形にして行く F デザイナーがUIについてお客さんに提案したり、お客さんとディスカッション してでてきた案などをデザイナーの手が追いつかない時にワイヤーを起こすのを 一緒にエンジニアがやってくれたりする
None
None
ディスカッションの内容がリアルタイムで可視化されながら話が進められるので、 より具体的なイメージで顧客に検討してもらえる 「あとで形にしてみたらイメージと違った」を回避できる
まとめ
まとめ & 最初のたたき台を一緒に作るのはとても良さそうに感じている
まとめ & 最初のたたき台を一緒に作るのはとても良さそうに感じている シンプルに効率的・最初からデザイナー・エンジニアの両視点で検討できる
まとめ & 最初のたたき台を一緒に作るのはとても良さそうに感じている シンプルに効率的・最初からデザイナー・エンジニアの両視点で検討できる & すべてのワイヤーを一緒に作るのか?は引き続き検討していきたい
まとめ & 最初のたたき台を一緒に作るのはとても良さそうに感じている シンプルに効率的・最初からデザイナー・エンジニアの両視点で検討できる & すべてのワイヤーを一緒に作るのか?は引き続き検討していきたい & たたき台をどの粒度まで一緒に作り込むとよいのか?も引き続き検討
同時編集がスムーズにできる Figmaならではのアプローチ
We Are Hiring! https:/ /recruit.fusic.co.jp/ Thank You ご清聴いただきありがとうございました