【徹底比較】デザインツールFigmaとSketchの違い

Sketchは、UI（ユーザーインターフェース）・UX（ユーザーエクスペリエンス）デザインツールとして、何年にもわたり業界を牽引してきました。優れたUIデザインの制作を目指すウェブデザイナーにとって、Sketchは答えとなるようなツールです。その特徴的な機能（柔軟なベクター編集、簡単なグリッド、スマートガイドなど）は、UIデザイン業界全体を新たなレベルへと引き上げました。

そんなデザイン業界の発展に伴い、Sketchに代わる選択肢として登場したのが、ウェブベースのマルチプラットフォーム共同作業ツールのFigmaです。果たして、FigmaとSketchでは、どちらの方が優れているのでしょうか。

UIデザインの方向性によって、両者にはいくつか大きな違いがあります。

そこで今回は、レスポンシブウェブデザインの作成に適したツールがどちらであるかを判断できるよう、FigmaとSketchの違いに迫ります。

Figmaとは

2016年にリリースされたFigmaは、UIデザインツール界に革命を起こし、多くのデザイナーが注目しているサービスです。Sketchに肩を並べる優秀なツールで、Figmaの誕生により、ウェブデザイナーによる収入アップすらより手の届くものになりました。

ダウンロードが必要なデザインソフトウェアであるSketchとは異なり、Figmaは、ブラウザで機能するオンラインツール。また、SketchはMacのみですが、FigmaはWindowsとMacの両方のOSをサポートしており、高い汎用性があります。

Figmaには、コラボレーションデザイン機能があり、リアルタイムに他のチームメンバーとデザインを共有することができます。この機能は、デザインチームやデザイン制作工程を確認したい顧客にとっても、非常に画期的です。

さらに、面倒なソフトウェアのインストールは不要。ブラウザ経由でサービスを使用するため、デバイスのメモリを消費する心配も、複雑なインストール作業もありません。ただし、オンラインツールである以上、インターネット接続が必要になるため、インターネットがない環境では作業できません。

一度Sketchを使用したことがあれば、Figmaのユーザーインターフェースには既視感を覚えるかもしれません。これはFigma開発者による意図的な設計で、長年業界の標準ツールとして使われてきたUIをモデル化することで、誰もが簡単に使い始めることができるようになっています。

Sketchとは

Sketchは、UIデザイナーであれば誰もが知るサービスです。長年UIデザインを牽引し、新たな機能を開発し続けてきました。

Sketchが業界の標準ツールになる前は、Adobe Photoshopでデザイン制作を行うのが一般的でした。しかし、Photoshopは写真やメールのデザインには問題なく使用できますが、ウェブデザインに完璧とは言えません。

Sketchはデスクトップアプリです。コンピュータにインストールしなければなりません。インターネット接続は不要ですが、Figmaのようなウェブベースのツールとは異なり、アクセス性は制限されます。

Sketchは、2010年に登場したベクターグラフィックエディターです。Photoshopのような印刷デザインではなく、デジタルデザインに特化して開発されたことから、その当時デザイン業界に一石を投じました。

現在もローカル環境へのインストールが必要になりますが、チームでの共同作業のために同期型のウェブアプリも提供されています。

Figmaの主な特徴

Figmaの機能の数々は、UIデザイン業界で高い評価を受けています。まず挙げたいのは、作品を他のチームメンバーやクライアントに共有することができるコラボレーション機能。

他のユーザーが、プロジェクトの編集やデザイン要素に関するメモやコメントをいつでも残すことができるため、今日増え続けているリモートワーク型のチームにとって、非常に有用です。

必要に応じて気軽にメモを残すことができるこの機能は、システムに組み込まれているため、追加費用はかかりません。

この機能を活用して、プロジェクトについて顧客とコミュニケーションをとることも可能です。例えば、気に入らない要素が見つかったら、即座に意見を共有することができ、後になって修正に時間を費やす必要がなくなります。

さらに、開発者を招待してプロトタイプを検討したり、1つのリンクを使ってアセットをエクスポートしたりすることも。

また別の大きなメリットとして、システムをデバイスにダウンロードする必要がない点も挙げられます。Figmaは、ブラウザからアクセスできるウェブベースのアプリケーションです。ソフトウェアのダウンロードは複雑で、貴重なハードディスクのスペースを消費します。オンラインで使用できれば、ディスク容量の消費を避けることができ、これによってデバイスの速度とパフォーマンスが向上します。

嬉しいことに、操作の習得も非常に簡単で、最初からFigmaの機能をフル活用できるよう、初心者向けの説明も用意されています。

まだ発展中ではあるものの、2019年にはプラグインもリリースされ始めています。開発者のコミュニティが徐々に拡大しているところです。

柔軟性の高いベクター操作も、Figmaの魅力です。Figma内にはベクターネットワークと呼ばれるものがあり、このベクターネットワークを使用し、複数の線を制限無く1つの点につなげることができます。これによって、結果的にベクター描画の制作速度が上がり、プロジェクトの進行を効率化することができます。

また、FigmaにはSketchに似たコンポーネント機能があります。コンポーネントとは、ページをまたいで繰り返し利用できる要素で、メインコンポーネントがコンポーネントの性質を定義します。メインコンポーネントをコピーしたり編集したりすることで、インスタントを生成することができます。

Sketchの主な特徴

一方のSketchにも、長年にわたり業界の定番となるだけの強力な機能が揃っています。

同社は、2021年にリアルタイムコラボレーションアプリをリリースしています。この新機能は、Figmaのコラボレーション機能とほぼ同じですが、すべての共同作業者がSketchの有料サブスクリプションを利用し、Macアプリをインストールしなければなりません。

Sketchでは、デザインのバージョン履歴を表示することができ、何かしらの変更や要望によって以前のバージョンに戻ってやり直したい時などに便利です。

Sketchでは、システムに他のユーザーを招待してプロトタイプのユーザビリティをテストすることができます。これは、見落としていたデザインの欠陥やミスなどを見つけるのに役立ちます。

また、Sketchには時を経て厳選されてきたサードパーティの統合プラグインが豊富に用意されています。この点においては、2019年からプラグイン開発を開始したFigmaに大きく差をつけています。

この統合によって拡張性に優れ、翻訳、プロトタイピング、開発者へのハンドオフ、アニメーションなどの機能をプラグインで実装することができます。

さらに、ノードと呼ばれる接続された点を通して、ベクトル操作を行うことができます。ウェブインスペクタ機能で、開発者がアセットを検証したり、エクスポートしたりすることも。

また、色、テキスト、エフェクトを自由に編集して独立したスタイルを作成することも可能です。

ドラッグ＆ドロップのインターフェースで、ページ上の要素をクリックしてドラッグすることができるため、操作が簡単なのもSketchの魅力です。

Figmaのメリットとデメリット

Figmaのメリット

Figmaには、業界で最も使用されているSketchに匹敵するようなメリットが多数あります。

まずは、複数のプラットフォームで使用可能な点。また、柔軟なベクター操作とリアルタイムのコラボレーション機能によって、別の場所を拠点とするチームメンバーとも効率的に共同作業を行うことができ、優れたUIデザインを容易に制作できます。

また、開発者へのハンドオフも簡単で、たった数回のクリックで各プロジェクトを次のステップに進めることができます。

また、初心者およびプロのデザイナー向けに自己学習用リソースが十分に用意されており、すぐにデザイン制作に集中することができます。

Figmaのデメリット

多くのメリットがある一方で、無視できないいくつかのデメリットも。

Sketchと比較するとまだ新しいサービスで、プラグインの提供は2019年に開始されたばかり。そのため、拡張性は他の競合ツールに比べて劣ります。しかし、この点は今後改善される可能性が高く、いずれデメリットではなくなることが予想されます。

また、冒頭でも触れた通り、ウェブベースのアプリケーションであるため、インターネット接続が必要です。オフラインモードはありません。

Sketchのメリットとデメリット

Sketchのメリット

Sketchにも負けず劣らず数々のメリットがあります。10年以上もの間、多くのデザイナーに愛用されているのには、いくつか理由があります。

まず1つは、長い歴史に支えられていること。長年業界で標準的に使用されているということは、多くのユーザーがその操作に慣れていることを意味します。つまり、多くのウェブデザイナーが学んできたことで、Sketchを使いこなすためのドキュメントや解説などのリソースが多数存在しています。

また、Sketchを最大限活用するために長年にわたって構築されてきた、さまざまなサードパーティプラグインとの統合も大きな魅力です。

PCにインストールするため、オフラインで作業ができるのも特徴です。安定したインターネット環境がない場合や、Wi-Fiが利用できない外出先で作業が必要になる場合には、大きなメリットになります。

Sketchのデメリット

一方で、デザインツールを探しているデザイナーにとって問題となり得るデメリットも。

例えば、SketchはMacでしか使用できません。そのため、Windowsでの操作に慣れている、または高価なMac製品を購入する予算がない場合、Sketchは候補から外れます。

また、リアルタイムコラボレーションのウェブアプリは便利ですが、まだリリースされたばかりで、制限があります。今後優れた機能になっていくかもしれませんが、現時点ではFigmaのコラボレーション機能に分があります。

そして、ローカル環境へのインストールが必要になるため、ハードディスクの容量を消費し、Macの速度を低下させる可能性もあります。

FigmaとSketchの徹底比較

FigmaとSketchのメリットとデメリットをおさえたところで、ここからはさらに掘り下げて、さまざまな角度から両者を比較してみます。

コラボレーション

この機能に関しては、Sketchは2021年にウェブアプリの提供を開始したばかり。さらに、共同作業者全員がSketchの有料サブスクリプションを契約しなければなりません。また、Sketch自体と同様、Macでのみ使用可能です。

このクラウドベースのコラボレーション機能は、言うなればDropboxのファイル共有システムのようなものです。

一方、Figmaではあらゆるプラットフォームでリアルタイムに共同作業を行うことができます。こちらはGoogle Docsのような仕組みになっており、複数のユーザーが同時に作業しながら、目に見える変更やコメントを残すことができます。他のユーザーのマウスの動きも確認することができ、同期やタイムラグに関連する懸念もありません。

費用対効果

Sketchには、2つの料金プランがあります。

Standardプランは、ユーザー1名につき月額9ドル。プロジェクトの閲覧者は無制限に追加可能です。Businessプランは、ユーザー1名につき月額20ドルで、最低25名以上のデザイナーを抱える大企業向けです。

また、Businessプランは年払いのみで、大きな先行投資が求められます。

Businessプランでは、シングルサインオン（SSO）、クラウド上の無制限ストレージ、請求書作成、ライブチャットによる技術サポート、専任のカスタマーサポート担当者、セキュリティレビューと条件の設定などの機能が利用できます。

Figmaの価格設定はSketchよりも透明性が高く、複数の料金プランが用意されています。

Starterプランは無料で利用できますが、Figmaファイル3つ、FigJamファイル3つまでに制限されます。

個人ファイルや共同作業者の追加には制限がなく、プラグイン、テンプレート、ウィジェットも無料で使用できます。さらに、Figmaのモバイルアプリの使用も含まれています。

Professionalプランは、ユーザー1名あたり年払いで月額12ドルで、月払いで月額15ドル。

Figmaファイル、バージョン履歴、共有権限の機能を無制限に利用でき、特定のプロジェクトを非公開にしてアクセス権限を管理することも可能です。加えて、チームライブラリや、共同作業者との会話を音声録音する機能もあります。

Organizationプランは、年払いのみで、ユーザー1名あたり月額45ドルです。

このプランでは、組織全体のライブラリを作成することができます。システム分析の設計やブランチ、マージも可能です。

ファイルの一元管理とシングルサインオンも含まれ、管理・課金が一元化されます。また、非公開のウィジェットやプラグインを利用することもできます。

最もグレードが高いプランはEnterpriseで、ユーザー1名あたり月額75ドル、FigJamエディター1名あたり月額5ドルで利用できます。このプランも年払いのみですが、柔軟な管理と高度なセキュリティを実現できます。

使いやすさ

どちらも似たインターフェースを搭載しており、どちらかの使い方さえ知っていれば、どちらの操作も簡単に行えます。

Figmaでは、解説記事や動画を提供しており、初心者でもすぐに使い始めることができます。Sketchの場合は、公式ドキュメントには限りがあるものの、長年多くのデザイナーに使用されていることから、オンラインで多くのリソースが見つかります。

拡張性（プラグインと統合）

Sketchには、プラグインや統合が多数用意されており、その豊富さはWordPressのテーマとプラグインに通ずるものがあります。Sketchのユーザー体験をパーソナライズできるのは、豊富なプラグインのおかげです。

Figmaでは、2019年に統合機能をリリースしましたが、まだ十分に発展しておらず、Sketchとは比べ物にならない現状です。

一般的な統合機能には、以下のようなものがあります。

• プロトタイピング
• 翻訳
• アニメーション
• 開発者へのハンドオフ

機能

Figmaには、リアルタイムのコラボレーション機能があり、リモートでの共同作業にうってつけです。

また、グリッドと制約は柔軟性に長け、レスポンシブでサイズ変更可能なレイアウトを制作できます。

Sketchにはグループリサイズ機能がありますが、4種類に制限されます。

Figmaでは、ベクターネットワークを使用して柔軟にパスモデルを作成することができ、直線や曲線は、もはや一本の鎖状に形成する必要はなく、任意の2点間を行き来することができます。

また、優れた開発者へのハンドオフ機能で、プロジェクトの公開前に開発者にUIを共有することができます。

Sketchは、このような機能をプラグインで補完することができます。例えば、Zeplinは、開発者へのハンドオフに使える便利なアプリです。

パフォーマンスと速度

速度は、ハードディスクの空き容量から、使用するWordPressテーマまで、あらゆる要素に影響されます。Figmaでは、速度やレイテンシに関する問題は報告されておらず、リアルタイムの共同作業もスムーズに行うことができます。

Sketchは、Macにインストールして使うソフトウェアであることから、インターネットの速度がパフォーマンスに影響することはありません。したがって、高パフォーマンスと速度が保証され、デバイスがオフラインであっても作業を行うことができます。

プロトタイピング

Figmaでは、プロトタイピング用に以下のようなトリガーが用意されています。

• クリック時
• ホバリング時
• ドラッグ時

Figmaでは、Sketchよりも柔軟にプロトタイプのプレビューが実施できます。標準的な画面遷移の適用にも対応しており、さらに、画面内外の移動も自由自在です。

また、スマートアニメートという機能もあり、数回のクリックで高度なアニメーションを制作できます（※フレームをつなぐページ間リンク機能については現在表示されていない）。

一方、Sketchにはプロトタイピングのプラグインがあるため、Mockplus Cloud、InVision Craft、Flintoなどのプラグインを使用して、デザイン制作をスムーズに進行することができます。

まとめ

FigmaとSketchは、どちらも人気の高いUIデザインプラットフォームで、ユーザーフレンドリーな優れたウェブサイトを設計することができます。メールクライアントと同じように、どちらを選ぶべきかという問い対する答えは、その用途によって異なります。

Macを使用していて、オフラインでの作業を好む人には、操作をパーソナライズできる豊富なプラグインが揃ったSketchがおすすめです。

無料で使用したい、Windowsで制作する、高度なコラボレーション機能が欲しい、柔軟にベクター操作を行いたいといった場合には、Figmaが答えでしょう。

FigmaやSketchでWordPressサイトのデザインを制作していますか？優れたホスティングサービスをお探しなら、Kinstaをご利用ください。まずは、見本紹介セッションを予約して、KinstaのWeb制作会社向けマネージドホスティングプランの性能を実際にお試しください。UIデザインプラットフォームとどのように連携し、シームレスな体験を作り上げることができるか、実際に確認することができます。

デザインプロジェクトに人材をお探しなら、一流の会社を集約したKinstaの代行業者ディレクトリもぜひご活用ください。予算やフレームワークなどに応じて検索可能です。