【ノーコード×Figma活用でWeb制作を内製化】小規模ではじめるFigma – コストをおさえるためのポイント – Figma導入編

はじめに

こんにちは、メンバーズルーツの渡邊です。 ルーツではWebエンジニアとして、主に地銀さまのシステムの開発・保守を担当しています。

先日、「銀行とデザイン デザインを企業文化に浸透させるために」という本を読みました。 この書籍では、SMBCのデザインチームが、銀行組織の中でどのようにデザインの重要性を伝えて、サービスやプロダクトの品質を向上させるための取り組みをしてきたのかが紹介されています。 

この本には、SMBC内外でのコミュニケーションを円滑にするためにデザインツールを活用していることや、一貫したユーザー体験を実現するためにデザインシステムを構築していることも記載されています。この概要は、SMBCのデザインチームが執筆しているnoteの記事にも概要が書かれおり、実際に利用されているデザインツールはFigmaであることが分かります。 Figmaはルーツ内で利用しているデザインツールでもあります。

今回の記事では、私がルーツにFigmaを導入した際に、どのような観点でFigmaを選定したのかや、Figmaを利用して気づいた、少しでもコストを抑えて利用するために工夫できるポイントについて解説します。

※この記事で記載している料金や機能は、執筆した2023年3月時点のものを記載しています。
※本記事で紹介するサービスの、商標・ロゴマーク、商号に関する権利は、それぞれの権利の所有者に帰属します。

この記事で説明していること

この記事では、スモールスタートでFigmaを利用する場合を想定した内容となっており、無料のスタータープランからプロフェッショナルプラン（編集者1人あたり月2,250円/年払いの場合月1,800円）で利用する場合に最低限知っておくべき仕様や注意点などを解説しています。

この記事で説明していないこと

本記事は、Figmaのアカウント登録方法や利用方法などについては説明していません。また、Figmaを大規模な組織で本格的に利用をしたい場合を考慮しておりません。本記事で課題としている問題は上位のビジネスプラン（編集者1人あたり年81,000円）やエンタープライズプラン（編集者1人あたり年123,048円）など有料プランで解決できることがありますので、あらかじめご了承ください。

数あるデザインツールの中でなぜFigmaを選択したのか

まず、なぜ数あるデザインツールの中でFigmaを選択したのかを説明します。理由は次の通りです。

• WebデザイナーやWeb開発者の間で最も人気が高いデザインツールである
• 無料から利用できるため手軽に導入できる
• ブラウザで動作するため、どの環境でも手軽に利用できる
• コラボレーション機能が充実しており、制作チーム内や他部門との共同作業が容易になる
• オートレイアウト機能が充実しており、レスポンシブデザインの制作がスムーズになる
• デザインの効率化や自動化を実現するための多数のプラグインがある
• コンポーネントライブラリなどデザインシステム※を作成するための機能が充実している

以上のように、FigmaはWeb制作で重要な機能が豊富であり、制作チーム内はもちろんのこと、他部門とのコミュニケーションもスムーズになるなど、多くの魅力的な特徴があります。 

特に最後に上げた、「デザインシステムを作成するための機能が充実」という点は重要です。近年では、記事の冒頭でもふれた、三井住友銀行をはじめ、みんなの銀行、PayPay銀行、りそな銀行など、銀行業界でもデザインシステムを構築する例が増えています。 なお、Figmaで利用できるプランごとの機能の詳細はこちらにまとめられています。

※ デザインシステム: デザインの原則やガイドライン、コンポーネントなどを統一的に管理する仕組みや一連のリソースを指す。企業はデザインシステムを利用することで、製品やサービスのデザインを統一的かつ効率的に行い、ブランドの認知度を高め、顧客満足度を向上させることができる。

Figmaの料金のしくみとチームを理解する

Figmaはアカウント作成時にスターターという無料のプランで利用を開始できます。この無料プランからプロフェッショナルという有料のプランにアップグレードしない限り、このユーザーに対して請求が発生することはありません。

Figmaで料金が発生するのは有料のチームを作成時と有料チームに編集権限を持つユーザーを追加した場合のみです。この場合、有料のチームを作成したオーナーに請求が発生します。以下、この請求の仕組みの理解に必要な基本的なFigmaの概念を説明していきます。

ファイルを管理する領域と共有の種類

無料プランは、ファイル数が3つまで作成可能な無料チームを作成できます、有料プランは、ファイル数が無制限の有料チームを作成できます。 この他、Figmaでは各ユーザー専用の下書き（ドラフト）と呼ばれるスペースがあり、ファイルをいくつでも作成できます。

Figmaではファイル単位での共有と、チーム単位での共有が可能です。 下書きは、ファイル単位での共有のみをサポートしています。しかも下書きのファイルは閲覧のみでしか共有できません。

ユーザーは、他のユーザーが作成した無料チームや有料チームに参加できます。有料チームにあるファイルを閲覧のみで共有する場合は料金は発生しません。

無料チームを理解する：3ファイルまで共同編集可能

無料チーム（スターターチーム）は全てのプランで作成できる無料のチームです。ユーザーはいくつでも※1スターターチームを作成できます。この無料のチーム内で作成できるファイル数は、FigmaとFigJamでそれぞれ３つまで※2に限られていますが、編集可のユーザーや閲覧のみのユーザーは何人でも招待できます※3。

なお、無料チームに招待したユーザーの権限は、FigmaとFigJamで別々の権限を設定することはできず、「チームの権限」として一括で設定することしかできません。 有料チームと共有の権限の呼び方が違っているのは、このためです。

※1 2023/3現在、複数のスターターチームが作成可能です。公式ドキュメントに作成可能な数の言及はありません。
※2 スターターチムのファイルは、1ファイルに作成できるページも3ページまでに限られています。
※3 旧仕様では２名まででしたが、2021/4/21より無制限に変更されました。

有料チームを理解する：チームごとに編集者の数だけ料金が発生

有料プランで作成できる有料のチームでは、ファイルがいくつでも作成できます。このチームには、編集者と閲覧者を何人でも招待できますが、チームを作成したオーナーに対し、チームにいる編集者の数だけ料金が発生する点に注意が必要です。

なお、無料チームに招待したユーザーの権限は、FigmaとFigJamで別々の権限を設定することができます。

下書きを理解する：個人専用だが読み取りのみでの共有は可能

下書きは個人専用のファイルを作成可能なスペースです。下書きのファイルは無制限に作成できます。この下書きのファイルは閲覧専用で他のユーザーに共有※できますが、共同で編集するためには、スターターを含むいずれかのチーム配下に移動しなければなりません。

※旧仕様では他のユーザーを編集者として招待できましたが、2021/4/21より閲覧専用に変更されました。

チーム配下のファイルは下書きに戻すことも可能です。また、Figmaはローカルにファイルとして保存することもできますので、組織でスモールスタートで利用する際に利用すると良いでしょう。

コストをおさえて利用するためのポイント

無料のスターターチームで作成できるファイル数の制限内で運用できるか

無料のスターターチームで作成できるファイル数は３つまで（且つ1ファイルあたり3ページまで）に限られています。

対策： 下書きへの移動やローカルファイル保存を活用して3ファイルの制限で運用できるかを検討する

すでに説明したとおり、チーム配下に置いたファイルは下書きに戻すことが可能であり、また、Figmaはローカルにファイルとして保存することもできるので、これらを考慮して３ファイルの制限で運用できるかを検討しましょう。効率が悪く運用できない場合は、有料プランを検討しましょう。

チームに無料の閲覧者のユーザーを追加してもユーザー自身で有料の編集者にアップグレードできてしまう

有料プランのチームに無料の「閲覧者」で新しいユーザーを招待した場合、ユーザー自身の操作で有料の「編集者」にアップグレードできてしまいます※。

対策： オーナーや管理者が、招待したユーザーの役割を「限定閲覧者」へ変更することで、ユーザー自身で「編集者」への切り替えを不可にできます。

 ただし、この操作は、新しいユーザーが招待を承諾した後にのみ可能となります。招待されたユーザーは、承諾をしてから実際に利用を開始する前に、招待者であるオーナーや管理者に連絡を行うフローとすることで、意図せぬ請求を防ぐことができます。

※公式ドキュメントに「閲覧者がアップグレードアクションを実行すると、自動的に有料アカウントになります」という記載があります。役割のデフォルトを「限定閲覧者」に変更するには「エンタープライズプラン」を利用する必要があります。

有料プランの請求はチーム毎の編集者数によって決まる

Figmaでは1編集者につき月額2,250円、FigJamでは1編集者につき月額750円がチームごとに請求されます。 

対策1： 定期的に権限の見直しを実施することで、コストを最小限に抑えられます。 
対策2： 無料のチームと有料のチームをうまく使い分けることでコストを減らせます。

定期的に見直しを実施することや、有料のチームと無料のチームを組み合わせて使うことは、公式ドキュメントでも紹介されている節約方法です。

有料プランは１０ヶ月未満の利用であれば月払いの方が安くなる

一般的に、年払いは月払いよりも安く見えますが、実際には、利用期間が10ヶ月未満の場合は月払いの方がコストを抑えることができます。ただし、長期間（Figmaで10ヶ月以上、FigJamで8ヶ月以上）編集者権限が必要なことがわかっている場合は、年払いを選択するのが良いでしょう。

まとめ

本記事では、なるべくコストをおさえてFigmaを利用するためのポイントを紹介しました。 有料プランのチームは、閲覧者としてユーザーを招待してもユーザー自身の操作で編集者にアップグレードできる点に注意し、意図しない請求が発生しないよう、本記事で紹介した方法で対策して利用しましょう。

※この記事の画像に含まれるイラストの一部に、Icons8で提供されるアイコンを利用しました。