Figma（フィグマ）とは？初心者でも分かるWebデザインツールの使い方

UIデザインやワイヤーフレームの作成に便利なデザインツールがほしいと思ったことはありませんか？Adobe XDやSketchなどがメジャーなところですが、他にもインターフェースがわかりやすく、操作性と利便性の高いツールがいくつかあります。

今回紹介する「Figma（フィグマ）」は、それらに引けを取らず、さらに便利な機能も備えたツールです。Figmaがどのように役立つものなのか、使い方を初心者にもわかりやすいようにシンプルにまとめました。

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

Figma（フィグマ）とは

（画像引用：Figmaオフィシャルホームページより）

Figmaとは、ブラウザ上で簡単にデザインができるツールです。インターフェースのデザインを、場所を選ばずにブラウザさえ起動できれば使えるため、利便性が高くチーム体制での作業にも向いています。何よりフリープランがあり無料で利用できるので、誰にでも手軽に導入できることから、デザイナーではない人でもちょっとした用途に役立つでしょう。

Figma（フィグマ）のメリット

Figmaの便利な点として、Web上で利用できることが挙げられます。アカウントさえ取得していれば、作成したデザインは制作時に使用したPCではなく、Web上で呼び出すことができるため、オフィスと自宅で作業をスムーズに継続できます。

また、1つのファイルを複数のメンバーで編集することができるので、デザイナーのほか、ディレクターなどの制作に関わる様々な役割の人とデータを共有し、相談しながら制作物を仕上げられます。スムーズに作業を進められるように最適化された仕様は、オンラインをフル活用する現在のビジネスシーンにぴったりだと言えるのではないでしょうか。

Figmaはハイスキルなデザイナーだけが使えるツールではなく、様々な役割の人が感性をアウトプットし共有できる仕組みが備わっている魅力的なデザインツールなのです。

Figma（フィグマ）の使い方

Figmaがどんなものかを理解していただくために、実際の使い方をいくつか紹介します。以下のオフィシャルホームページでログインアカウントを取得してから、試してみてください。「Try Figma for Free」をクリックして試用アカウントを取得します。この際、Googleアカウントを持っていると、利用開始がスムーズです。

参考：Figmaオフィシャルホームページ

デザインをつくる

UIデザインやワイヤーフレームを手軽に作成できます。デザイナー以外の人なら、ワイヤーフレームはパワーポイントで作っている人も多いでしょう。*Figmaを使えば、図名の描写から配置揃えなどもスムーズに行えるので便利です。直感的な操作で使えるので、操作方法を習得するまでそれほど時間がかかりません。*デザイン制作に必要なメジャーなツールをすべて搭載しているので、スピーディーに作業を進められます。

デザインのために必要なフレームは、すでに登録されているため選択のみで設置できます。例えば、iPhone Xのサイズのフレームを利用したい場合は、左上の赤枠で囲っているマークのメニューからFrameを選び、右側のメニューの「DESIGN」のタブから選ぶだけで設置することが可能です。

iPhone X以外に、Androidにも対応できます。当然、デスクトップPCのフレームも表示できますが、Apple Watchなどのフレームにも対応できる部分は対応幅の広さを感じます。

図形の配置もツールを選択するだけで可能です。図形にテキストを配置してレイアウト調整をすれば、それらしいデザインに見えてくることでしょう。図形は右上にあるメニューから四角図形アイコンをクリックすると、以下のように四角形や直線、矢印など色々な形状のオブジェクトを設置できます。

また、テキストの設置は右上のメニューから「T」のアイコンをクリックすると入力できるようになります。右側にあるメニューでフォントの種類やサイズ、センタリングなどの配置を調整可能です。

複数のオブジェクトを選択してグループ化することや、コピー＆ペーストも可能です。ショートカットが充実しているので、慣れるほど使いやすく感じるでしょう。使い心地としては、パワーポイントをもっとデザイン制作寄りにした感覚です。

以下のような簡単なワイヤーフレームなら3分程度で作れるでしょう。右上にある三角マーク（カーソルを重ねるとPresentと表示されるボタン）をクリックすると、iPhone Xのフレームにあてはめたプレビュー画面を表示できます。下の画像は、作成画面とプレビュー画面の2つを並べたものです。

プロトタイプをつくる

デザインをよりWebらしく伝えられるようにできるのがプロトタイプです。ご存知の通り、プロトタイプは「試作品」といった意味であり、ワイヤーフレームよりもさらに完成イメージを想像しやすい状態になります。具体的には、各ページデザインのイメージのほか、ページの遷移を確認できるようになるのです。完成をイメージできる状態で確認作業ができるため、詳細を作り込んだ後に手戻りが発生するリスクを減少させます。

プロトタイプの作成は、プロトタイプモードに切り替えて設定します。以下のように閲覧するデバイスの設定やスタートする画面の選択を行います。

各ページのボタンのリンク設定も必要です、以下のように、矢印をつかって視覚的にわかりやすくリンクをつなぐことができます。

また、各ページの中の細かなアクションも設定できるので、完成イメージをさらに具体化できます。アニメーションの挙動を確認できれば、実装時の伝達ミスなどを避けられます。

プロトタイプを動作させるには、前述したデザインの作成時のプレビューと同じように、画面の右上にある三角マーク（カーソルを重ねるとPresentと表示されるボタン）をクリックします。ボタンを押すとブラウザの別画面が起動し、プレビュー状態になります。プロトタイプをスムーズに確認することで、補正しなければいけない部分があれば、すぐに修正したりメモに残すことが可能です。

チームメンバーやクライアントと共有する

URLを伝えるだけで、制作したデザインを他の人に確認したもらうことができます。ファイルを書き出して、メールなどで送信するのは、手間がかかるものです。何より、何回も添付ファイルのやりとりをするのは、双方にとって面倒に感じるだけではなく確認ミスが生じることもあるでしょう。

Figmaの場合、URLを相手に伝えるだけの方が、圧倒的にスムーズなコミュニケーションが可能になります。デザインを見せるだけなら、アプリケーションに依存せず、アカウントの有無も関係ないので、クライアントに余分な作業をしてもらうこともありません。

共有するには、右上にある「Share」をクリックします。Figmaのアカウントを持っている人と共有する場合は、閲覧のみを許可するのか、編集も可能にするのかを選択します。Figmaに登録しているメールアドレスを入力して「Send invite」を押せば招待完了です。アカウントを持っていない人には、「Copy Link」を押してURLをメールやチャットなどで伝えましょう。

そして、他の人にデザインをチェックしてもらう際に大変役立つのがコメントツールです。*デザインの必要箇所に対して、コメントを付与できるので、イメージに書き込む必要もなければ、メールなどで説明することもありません。*ただし、コメント以外の編集作業に関しては、誰もが好き勝手に手を出してしまうと誤解が生じてしまう場合がありますので、気をつけましょう。

データをPDF化する

UIやワイヤーフレームを作成し、それをクライアントに確認してもらう場合、データをPDF化すると便利です。メール添付やChatworkなどの手段ですぐに渡せるからです。FigmaにはPDFで出力する機能があります。PDF化いまや一般的な機能と思われがちですが、かなり使えます。ビジネス上、柔軟なコミュニケーションには、様々な人が使いやすい状態にファイルを変換することが欠かせないからです。

PDFファイルをエクスポートする方法は簡単です。PDFだけではなく、PNG、JPG、SVGファイルとして出力することもできます。以下の画面のように、右側のメニューの「EXPORT」から「PDF」を選択します。出力するページを指定して、保存場所を選択しましょう。

▼他にもデザイン系の簡単ツールいろいろ！

みんなが使えて導入しやすい！デザイン・動画・サイト制作の【簡単ツール特集】

専門職でなくても使いこなせるデザイン制作関連のツールを特集。弊社のマーケター・営業メンバーや総務・人事担当も実際に使えているツールを、1カテゴリにつき1つピックアップしてご紹介します。

Figma（フィグマ）はデザイナー以外も活用できるデザインツール

今回はWeb上で使えるデザインツール「Figma」について詳しく紹介しました。Figmaにはデスクトップアプリもありますので、気になる方は使ってみてください。

Figmaの良さは他にもいろいろとありますが、やはり*デザイナーではない人がビジネスコミュニケーションのために使うツールとしても長けている部分が見逃せません。*これまでパワーポイントを使って作っていたデザインレイアウトを伝えるための資料や提案書の作成にも、Figmaは活用できるでしょう。

デザインツールとしての制作機能、そしてチームで作業や確認が可能な共有機能、完成イメージが具体化するプロトタイプ機能を搭載しつつ、フリープランでスタートできるので試してみましょう。

デザイナー・デイレクターにおすすめ

▼エンジニア不要でサイト更新できるCMS
思いついた施策を自分で実行できるからPDCAが高速に回せる。htmlやサーバの知識不要、直感的に操作できるCMS

圧倒的に使いやすい国産CMSなら！

ノーコードでWebサイトやLPの作成・更新ができるferret One

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

みんなが使えて導入しやすい！デザイン・動画・サイト制作の【簡単ツール特集】

専門職でなくても使いこなせるデザイン制作関連のツールを特集。弊社のマーケター・営業メンバーや総務・人事担当も実際に使えているツールを、1カテゴリにつき1つピックアップしてご紹介します。

顧客満足度を高めるだけでは効果的なCXとは言えない？ユーザーインサイトの逆算が鍵

消費の形態が変化するにつれ、現代では「モノ」ではなく「コト」や「トキ」を売るのが重要となっています。企業のマーケティング部門でも、顧客満足（CS）や顧客体験（CX）という言葉を耳にしない日はなくなりました。この記事ではユーザーの心理から逆算して、現代社会で効果のあるCXとは何か、CXをどのようにデザインすればよいのか、という点について解説します。

Adobe XDの基本的な使い方を解説！専門知識不要でUI・UXデザインが簡単に！

Adobe XDは、Adobeが提供しているデザインオールインワンツールです。UI/UXデザイナーは特に活用したいツールとなっており、日本語にも対応しています。デザイナー以外もデザインを構築する機会も多く「デザインの知識がなくても本当につかえるの？」といった心配もあるかと思います。 そこで今回は、Adobe XDの使い方について解説します。