SHOEISHA iD

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

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

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

デザインからコードへの再現も容易! プロトタイピングツール「Figma」の開発フェーズ別便利機能【要件定義・画面設計編】

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

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

 ブラウザ上で簡単に使用でき、共同作業が便利なプロトタイピングツール「Figma」。前回は要件定義フェーズ・画面設計フェーズでの活用方法を紹介しました。第3回ではデザインフェーズ、開発フェーズでの利用方法を紹介します。

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

デザインフェーズ

 Figmaの真骨頂とも言えるデザイン制作のフェーズ。機能を使いこなせばレスポンシブを考慮した画面作成、アニメーション作成、プロトタイプ作成など、再現性が高いUIデザインを制作できるため、デザイナーはしっかり習熟したいところです。再現性が高いデザインを作成すれば、エンジニアがFigmaを見るだけでデザインの詳細まで確認と判断が可能になるということに繋がります。

レスポンシブの作り方
レスポンシブの作り方

デザインガイド・コンポーネント作成の重要性

 UI制作を進める際、最初にカラーやフォントなどのスタイル、デザインガイド、アトミックデザインに則ったコンポーネントの形成が重要です。これを最初にFigmaで用意しておくことで、ページデザインを作成する際にコンポーネントを組み合わせ、カラーやフォントをスタイルから選択して設定することでデザイン制作を効率的に進められるようになります。

 アトミックデザインとは、最小単位素材から作成して、それらを段階的に組み合わせ、徐々に単位を大きくしてUIを設計する手法です。プロダクトの統一性を上げ、画面を作るまでの工程を効率的に進めることができます。

アトミックデザイン
アトミックデザイン

 あらかじめ組織で汎用的に使用するデザインガイドやコンポーネントをライブラリ化し、効率性をさらに高めることもできます。既存のFigmaファイルをライブラリにして他のファイルへ読み込むことができるので、新規プロジェクトでもカラーやフォントのスタイル、コンポーネントを利用することができます。もちろんライブラリが更新された場合は紐付いているファイルへ反映させることができますし、反映しないことも選択可能です。

 この準備を進めつつ画面デザインを作成していきますが、この段階で実装時のアニメーションもイメージしながら、デザインを作成していきます。アニメーションはエンジニア工数のリスクになりやすいため、株式会社ブリューアスでは、一部のエンジニアをデザインフェーズで招待しておき、デザイナーが実装したいアニメーションイメージを予めデザインのそばにメモ書きや参考となるURLを添え、エンジニアが開発工数の予測をできるようにしています。

メモの活用
メモの活用

プロトタイプの作成

 ワイヤーフレームやデザインを作成した後は、プロトタイプで操作感を確かめます。Figmaのプロトタイプ作成画面は、画面遷移前と後の画面を直感的につなぐだけで遷移設定が完了し、遷移のトリガーとアニメーション設定もできます。完成形に近い挙動を再現できるため、開発工数の判断、承認者との合意も手早く行うことができます。作成したプロトタイプの閲覧方法はURLを発行して共有するだけなので、簡単に承認者やエンジニアに閲覧してもらえます。

 Figmaでのプロトタイプの利点として、編集した内容が閲覧中のプロトタイプにリアルタイムで反映されることが挙げられます。承認者とプレゼンターが確認・議論をしながら、生じた変更点を作業者が即反映させる方法に適しています。

 また、1つのファイルの中で、複数のプロトタイプのフローを作成することができる点も便利です。遷移案を複数作成しておくと、プレビュー閲覧中でもすぐに別案へスイッチできます。

プロトタイプの閲覧
プロトタイプの閲覧

アニメーションの作成

 今ではローディングアニメーション、ボタンやフォームなどに対する細かいインタラクションなど、Webサイトでもアプリでも多くの箇所にアニメーションを施すことでユーザービリティの向上が図られています。Figmaでもアニメーション作成までできるので、After Effectsなどの別の動画制作アプリケーションでアニメーション作成をする必要が減り、デザイナーの負担が大幅に軽くなるというメリットが生まれました。

 アニメーションの再生はプロトタイプで閲覧とリアルタイム編集ができるので、「このアニメーションを少し早くしてほしい」などの要望をすぐに反映して確認することができます。

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

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

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

メールバックナンバー

次のページ
開発フェーズ

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

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

もっと読む

この記事の著者

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

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15613 2022/03/17 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング