フォーカスしたいもの
SketchやAdobeXDと並ぶメジャーなデザインツールである「Figma」。簡単な操作でデザインを作成することが可能で、他のメンバーやクライアントとの共有が容易にできる点が大きな特徴のデザインツールです。
SketchやAdobeXDは長い間、デザインツールとして長い人気を誇っていました。しかしFigmaも負けてはおらず、リリース開始からユーザーがより使いやすいようアップデートを繰り返し、大きな話題を呼びながら利用者も増加しています。
このページでは、Figmaのできることやメリット・デメリット、他のデザインツールとの違い、Figmaの使い方までご紹介します。
Figmaとは？できることは？
Figmaとは、インストールが不要な、ブラウザ上ですぐに使えるデザインツールです。ソフトを起動させる手間もなく、初心者でも使いやすい手軽さで人気を集めています。
ワイヤーフレームの共同編集や、複数人で画面を見て議論することも可能で、動作自体もシンプルで軽く、使いやすいのがFigmaの特徴です。
Figmaは、Webデザインやグラフィックデザイン、アプリのUIデザイン、ワイヤーフレームなど、幅広く制作することが可能なデザインツール。上記以外にもPowerPointの代わりとして資料作成などに用いることもできるほどに汎用性があります。
開発用コードも見ることが可能であるため、エンジニアへの指示書として使うことが可能です。できあがったワイヤーフレームやデザイン画面の配置したコンテンツなどに動きをつけたり、ページ遷移をつけたりしてプロトタイプにすることもできます。
Figmaを使うメリット
Figmaをおすすめする理由として、主に以下で紹介する3つのメリットがあります。
これら以外にも、コメント機能で情報共有が可能な点やデータを送付する手間が不要、バージョン管理をする必要がない、プラグインが豊富、などといった点もFigmaのメリットといえるでしょう。
ブラウザ上で操作できるため環境を選ばない
Figmaはブラウザ上で操作・利用ができるデザインツールです。そのため、インターネット環境があればどんな場所でも利用できます。
PCなどにソフトウェアをインストールする必要がなく、データの受け渡しも容易です。
MacやWindowsなどの、OS環境を気にすることなく使えることもFigmaの大きなメリットといえます。
複数人で共同編集が可能
Figmaは1つのワイヤーフレーム、デザインを複数人のチーム内で共同編集することが可能で、同時に編集するもできます。
デザインしたコンテンツを流用できる「コンポーネント」機能を用いることで、複数のメンバーで作業を分担し、作業効率を高めることができるのもFigmaのメリットです。
シンプルな操作性で動作も軽い
Figmaはソフトウェアをインストールせずに使うことが可能でありながら、動作がとても軽いため作業効率が落ちずに操作が可能。
使い方に関しては後ほどご紹介しますが、Figmaはフレームと部品（コンポーネント）を組み合わせて作り上げるデザインツールです。
Figmaの操作性はとてもシンプルになっています。基本的な動作として、画面サイズのフレームを作成し、部品を作成、作成した画面のコンテンツ部分などに対して実行操作を行う、という3つの作業だけで最低限のワイヤーフレームを作成可能です。
Figmaのデメリット
Figmaを用いることで上記のメリットを享受できるのですが、もちろんデメリットも存在します。
デメリットをしっかりと理解した上で、Figmaを使うかどうか見定めましょう。
出力できる拡張子が少ない
Figmaはエクスポートできるファイル形式が2021年現在、まだ4種類のみです。
- PNG
- JPG
- SVG
以上の4種となっております。
デザインの納品をする際、PSDデータなどで納品するケースが多いでしょう。
Figmaのサービス内では、上記4種類での出力しかできないのですが外部サービスを使うことでPSDデータに変換することが出来るそうです。
どうしてもPSDファイルで納品しなくてはいけない場合は、外部サービスの検討も考えましょう。
日本語の情報が少ない
Figmaがそもそも海外製品のため、まだ日本語への対応が十分ではありません。
サイト内の説明や公式サイトも全て英語のため、使い方に慣れるまで少し時間が掛かってしまいます。
また、フォントのバリエーションに関しても問題があり、和文のフォントの種類が少ないです。
デザインツールのため、そこまでこだわる必要はないのかもしれませんが、クライアントへの提案の際にもフォントのデザインは重要な部分です。
「フォントまでこだわりたい」という場合は、別のデザインソフトを用いることをおすすめします。
使用しているブラウザがchromeの場合、拡張機能を使って日本語化することが可能です。
しかし、公式で提供している日本語表示ではなくchromeの拡張機能で変換した日本語が表示されているため、間違った日本語となっている場合があります。
拡張機能を使った日本語化を検討している場合は、間違った翻訳をされている可能性を踏まえて、使うようにしましょう。
他デザインツールとの違い
2021年現在のUIデザインツールのトップ3である、Figma、AdobeXD、Sketch。基本的な機能は、どのツールでも共通しています。
ここでは、デザインツールを選ぶ際の参考になるよう、AdobeXDとSketchをご紹介し、Figmaとの違いをまとめます。
上記まででご紹介したFigmaの特徴やメリットと比較して、自分にあうデザインツールを選ぶ参考にしてください。
AdobeXD
AdobeXDは、何と言っても「Adobe製のツール」であることが大きな特徴でしょう。
長きにわたってデザイナーには馴染みの深いデザインツールを提供していることもあり、絶大な安心感があります。
また、Adobeのコンプリートプランに登録している場合、AdobeXD自体を無料で使うことが可能。
自社でコンプリートプランに加入している場合、デザインツールの導入にコストをかける必要がなくなるので、経費削減という観点でのAdobeXDの導入はおすすめです。
先日のアップデートで、リアルタイムでの共同編集機能が実装され、Figma同様にひとつのデザインを複数人で共同編集することが可能となりました。
Figmaとの大きな違いは、現状ほとんどありません。主要な機能に関してはどちらのデザインツールも実装しており、細かい部分での違いはありますが、明確に優劣をつけられるほどではありません。
しかしAdobeXDは、プロトタイピングツールとしての機能が優れており、ただ単にUIデザインの制作ツールとしては、FigmaやSketchの方が優れている印象です。
Sketch
Sketchは他のデザインツールより一足先にリリースされました。
今ではAdobeXDやFigmaが大きく成長してきたこともあり、1強ではなくなったものの、他のデザインツールと共に第一線を走っているツールのひとつではないでしょうか。
他のツールと比較して一番の使いやすさを誇るのがSketchです。
プラグイン機能やシンボル機能などを、他のツールよりも早く導入し、使いやすさなどに関するユーザーの不満を解消していったことが、最も使いやすいと感じる理由でしょう。
Sketchを利用できる環境はMacOSのみである点に注意が必要です。
Figmaの使い方
Figmaは、配置揃えや図の描写なども直感的に操作が出来るので、とても便利なデザインツール。デザインツールにあまり触れてこなかった人でも、操作方法を習得するまでにあまり時間がかかりません。
ここからはFigmaの最低限の使い方を簡単に解説していきます。
ワイヤーフレームを作る
Figmaはとても簡単にUIデザインやワイヤーフレームを作ることができます。
デザインのために必要なフレームはすでに登録されているため、選ぶだけで設置ができます。
上部のメニューからFrameを選択し、右側に表示されるDesignの項目から該当するフレームを選ぶと完了です。
iPhone製品やandroid、PCブラウザにも対応しています。
コンテンツを作っていく
図形の配置もツールを選択するだけで作成可能です。図形にテキストを配置して、図形のサイズやレイアウトを調整するだけで、整ったデザインが出来上がることでしょう。
メニューの四角図形のアイコンをクリックすることで、さまざまな形の図形を選択でき、四角形以外にも直線や三角形などを選択し設置することが可能です。
テキストを作成する場合も、メニューにある「T」のアイコンをクリックすることで入力が可能になります。
プロトタイプを作る
ワイヤーフレームの状態から、完成イメージをより分かりやすくするためにプロトタイプの作成は不可欠といえます。
ページのデザインをよりイメージしやすくしてページの遷移を確認するため、チーム内やクライアントとの内容確認のためにも、プロトタイプの作成は重要な作業です。
操作画面のプロトタイプモードをクリックすることで作成を始めることが可能となります。
リンク先の設定には矢印を使うことで、視覚的にわかりやすく遷移先を確認することができます。
メンバーやクライアントと共有する
共有方法はとても簡単で、URLを共有したいメンバーやクライアントに伝えるだけで完了。
書き出してメールなどで送信するよりも、はるかに簡単に制作したデザインを確認してもらうことが可能です。
相手のアプリケーションやアカウントの有無を気にすることなく、URLをクリックするだけで確認ができるため、クライアントにチェックを求める場合などにとても重宝します。
Figmaを有効的に導入して効率よく開発をすすめよう（まとめ）
Figmaはチーム内での共同編集や、複数人での画面を見ての議論などが可能でありながら、環境を選ばず、動作自体もシンプルで軽いのが大きな特徴です。
Figmaを導入することは、自社にとって利便性があると共に、クライアントとのデザインの確認や共通認識の確認のためにはとても便利なデザインツールです。
Figmaの特徴を理解して有効的に導入し、開発を効率よくすすめていきましょう。
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
