ワークフローとFigma

Theme テーマ

仕事において一連のやり取りの流れをワークフローといいます。Webサイトを完成させるまでの流れと、Figmaがワークフロー上でどのように関わっていくのかを見ていきましょう。

職種ごとのFigmaの活用例

Figmaは、デザイン作成の場面で活用していくことが多いツールではありますが、ディレクター、デザイナー、エンジニアのそれぞれで異なる場面での使い方があります。また、分業しつつも連携しながら制作を進めていくためには、自分自身の役職だけでなく、ほかの職種での活用法も知っておくことが重要です。

それぞれの役職ごとの関わり方を見ていきましょう。

デザイナー

デザイナーはFigmaをデザイン作成のためのツールとして活用することになります。Figmaのさまざまな機能を十分に生かしてデザインを作成していきましょう。

ディレクター

ディレクターとは、直訳すると指揮者や管理者、映画など映像の分野では監督となる職業です。Webサイト制作やアプリ開発でのディレクターは、制作や開発の仕事そのものではなく、「その周辺で発生する仕事」を担当する職業です。

ディレクターの仕事内容は多岐に渡るのですが、次のような内容があります。

• Webサイトやスマートフォンアプリの企画をまとめる
• 開発費・制作費を見積する
• プロジェクトの進ちょくをマネジメントする
• 決裁権者と交渉する

ディレクターは、Webサイトやアプリを完成させることに責任を持つ人、ともいえます。

ディレクターがFigmaを利用する機会としては、ワイヤーフレーム作成時や、デザイナーとのコメントでのやり取りなどが挙げられます。

エンジニア

エンジニアとは、直訳すると技術者となります。自動車やロボットなどの機械の技術者もエンジニアとなりますが、本書では情報技術分野の技術者を指します。

エンジニアのFigmaの使い方としては、デザイナーから受け取ったFigmaデータを「読み取る」ことが中心になるでしょう。Webデザインやスマートフォンアプリを完成させるためには、コーディング・プログラミングが必須となりますが、Figmaを用いることで、余白やサイズ、フォントの情報、動きなどのコーディング・プログラミングに必要な情報をわかりやすい状態で取得できます。

また、Webデザインにおいては、Figmaに配置した画像の書き出し工程をエンジニアが担当することが多いでしょう。

画像書き出しは、デザイン編集権限がなくてもエクスポートタブから書き出すことが可能です。

どのような「流れ」で制作が進むのか

Webサイト制作やスマートフォンアプリ開発のワークフローは、「要件定義」「設計」「デザイン制作」「開発」「テスト」「公開・運用」といったようなフローに分かれます図1。それぞれの項目を見ていきましょう。

@div:figure

ワークフローの図 @divend

複数人で協力して進めることも多いため、フローの一部が重複しています。

要件定義

制作・開発を進めるために必要な内容を洗い出し、まとめることを要件定義といいます。

要件定義に必要な要素として、サイトの目的、ターゲットユーザー、サイトのコンセプト、使用するプログラム言語や採用する技術、文章や写真など必要な素材やそれらの手配、予算、スケジュールなど、多岐に渡るものとなります。

この工程ではディレクターが中心となって進めることになります。予算やスケジュールを見積もる際に、ディレクターの開発面または制作面の知識が不足している場合、デザイナーやエンジニアと確認しながら進める場合もあります。

また、大きめのプロジェクトだと、各部門のリーダーなどの主要メンバーで要件定義を進めておくと、のちのちの意見の食い違いが発生しにくくなります。複数人で意見を広げていく際には、FigJamを利用するとよいでしょう。

設計

要件定義をもとに、ワイヤーフレームの作成をします。ワイヤーフレームを元にしたプロトタイプもここで作成する場合があります。

ワイヤーフレームの作成は、ディレクターまたはデザイナーが作成します。どちらが作成するかはプロジェクトやチームメンバーの関連性などでも変わってきます。

また、ワイヤーフレームは必ずしもFigmaで作る必要はなく、ノートなどに手描きで作成したものをもとに進めることも一般的です。一方で、Figmaの場合はコメント等でコミュニケーションをしながら作成することができます。

できること・できないことを踏まえて、プロジェクトに適したツール、自分自身が作りやすい手段をとるとよいでしょう。

デザイン制作

要件定義で定めたターゲット、目的を元に、彩色やモチーフなどを決めた上でデザインを制作していきます。このときの成果物は、デザインカンプと呼びます。

Figmaでデザインカンプを作っていくことになりますが、必要に応じてデザインをディレクターやほかのチームメンバー、クライアントにFigmaの共有機能を使って共有するとよいでしょう。その場合はコメントでフィードバックをもらったり、通話機能で通話しながら作業を進めたりします。

また、デザインカンプを元にしたプロトタイプはこのタイミングで作成します。

開発

Webサイト開発の場合はこの工程でHTML/CSS、JavaScriptやPHPなどのプログラムを開発していきます。スマートフォンアプリではXcodeやAndroid Studio、Flutterなどを用いつつ、プログラミングをしていきます。

作成されたデザインをもとに開発していくことになりますが、開発の工程中でも状況によってはデザインに調整や変更が入ることも多くあります。そんなとき、Figma以外のデザインツールで制作したデータだと、どのファイルが最新版なのかわからなくなる、といった間違いが発生しますが、Figmaであればデータが常に最新となるため、この問題は起きません。

コンテンツ制作

コンテンツとは、文章と写真のことです。ライターやフォトグラファー、クライアントの担当者が用意します。

コンテンツ作成のタイミングは開発の後というわけではなく、デザインと並行して進める、またはデザインより先に用意することになります。

従来のワークフローでは、コンテンツ制作の担当者とデザイナーとが協業することは少なかったのですが、Figmaを中心とした制作・開発フローでは、デザインが共有された際にコミュニケーションをとる状況も増えています。

テスト

コーディング・プログラミングまでが完了した後に、サイトやアプリが問題なく機能しているかを試す工程として、テストを実施します。

公開・運用

いよいよ公開となります。本番環境とテスト環境を分けている場合、本番環境に切り替えます。公開が完了しても、そのあとにブログ記事などの情報を継続して投稿していったり、新規ページを開発したりという運用を継続していきます。

ウォーターフォール型開発、アジャイル型開発

Web開発やスマートフォンアプリなどの開発ワークフローは、ウォーターフォール型、アジャイル型という２つの開発手法に分けられます。

ウォーターフォール型

ウォーターフォールを直訳すると「滝」となりますが、滝が上から下に流れていくイメージのように、要件定義が終わったら次の設計に移り、設計が終わったらデザイン制作、というように一方通行で次の工程に進む形式の手法です。

ゼロから構築するWebサイトや、リニューアルとして一新するWebサイトを構築する際は、ウォーターフォール型で開発される場合が多いです。ウォーターフォール型では前の工程に戻ることが難しいため、Figmaを活用して過不足ない制作物を用意することを心がけましょう。XXページの図1はウォーターフォール型となります。

アジャイル型

一方でアジャイル型は、要件定義、設計、デザイン制作、開発、テストの一連の工程を、機能やページ単位で実施し、一連の工程を繰り返していく手法です図2。

@div:figure

アジャイル型開発の流れ @divend

Webサイトの一部ページを追加作成するときや、小規模なサイトとしてオープンしたあとに順次機能を追加していくときなどに適しています。アジャイル型では、開発のスピードが求められることが多くあるので、Figmaの各種共有機能などを用いて、作成から確認、承認までのフローを効率化しておくことが重要となるでしょう。