SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

共同作業に最適なプロトタイピングツール「Figma」入門

議論がスムーズに! プロトタイピングツール「Figma」の開発フェーズ別便利機能【要件定義・画面設計編】

共同作業に最適なプロトタイピングツール「Figma」入門 第2回

  • このエントリーをはてなブックマークに追加

 ブラウザ上で簡単に使用でき、共同作業が便利なプロトタイピングツール「Figma」。このツールは要件定義、画面設計、デザイン、開発とUI制作における4つのフェーズで活用することができます。連載の第2回と第3回では、このFigmaの機能をフェーズごとに具体的な使用例を用いて紹介します。

  • このエントリーをはてなブックマークに追加

要件定義フェーズ

 一般的に要求のヒアリング後、WEBサイトやアプリの開発は要件定義から始まることが多いと思います。要件定義フェーズでは、顧客の要望、市場、競合、その他さまざまな情報を収集し、開発物に必要な機能や状態を協議して、ドキュメントに落とし込みます。

 株式会社ブリューアスでは、このフェーズからデザイナーが参加することも多く、要件定義フェーズに限らず議論を重ねながらリアルタイムに情報整理を行うことが必要な場合、キャンバスが非常に広く使えて直感的に入力ができるのでFigmaを活用することで効率的に情報を整理することができます。

自由に使えるキャンバス

 Figmaのキャンバスは1辺が100,000pxを超える大きさなので、範囲を気にせずにさまざまな情報を並べることができます。

キャンバスの大きさ
キャンバスの大きさ

 例えば、顧客から提供された資料などを画像化して読み込み、俯瞰的に資料を閲覧しながら議論するなどオンラインホワイトボードのような使い方もできます。その資料へ情報を書き込む、ラフ案を添える、不要な情報を削除するなど、情報をより効果的に整理することで議論の活性化に繋がります。

資料画像や指示の整理
資料画像や指示の整理

リアルタイム性を活かした共同作業

 リモートワークが推奨され確認するディスプレイの解像度がバラバラなことが多い昨今、キャンバスが大きいと他のユーザーが作業や説明をしている位置が把握しにくいのではないかと懸念する方もいるかもしれません。Figmaでは、他のユーザーの位置がリアルタイムで追えるように表示され、また位置を把握したいユーザーのポインターへ自動で遷移するショートカット機能が備わっています。

他ユーザーのポインターへ遷移
他ユーザーのポインターへ遷移

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
画面設計フェーズ

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
共同作業に最適なプロトタイピングツール「Figma」入門連載記事一覧

もっと読む

この記事の著者

株式会社ブリューアス UIデザインTEAM(カブシキガイシャブリューアス UIデザインTEAM)

株式会社ブリューアス  スマホアプリ開発を中心にUIUXデザインからWeb制作まで、多様な技術力と実績を持つ開発会社です。BtoBからBtoCまで幅広い領域での制作・開発経験があります。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15209 2021/12/27 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング