デザインを制作する際にワイヤーフレームやプロトタイプを作るのに便利なツールと言えばAdobe XDやSketchなどがメジャーですが、最近ではFigma（フィグマ）というサービスも人気が出てきています。
今回はブラウザで利用できるWebデザインツールの使い方Figma（フィグマ）について解説いたします。
Figma（フィグマ）とは
Figmaとは、ブラウザ上で簡単にデザインができるツールです。
インターフェースのデザインを、場所を選ばずにブラウザさえ起動できれば使えるため、利便性が高くチーム体制での作業にも向いています。
フリープランが無料で利用できるので手軽に導入できることから、デザイナーではない人でもちょっとした用途に役立つでしょう。
なお、Adobe XDはスタータプランという無料版があったのですが、現在では残念ながらサイトから無くなってしまいました。
それでも無料で利用したいという方向けに以下の記事でAdobe XDを無料で利用できる方法をご紹介しています。
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」を選択します。出力するページを指定して、保存場所を選択しましょう。
コメントを残す