WEBデザイン WEB制作

【日本語対応】Figmaとは?画像編集可能な無料のウェブデザインツール【2022年7月27日】

SHARE

最近、Figmaという名前をよく聞くようになりました。
Figmaは無料で使えるクラウド型の共同ウェブデザインツールです。
・Photoshopが重いし高い
・制作途中を共有したい
・デザイナー以外からフィードバックがほしい
こんな悩みをもった方に特におすすめです。
Figmaは、デザイナー、エンジニア、ディレクターなどウェブに関わる全ての人におすすめできます。
当記事では、Figmaの特徴や料金、伸びている理由などをお伝えしていきます。

Figmaの特徴

そもそもFigmaとは何が出来るサービスなのか、なぜ、これほどまでに人気が出たのか、その背景をご紹介したいと思います。
Figmaは単なるデザインツールではありません。デザインコラボレーションツールと言った方が適切かと思います。
デザインツールとしてはとても珍しいもので、ウェブをベースに動くように設計されています。
どういうことかというと、昨今ではWordよりもGoogleドキュメント、ExcelよりもGoogleスプレッドシートなど、クラウドサービスの利用がビジネスシーンでも多くなっています。
Figmaはまさにデザインツールのクラウド版と解釈して頂ければ良いと思います。

Figmaについて

海外はもちろん、日本でもユーザーが増えてきています。
多額の資金調達にも成功しており、ユニコーン企業と言われ「評価額が10億ドルを超える、設立10年以内の未上場のベンチャー企業」に成長しています。
Figmaがウェブデザイン界隈で注目されている理由としては、
・特徴:コラボレーションが強いクラウドサービス
・機能:痒いところに手が届く
・料金:無料でも使える
・人気:時代の変化と効率化
といったことがあげられます。

デザインの同時編集と反映ができる

Figmaは同時に複数人でデザインができ、その編集した結果をその場で反映させる
ことが可能です。そのため共有がとても簡単です。
デザイナーがデザインしている間に、誰でもその場でデザインを確認・編集がとても容易な設計になっています。
デザイナーでなくとも、例えば、文章の文言を変えたい場合、単語を変えたい場合、色味を変えたい場合があると思います。
デザイナーでなくても、アイデアだしは可能ですので、チャットやメールなどテキストで伝えるのも良いですが、Figma上で直接パターンを作成する事も可能です。
これは今までのデザインツールにはない、Figmaならではの部分です。デザインを作るだけでなく、コラボレーションができること、これもFigmaのユニークなところです。

2022年夏に日本語版

現在Figmaは英語がメインですが、2022年の夏に日本語版のUI(user interface)がリリースされることが決まっています。
ついに日本語対応しました!設定は次のとおりです。※2022年7月27日追記

figma.comにログインし、右下隅にある?マークをクリック

②メニューで [言語を変更] を選択

③ポップアップモーダルで [日本語] を選択し、[保存] をクリックにて反映。

Figmaの設定について

Figmaは3つのステップで簡単に設定ができます。
  1. アカウントの作成
  2. デスクトップアプリのダウンロード
  3. アプリの起動

    アカウントの作成

     

     

    アカウントの作成は、Figmaの公式サイトから「Figmaを無料でお試しください」をクリックします。

     

     

    アドレスとパスワードを入力し、「create account(アカウントを作成する)」をクリックします。
    その後確認のメールが送られてきますので、認証すれば完了です。
    またGoogle accountをお持ちであればすぐに利用可能です。

    デスクトップアプリのダウンロード

    FigmaはPCにインストールが不要で、デスクトップアプリにて起動することができます。
    1. Figma Downloads
    2. Desktop app
    3. New design file
      この順番にクリックすればPCにて使用できます。

      Figmaの機能や使い方について

      Figmaには公式You Tubeチャンネルがあり、実際の作業工程を見ることができます。
      すべて英語ではありますが、字幕をオンにして、自動翻訳を日本語にすれば問題なく閲覧で来ます。
      • Web制作
      • アプリ制作
      このような現場であればFigmaだけで十分仕事が出来る程の機能があると思います。Web画面やアプリケーションの画面を作るのに、必要な機能はFigmaに揃っています。
      またコンポーネント管理といって、例えばECサイトなど商品ごとにボタンや色など共通化できるものが多いと思うのですが、それらを登録・管理する機能も備わっています。
      オートレイアウトといって、余白を統一して管理することができレイアウトを統一するための修正も簡単にできます。Figmaだけで効率的にデザインを作成することができます。
      さらに付け加えるなら、スライドや資料作成をすることも十分可能です。Figmaそのものは
      ベクターデータで管理・設計されているので画像の劣化がありません。
      画像の拡大・縮小もしやすくなります、つまりロゴなどを作る機能も十分にあると思います。
      また簡単な画像の補正もできます。露出を上げたり、コントラストを上げたり画質の調整も可能です。

      Figmaでできないこと

      唯一できないのは写真の加工です。例えば写真のトリミングや、人物を画像から削除する事はできません。
      必要な場合はAdobeのPhotoshopを併用する必要があります。他のツールを使った方が良いと思います。

      WEB制作以外の使い道

      Figmaはウェブ制作以外にも使い道があります。
      • チラシ作成
      • プレゼン資料の作成
      • SNSの投稿の作成
        など、グラフィックデザインや紙媒体への利用もできます。

        Figmaの料金について

        実際にデザインツールを使用するときはお金がかかることが当たり前だと感じるとおもいます。
        しかし基本的にFigmaは無料で使用できます。では、いつから有料になるのでしょうか?

         

        プランは3つあります。
        • Starter
        • Professional
        • Organization
          この3つです。
          課金ユーザーのほとんどがプロフェッショナルプランを利用しているようです。それぞれ解説します。

          Starter

          • 料金:無料/月・無料/年
          • 機能
            Figmaファイル3枚、FigJamファイル3枚
          個人用ファイルは無制限
          共同作業者の数は無制限
          プラグイン、ウィジェット、テンプレート
          モバイルアプリ

          Professional

          • 料金:15ドル/月・月々12ドル/年
          • 機能
            無制限のFigmaファイル
          バージョン履歴は無制限
          共有権限
          共有プロジェクトとプライベートプロジェクト
          チーム ライブラリ
          オーディオ会話

          Organization

          • 料金:無料/月・無料/年
          • 機能
            Professionalの機能に加えて↓
          組織全体のライブラリ
          デザインシステム分析
          ブランチとマージ
          ファイルの一元管理
          管理・請求の一元化
          プライベートプラグインとウィジェット
          シングルサインオン

          無料と有料プランの違いについては、編集権限を付与できる人数に制限があることです。他にもいろいろな制約がありますが、人数に関してのルールがメインだと認識して頂ければ問題無いかと思います。
          前述しましたが、Figmaはチームで利用し同時に編集することができます。しかし同時に編集できる人の数には制限があるので、無料プランにはデメリットがあります。
          例えば5人のチームがあるとします。チームには、デザイナー、設計者、エンジニアが含まれます。そのような場合Starterプランでは作業ができないため、Professionalプランを契約する必要があります。
          フリーランスや個人の方で、ファイルのシェアしかしない、あるいはたまにしか編集しないという方であればStarterプランでもよいかと思います。
          自分ともう1人、つまり2人まで編集権限を与えることができますので、それで足りるのであればStarterプランでよいでしょう。
          同じプロジェクトでコラボレーションする事がメインのツールなので、共同作業の部分に料金が発生します。

          Figmaが人気の理由

          昨今のデザインの仕事は、デザイナーが一人で仕事をすることは少なくなっています。
          ビジネスシーンにおいてはデザイナーだけで完結するものは少なく、営業担当もいればオフラインや銀行など印鑑や紙ベースで仕事をする人もいます。DXのように最先端のテクノロジーを扱う人もいたりと、各領域のプロフェッショナルがいるはずです。
          このようにさまざまなプロフェッショナルの知恵を集めて、それをソフトウェア・サービスに反映させることは重要なことです。

          デザインはコラボレーションしていく時代に

          • デザイナー同士:シェアやテキストベースの手間を省き解決に必要なことに注力する。
          • 他の職種:デザインをもとにアイデアと実装を加速する。
          • ユーザー:フィードバックを受ける手間を省く
          デザイナーとしては、作業途中の作品を共有する手間が省けることは時間の節約になります。
          今までは、作業途中の画面をスクショしたり書き出してドキュメントにまとめたりする必要がありましたが、Figmaが登場したことにより、SlackやLINEにULRを飛ばすだけで完了できるようになりました。

          まとめ

          Figmaは世界中で爆発的に人気が出ているウェブデザインツールです。日本ではまだこれからのソフトではありますが、今のうちに操作などを覚えて仕事に使うと他と差別化ができるでしょう。
          ソフトをダウンロードすることもなく、Googleアカウントがあればすぐに使用できます。無料で使えるのも大きなメリットです。
          製作途中での共有や、様々な職種での共有編集もできることから、本来やるべき作業に時間を取れます。
          動作も軽いため、PhotoshopやIllustratorを使うときのように、ハイスペックのPCも不要です。モバイルノートで出先でも作業ができることでしょう。
          インターネットはますます複雑になってきています。デザイナーが本当に必要なものに集中できるようになれば、ユーザーにも良いものを早くお届けすることができるでしょう。
          Figmaで画像制作など基本的なことはできますが、サイト全体の管理などは大変なため、専門家に任せると良いでしょう。

          この記事の監修者

          マトレルナレッジ管理人

            今すぐ問い合わせる

            まずは滝沢デザインに無料相談

            関連記事

            • ランディングページ(LP)費用対効果の高いリニューアル方法とは

              SEO WEB制作
            • 提案依頼書とは?重要な理由や作成ポイントを解説

              WEB制作
            • オウンドメディアとは?意味や目的と注目される理由【簡単解説!】

              オウンドメディア WEB制作
            PAGE TOP