Figmaを活用したサービス・UIデザインプロセス 2023年11月24日

■自己紹介
タグチマリコさん

■全体像を把握する
理解を促進する目的で全体像の整理をおこないます。

1.他社事例をまとめる
2.画面遷移図をつくる
3.ヒアリング
4.サービスのユースケース・使われる流れをえがく
5.サービスの全体像を書き出す

■画面遷移図をつくる

■ヒアリングをおこなう

■サービスのユースケース・使われる流れをえがく

ビジネスモデル

■ワイヤーフレームを作成する
Lo-FI 要素の中身がなく全体の雰囲気をおこしたもの
Mid-Fi 本文含めどこに何の要素があるか、全体がわかる状態
Hi-Fi すべての要素が含まれた状態で、デザインに近いもの

テンプレートを活用しながら作ることも

■ワイヤーフレームを作成する
気をつけていること

1.なんの目的で作っているかを明確にする
a.誰に何の合意をとるためのWFか

2.明らかにしておくことは何かを明確にする
a.どれが仮の情報なのかわかるよいうにする
b.確認してほしいポイントを明らかにする(デザインではなく要素をFIXさせたい)
C.後から言われたときに時間かかるものや難しいものは早く伝える

■UIデザインを作成する

シナカフェ
https://creators-synergy-cafe.com/

・ページを活用する(表紙・ワークエリア・コンポーネントをわかりやすく)

・プロトタイプを確認する
・実装の指示書をつくる

■リサーチする
・ユーザーインタビュー~KA法

CSV Populate
Google Sheets Sync

ERROR: The request could not be satisfied

■ユーザビリティテストをする

■まとめ

サービスができるまで
これらのフェーズや組織ごとに違いはありますが
基本的にこれらのサイクルを繰り返してサービスがつくられていきます

いま何のために手を動かしているのかを意識して
良いプロダクトをつくるための
コラボレーション手段として、Figmaを含め
さまざまなツールをどんどん活用していきましょう!

※シナカフェ、アニメーションうざいなぁ。
※仕事でワイヤーフレーム持っていくことが多々あったけど、
突っ込まれることなかったなー。

コメント

タイトルとURLをコピーしました