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
28
デザイナーとエンジニアで一緒にワイヤーフレームを作ったらとても良かった話
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
プロダクトデザインの「守破離」の「破」について
hayashirine
0
320
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
5
4.4k
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
370
Dinosaur Mayhem
storyartist
PRO
0
150
Goodpatch Tour💙 / We are hiring!
goodpatch
31
800k
ZKK_001.pdf
nicholaspegu
0
1.5k
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
120
ito aya Portfolio
itoaya116
0
100
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
160
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
70k
Dive Deep into Communication
yomtsu
0
220
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
400
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Pragmatic Product Professional
lauravandoore
32
6.4k
A better future with KSS
kneath
238
17k
GraphQLとの向き合い方2022年版
quramy
44
14k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
Code Reviewing Like a Champion
maltzj
521
39k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
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 ご清聴いただきありがとうございました