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

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

Figma(フィグマ)とは

image10.png

(画像引用:Figmaオフィシャルホームページより)

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

特に便利なのが、Web上で利用することです。アカウントされ取得していれば、作成したデザインは制作時に使用したPCではなく、Web上で呼び出すことができるため、オフィスと自宅で作業をスムーズに継続できます。また、1つのファイルを複数のメンバーで編集することができるので、デザイナーのほか、ディレクターなどの制作に関わる様々な役割の人とデータを共有し、相談しながら制作物を仕上げられます。スムーズに作業を進められるように最適化された仕様は、オンラインをフル活用する現在のビジネスシーンにぴったりだと言えるのではないでしょうか。

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

Figma(フィグマ)の使い方

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

Figmaオフィシャルホームページhttps://www.figma.com

デザインをつくる

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

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

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

image7.png

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

image5.png

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

image1.png

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

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

image2.png

プロトタイプをつくる

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

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

image3.png

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

image6.png

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

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

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

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

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

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

image9.png

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

image4.png

データをPDF化する

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

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

image8.png

まとめ

今回はFigma使い方のポイントをシンプルに紹介しましたが、便利さが伝わりましたでしょうか。Web上の利用だけではなく、デスクトップアプリもありますので、気になる方は使ってみてください。

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

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

この記事を書いた方におすすめ

Photoshopの代わりになる写真編集アプリ・Webサービスをご紹介します。Photoshopは高額で手が届かなかったり、もう少し機能を絞って使いたい場合には、これから紹介するサービスがオススメです。