Webデザイナー進化論 season2 UIデザイン制作編UIデザイナーはこう使う! 2023年10月26日

Webデザイナー進化論 season2 UIデザイン制作編UIデザイナーはこう使う!  Figma
Webデザイナー進化論 season2 UIデザイン制作編UIデザイナーはこう使う! 

というわけで、
羽山さんの会社のタグチマリコさんが講師を務める
Figmaのウェビナーに参加しました。

■自己紹介

タグチ マリコ
日本ウェブデザイン株式会社 CXO兼UXデザイナー

高校生から働きだし、その後制作会社に勤務。
現在はUXコンサルティングしている。

■活用法ーデザインの準備の前に
チームでワークショップする。
シナカフェでFigjamで行う。
競合調査もFigjamで行う。
クライアントともFigma上でお話する。
ワイヤーフレームあるいはデザインに将来考えている情報をメモしておく。

・資料を作る
Figma上で資料をつくるが、
ぜんぶやるとFigmaが大変になるので、
URLだけNotionで管理したりしている。
繰り返し使うパーツはコンポーネントにする
コンポーネントというページを作って整理している。

・プロトタイプを確認する。

・実装の指示書をつくる
実装チームへの情報伝達も管理する
逆に実装チームからのディレクターへのお願いもコメントで管理。
デザインレビューもコメント。
 ただし書き込みすぎると重くなるので、
 最終版ができたらそれだけ別にするとかはする。

・定性分析
KA法もFigma内

Q.複数ページわけでFigmaを使っていますか? 
A.表紙はつける
 コンポーネントを格納するページ
 それ以外はワークというページで管理。
大規模サイトの場合はページを分ける場合もある。

Q.コメント機能と付箋のどちらをつかいますか。
A.付箋として見えている状態にしておきたい。
現場によって使い分けていいのでは。
  マリコさんがつかうのはウィジェットでメモ機能を使っている。

Q.ユーザーインタビューを受けてもらうお客様はどのように選び、どのように相手に連絡されていますか?
また、KA法で「心の声」とありましたが、それはインタビュアーが想像したものですか?それともお客様に「その時はどう思っていましたか?」と直接聞くのでしょうか?
A.リサーチクエスチョンを立てる。
インタビュアーが解釈して、KAカードを書いている

Q.CSV Populateのセキュリティ(情報をfigmaやMicrosoftに開示されるのか)に関して、もしご存じでしたら教えて欲しいです。
A.ぐぐれ。

Q.PCとSPを両方作る場合、並べられていますが、プレビュー確認はどうしていますか?
A.あんま考えてなかったですが、スマホでスマホで開いているので、意識してなかった。

Q.上位関係分析法などは使われてますか。
A.使う場合もあるが、基本的にはKA法で片付いてしまう。
 インタビューだけで解決できないことは企業の中に入るしかない。

Q.UIの場合はデザインシステムを使っていたり、オートレイアウトを使っているなど工夫があれば教えてください。
A.ボタン系などは最初に素材置き場にぽいぽい置いていく
 全体のデザインができてから納品に支障がない程度に纏める。

Q.Figmaのおススメのプラグインを教えてください。
A.Forms→文字入力用プラグイン
 uiGradients
 Mockup
 Autoflow→矢印系
 Simpleflow→矢印系
 (Figmaは追従する矢印が引けない)
 Japanese Dummy Text
 Google Sheets Sync
 CSV Populate

Q.Figmaのおススメ書籍など
A.TwitterとかでFigmaの先駆者を常に追いかける。
Figma公式をフォロー。
 
ちょっとできる人向けFigma本を買う。

コメント

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