Figmaとは何か 初心者でもわかる使い方
現代において、Web上のホームページ制作は、専門職だけでなく一般の人でも行う時代です。このホームページ制作で、最近注目を浴びているデザインツールが「Figma（フィグマ）」です。Figmaを使えば、誰でも無料で手軽にホームページのデザインをすることが可能となります。この記事では、初心者の方でも簡単にFigmaを使えるように、その始め方、使い方をご紹介します。
WebデザインツールFigmaとは何か？
Figma（フィグマ）とは、共同編集がブラウザ上で行えるデザインプラットフォームのことです。
アメリカのサンフランコシスコ発のFigma, Inc.が「すべての人がデザインを利用できるようにする」というビジョンのもとに開発したデザインツールです。ユーザーインターフェース（UI）のデザインやワイヤーフレーム（ホームページの基本的なレイアウトとコンテンツの配置についての設計図のことです）の作成にとても便利です。Figmaは、サクサク動く操作性とインターフェースのわかりやすさから、使い勝手がよく、人気を集めています。
Figmaは、専門職でない人でも活用できるものですが、UIデザイナーにとってうれしい機能が多く結集しています。UIデザイナーの仕事で必要な、ホームページのUI設計の際に使う、ワイヤーフレームやプロトタイプ（試作品）の制作などにとって最適な機能が備わっているのです。
Figmaの長所をご紹介します。まず、何と言ってもブラウザ上で簡単にデザインができることです。これまでワイヤーフレームの制作には、Microsoft社のPowerPointを利用していた場合が多いのですが、Figmaは、PowerPointにあったデザイン性をさらに強化したものになっています。
次に、リアルタイムで複数人による共同作業ができることも大きな長所です。誰でも手軽に操作できることから、相互にコメントを送りあったりしながら共同編集し、一人でデザインするよりもより良いデザインを作ることを可能にします。
また、無料で使えることも大きなポイントです。Figmaには複数のプランがありますが、フリープランもあり、お試し利用もできます。
さらに、デスクトップアプリもあるので、WindowsとMacそれぞれにインストールして利用できます。
Figmaでどんなものが作れるのか
Figmaを利用することで、以下のようなものが作れます。これ以外にも様々なものを制作できますので、ご自身の仕事に応じて広く活用しても良いでしょう。
１ ワイヤーフレーム
ワイヤーフレームは、レイアウト設計するのためのもので、これにより、ページの「どこに」「何を」「どのように」配置するかをまとめることができます。
Figmaでは、このワイヤーフレームを作成することができます。Figmaでは、デスクトップブラウザやスマートフォンの各規格の規定サイズに合ったテンプレートのようなものが備わっています。手軽に、ホームページ等のワイヤーフレームの制作や掲載がこのテンプレートで可能になります。UIデザインを行いたい場合にも思い通りに対応できます。
２ ホームページや、Web広告用のグラフィックデザイン
グラフィックだけの作成もできます。画像を読み込んで使うことができるので、柔軟なグラフィック作成も可能となります。
３ SNSへ投稿する画像の作成
Figmaではブラウザで手軽に画像作成ができるので、スピーディーに画像を作ることに向いています。会社のマーケティングにおいては、SNSを利用しているという企業も多いでしょう。そして、SNSを使う場合に、SNS投稿用画像も一緒に作っていることも多いかと思います。SNSの画像作成・投稿はスピード勝負なので、手軽に素早く使えるFigmaは適しているといえます。
４ プロトタイプ（試作品）の制作
プロトタイプとは、製品やサービスなどの試作品のことですが、Web業界でプロトタイプという場合、ホームページやアプリなどの試作品を意味します。ワイヤーフレームは視覚的に構成を把握するものですが、プロトタイプは動的に構成を確認できるものです。プロトタイプではページの遷移などを確認できます。このプロットタイプの作成もFigmaには可能です。
５ プレゼン用資料の作成
プレゼン資料をFigmaで作るという人もいます。これまではパワーポイントを使うことが一般的でしたが、Figmaでも使い方に慣れると、わかりやすいプレゼン資料を作成することができます。
Figmaを使うメリット
Figmaを使うことのメリットは何でしょうか。
デザイン制作に使うほとんどの必要なツールがある
デザイン制作に必要なツールは、実はほとんど決まっています。テキストツールや図形描画ツールなどの一通り必要なツールや機能は、Figmaには既に搭載されています。そのため、オーソドックスなデザインの作成には不便しないでしょう。
ブラウザ上で利用ができる
先にも触れましたが、FigmaはWebのブラウザ上で手軽に利用することができます。デザインをするパソコン等は決まっていて、デザイン制作はそのパソコンでなければできないというケースはよくあります。しかし、Figmaでは、パソコンがインターネットにつながっていれば、ブラウザ上で手軽に修正等も可能で、スムーズな作業が可能となります。とりわけ、テレワークと出社両方でデザイン制作する場合に、便利といえます。
複数人で一つのファイルを編集することができる
Figmaのメリットで大きいのは、共同で編集ができることにあります。これまでは、複数人で制作する場合、作成したワイヤーフレームの画像や印刷したデータを複数人で共有して閲覧することが一般的でした。しかし、Figmaを使うと、多少時差はありますが、ホームページのワイヤーフレームであれば、ほとんどリアルタイムで編集ができるため、よりスピーディーに共同作業ができます。1人で制作するよりも、複数人の意見を取り入れながら制作していったほうがよりよいホームページができることも多いので、このメリットは大きいといえます。
専門職だけでなく色々な職種の方も参加しやすい
Figmaと言えば、UIデザイナー向けのツールというイメージがあります。しかし、実際にはUIデザイナーのようにプロだけでなく、一般のマーケティング担当者やエンジニア、Webディレクターなどが、ちょっとした資料や画像制作をしたいといった場合にも活用できるものになっています。
Figmaの料金プラン
Figmaの料金プランは、「Starter」「Figma Professional」「Figma Organization」3つあります（2022年7月14日現在）。
Starterプランは、無料の個人向けプランです。作成可能なファイル数などに制限はあるものの、クラウドストレージは無制限で、個人や小さい規模のチームで利用するには問題ない内容になっています。この無料プランを使えることがFigmaの大きなメリットといえるでしょう。
ProfessionalとOrganizationは、チームは有料プランです。本格的に共同作業したい方向けに、月額制となっています。
Figmaの始め方・使い方
それでは、順を追ってFigmaの始め方や使い方をご紹介いたします。
１ アカウントを作成する
最初にFigmaを使うときは、まずログインするアカウントを作成します。Figmaの公式ホームページである「https://www.figma.com/ja/」にアクセスし、中央にある「Figmaを無料で体験する」をクリックします。そうすると下記のような画面が出てきます（なお、以下では英語表記の画面に従って解説していきます。）。Googleアカウントでもログインできるので、もしGoogleアカウントをお持ちであれば手軽にログインができます。また、新しくメールアドレスとパスワードを入力してアカウントを作成することもできます。
ブラウザ上でFigmaを利用するため、アプリケーションのダウンロードは必要ではありません。作成したデータは、ファイルのクラウドに自動保存されるようになっています。ダウンロードしてインストールしたほうがいいという場合には、デスクトップアプリもありますのでそちらを使うと良いでしょう。
２ 画面の構成を理解しましょう
Figmaでは画面の構成を理解しておくことが必須です。
上記画面をもとに説明します。中央がデザイン画面で、キャンバスみたいなものです。「フレーム」と言われるアートボードを追加して制作物を作成していきます。
様々なツールを選択して操作する場合に、画面の左上にあるツールバーを利用します。メインメニュー、ムーブ（選択）ツール、フレームツール、図形ツール、ペンツール、テキストツール、リソースツール、手のひらツール、コメントツールなどがあります。
レイヤーは一番左側のスペースに表示されます。ここでオブジェクトの構造を把握できます。一番右側のスペースには、デザインやプロトタイプといった制作の種類を選ぶタブがあります。またこのスペースではプロパティを用いて、オブジェクトの設定を詳細に行うことができます。
３ デザインを作っていく
まず、新規ファイルを作成します。
新規ファイルを作成するため、ツールバーの一番左からメインメニューを選択します。ここから「New design file」を選択すると、先の画面のように中央にキャンバスが開かれることになります。
Designモードを選択する
次にDesignモードを選択します。作りたいものに合わせて、デザインを構成していきます。今回はスマートフォン向けホームページのワイヤーフレームを作ることを想定しますので、デザインを作成するモードにしないといけません。右側スペースの上部にあるタブメニューから、一番左の「Design」を選びます。するとDesignモードとなるので、ワイヤーフレームやデザインなどを作成できます。
フレームの選択
続いて、フレームを選択する必要があります。ワイヤーフレームを作成する際には、ブラウザやスマートフォンなどのサイズを指定する必要があります。Figmaでは、既に複数のワイヤーフレーム作成に必要なフレームが登録されています。
図形を描く
次に図形を描いてみましょう。まず中央上部に四角い図を描いてみます。
上記の図のように、ツールバーにある図形ツールをクリックすると、四角、線、矢印、三角、星などのメニューが出てくるので、これを選択して簡単に描画ができます。
テキストの配置
次にテキストを配置してみましょう。テキストツールを選択すると、キャンバス上にテキストを入力できます。好きな位置でクリックすると、入力モードになり、文字を入力することができます。中央揃えへの配置調整やフォント種類の変更、サイズの変更なども右側メニューからできます。
コピー＆ペースト
同じパーツを連続で配置したいときには、コピーしたい図形やテキストをクリックし、ショートカットキー「Ctrl+C」でコピー、「Ctrl+V」で貼り付けし、何度でも簡単に複製を作ることができます。
4 プロトタイプを作る
次に、プロトタイプを作ってみましょう。
Prototypeモードを選択
まず、先ほどと同様、ファイルを新規作成します。その後、プロトタイプの作成のために、Prototypeモードに切り替えます。
リンクを設定する
リンクを設定し、各ページを接続して、シミュレーションでページの切り替えを確認することができます。各要素から矢印も引けるので、目で見てチェックしながら、リンクをつなぐことができます。その他にも、アクションの設定も行うことができます。
実際にプロトタイプを動作させてみる
それでは、いよいとプロトタイプを動作させてみます。画面の右上の三角マークをクリックし、カーソルを重ねるとPresentと表示されるボタンがあります。 このボタンで、ブラウザ上の別ウィンドウが自動的に起動してプレビューが表示され、実際の動作を見ることができます。
５ 出力を行う
作成したものは、出力をして自らのパソコンに保存することができます。右側のメニューにある「Export」の選択メニューを開きます。「PNG、JPG、SVG、PDF」の4つの保存形式が表示されるので、好きなものを選びます。そして、保存場所を指定して完了です。
６ チームで共有する
Figmaでは、チームで共有して閲覧するだけでなく、共同で編集することもできます。 まず、チームで共有するには、水色のボタンで右上にある「Share」をクリックします。Figmaのアカウントを持っている人との間で共有する場合は、閲覧のみで許可するのか、編集も可能にするのか、権限を指定することができます。この場合、Figmaに登録している相手のメールアドレスを入力のうえ、「Send invite」を押します。すると共有が可能となって、編集権限が与えられた人は編集もできます。一方、Figmaに登録していない人と共有する場合には、「Copy Link」というボタンを押します。すると、共有URLがコピーでき、メールやチャットなどで相手にその共有URLを伝えて、相手はブラウザ上で閲覧することができます。
こうすることで、チームメンバーにフレームワークを確認してもらって、意見をもらうことができます。
７ コメントをつける
共同編集の機能を使う場合、意見交換をするにはコメントを送り合う必要があります。Figmaでは、共同編集の際、ユーザー同士でコメントを付けることができます。
ツールバーの1番右にあるコメントツールをクリックのうえ、コメントをつけたい画面上の場所をクリックし、文字を入力してコメントを表示することができます。誰がコメントをしたのか一目でわかるため、投稿されたコメントには、投稿ユーザーのアイコンが表示されます。
また、コメントには返信ができます。スレッドで返信ができたり、スタンプなどを利用してチャットのような気軽なやりとりもできます。右側にスレッドとしてコメントは残るので見やすくもあります。
Figmaの基本的な使い方をご紹介しました。初心者向けの基本中の基本なので、使い込みによってより有効な活用方法も見つけることができます。是非トライしてみてください。
その他の便利な機能のご紹介
他にも、まだまだ便利な機能がありますので、その一部をご紹介します。
スケールツール
ワイヤーフレームを作成したものの、見た目が小さく拡大してみたいことがあります。そんなときには、スケールツールを用いて、デザインを歪ませずに拡大ができますし、反対に縮小もできます。方法は、デザイン全体を選択した状態で、キーボードの「K」を押したままドラッグさえすれば可能です。
ヒストリー管理
作成したファイルは、開発工程の更新履歴を簡単に管理する、ヒストリー管理ができます。更新履歴を残すことで、チームで開発する際の情報共有が迅速・簡単になります。また手動でファイル更新前にデータを保存することも不要という便利な機能もあります。
画像挿入
パソコン上に保存している画像を挿入できます。ツールバー上図形ツールのメニューの、四角、線、矢印などの下に画像を選択できるメニューがあります。ここをクリックし、パソコン内の画像を指定して読み込んだうえで挿入できます。
コンポーネント作成
コンポーネントとは、一言でいうとデザイン作成に利用できるUIのパーツで、ボタン、アイコンなどのことです。このコンポーネントを作成して登録しておくことができるので、ワイヤーフレームを作成するときに、同じボタンやアイコンを使い回したい場合などに便利です。
さらに、複数の制作物に同じボタンやアイコン等のコンポーネントを挿入していた場合に、1つのボタンを編集してしまうと、他の制作物に挿入していたボタンと違いが出てしまう可能性があります。しかし、そんなときも、コンポーネントに登録しておけば、コンポーネントの図形を編集することで他の制作物に挿入していたボタンも同時に変更が反映されます。こうして、デザインの一体性を保つこともできます。
カラーパレットから色選択
複数のコンポーネントを作成していたり、多くのフレームワークを作成した場合には、複数個所の配色を変更したいということもあるかと思います。そういうとき、Selection Colorという機能に決まった配色を登録しておきます。そして、カラーパレットから好きな色を選ぶことで、色の変更作業がグンと早くなります。
他のUIデザインツールと比べてみる
Figmaは、多くの人に利用されているUIデザインツールですが、その他にも、AdobeXDとSketchなどもたくさん利用されているUIツールです。これらのツールと、Figmaにどのような違いがあるのか、比べてみます。
1 AdobeXD
AdobeXDは、Adobe製のUIデザインツールです。リアルタイムで共同編集ができるなど、Figmaと基本的な機能は同じで、機能も豊富です。その汎用性、操作性は高く、根強い人気を誇っています。Adobe XDで作成したデータは、Adobe PhotoshopやAdobe Illustratorですぐに編集することができるので、ワイヤーフレームからデザインを起こすときに便利です。機能制限もありますが無料な機能もあり、気軽さも魅力の一つです。
Figmaとの違いですが、どちらもそれほど差はありません。AdobeXDはより日本語対応がされているので、Figmaよりもより使いやすいかもしれません。
また、AdobeXDは、Figmaやこの後ご紹介するSketchと比べ、プロトタイピングツールとしての機能が優れています。WindowsとMacの両方に対応しています。
2 Sketch
Sketchとは、昔からある海外のUIデザインツールです。Windowsには対応せず、Macのみに対応できます。
Sketchの基本的な機能は、Figmaと変わりはありません。もっとも、UIデザインの点では最も使いやすいと言われています。
特に、使いやすさの面では洗練されています。これは、長年かけてユーザーの意見を反映しながら、進化させていったという歴史があることにあります。また、無料トライアルも３０日間あり、その期間制限なく利用できます。ただ、日本語対応していないことやMacのみの対応から、他のツールと比べて少しつかいにくさもあるかもしれません。
ここまで、Figmaの基本的な使い方、メリット、他のツールとの違いをご紹介してきました。さまざまな職種の方に、豊富な用途に使われているツールです。まずは気軽に始めてみて、どんどん活用してみましょう。
最後に
ご紹介した内容を最後にまとめてみます。
・Figmaとは、デザインプラットフォームで共同編集ができる。UIデザインやワイヤーフレームの作成に便利なツールで、そのビジョンは、「すべての人がデザインを利用できるようにする」にある。
・Figmaで制作できるものに、ホームページのワイヤーフレーム、プロトタイプ、ホームページやWeb広告用のグラフィックデザイン、SNSの投稿、プレゼン資料などがある。
・Figma利用のメリットとして、デザイン制作に必要なほとんどのツールがある、ブラウザ上で利用できる、複数人で一つのファイルを編集できる、専門職だけでなく色々な職種の方も参加しやすい、無料を含む複数の料金プランがあるなど様々です。
・Figmaの使い方としては、まず公式ホームページに訪れ、ログインするアカウントを作成する。そして、ログイン後にデザインやプロトタイプを作っていくことができます。さらに出力や共有、コメント機能などを利用して使い、応用的な使い方、便利な機能もたくさんある。
Figmaを利用して、新たなデザインの扉を開いてみてはいかがでしょうか。
