COOSY BLOG
  • HOMEホーム

  • SERVICEサービス

    • サービスTOP
    • Web制作
    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
  • WORK制作実績

    • 制作実績TOP
    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーション
    • サービスサイト・SaaS
    • システム開発
  • ABOUTクーシーについて

    • クーシーについて
    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ岩手
    • ロンドン支社
    • ミャンマー支店
  • BLOGブログ

  • RECRUITリクルート

  • Contactお問い合わせ

BLOG MENU

  • BLOGトップ
  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加

勉強し始めるなら今!Web制作におけるFigmaの使い方〜超初級編!【XDから卒業】

  • Web制作ハウツー
  • 特集
  • Web制作ツール
  • Web最新トレンド
勉強し始めるなら今!Web制作におけるFigmaの使い方〜超初級編!【XDから卒業】

Figmaは世界シェア第1位のWebデザインツールです。デザイナーだけでなくノンデザイナーでも気軽に使えるツールとして支持を集めています。

この記事では今注目のデザインツール「Figma」について解説します。Webサイト制作場面を中心にFigmaでできることやメリットを紹介する内容です。

「Figmaを使ってみようかな」と考えている方は、さっと読めるので参考にしてみてください。

Figmaとは

Figma

https://www.figma.com/ja/

Figmaは無料で使えるUIUXデザインツールです。誰もがブラウザ上で手軽にUIデザインを作れます。営業資料やバナー、ロゴの作成も可能です。UIUXデザインツールなので印刷物には向いていません。

FigmaとXD

FigmaはAdobeXDとよく似ておりたびたび比較されてきました。両者は機能的にほぼ同じで、日本語対応もされています。XDと比べるとFigmaの方がサクサクと動き、開発スピードは早いです。

Figmaをめぐっては、2022年9月、AdobeがFigmaとの買収合意を発表しました。XDの方は、2022年4月よりアップデートが止まっています。Adobe Creative CloudからXDが姿を消したほか、XD公式ページが「ランニングサポート」という簡易なページに変わっています。

Adobe製品ということもあり日本では一定のシェアを持っていたXDですが、世界的にはFigma一強の状況でした。Figma買収の一連の動きを見ると、日本にもこの流れが来るのではと予想されます。

Figma買収の一連の動き

The precipitous rise of Figma and fall of InVision

Web制作におけるFigmaの使い方

一般的にWebサイト制作は以下の流れで行われます。

  1. プロジェクト企画
  2. Webサイト設計
  3. デザイン制作
  4. 実装・システム開発・コーディング
  5. リリース

Figmaが活躍するのは3以降の工程です。詳しく見てみましょう。

「Webサイト設計」におけるFigma

サイトマップやワイヤーフレームの作成に使います。

サイトマップはExcelやPowerPointでも作れますが、Figmaの方が共有が簡単です。クライアントやメンバーに見せながら話し、その場で変更することもできます。

ワイヤーフレームはサイトの設計図です。ページにどんな情報をどんな構成で配置するかを決めます。PowerPointでも作れますが、FIgmaには無料で使える各種テンプレートが用意されており、早くきれいにワイヤーフレームを作れます。

無料で使える各種テンプレート

「Webデザイン制作」におけるFigma

「デザインカンプ」と呼ばれるページデザインもFigmaで作れます。ここまで言葉で共有されてきたイメージをビジュアル化し、印象のずれをなくす工程です。ここでも共有編集できる機能が威力を発揮します。

Figma デザインカンプ

「実装」におけるFigma

Figmaのデザインデータをもとにコーディングします。マージンやパディングなどの数値のほか、画像データもFigmaから書き出し可能です。CSSが表示される機能もあるので、コードをコピペして使えます。

FigmaのSPデザイン

UIUX以外でFigmaにできること

他にも以下のものがFigmaで作れます。

  • WebサイトやWeb広告に使うバナー
  • SNS投稿用画像
  • プレゼン・営業資料
  • イベント記事などのアイキャッチ

Figmaで名刺などの印刷物を作ることも可能です。しかしもともと印刷物むけのツールではないため、CMYKへの変換など工夫すべきところはあります。

Web制作におけるFigmaのメリット

Web制作におけるFigmaのメリットをまとめておきます。

  • ソフトが要らない
  • 開発スピードが速い
  • 共同編集ができる
  • バージョン管理ができる
  • プラグインで作業を効率化できる

ソフトが要らない

ソフトをダウンロード、インストールしなくてもWebブラウザから使えます。費用面でも無料ですべてのデザイン機能を使えるため、導入のハードルは低いです。ただし無料版は3ファイルまでしか使えないので、本格的に導入するなら有料版への移行をおすすめします。

開発スピードが速い

XDも速いですが、それ以上にFigmaの開発スピードは速いです。ツールがサクサクと動けば開発も効率よく進みます。

共同編集ができる

Web制作会社ではデザインは複数人で作り上げていきます。クライアントから修正希望をもらったり、ディレクターにチェックしてもらったりするとき、いちいちファイルを書き出してメールで送っていたら大変です。FigmaならURLを送ってコメントをつけてもらうだけです。共通のファイルに書き込み、修正に反映させられます。

バージョン管理ができる

ファイルのバージョン作成と保存が30分ごとに自動で行われるため、過去のバージョンに戻すことが可能です。ただし無料のStarterプランの場合、バージョン管理期間は30日です。有料プランは制限ありません。

プラグインで作業を効率化できる

標準機能でも便利なFigmaですが、プラグインでさらに便利にカスタマイズできます。
例えば以下のようなことが可能です。

  • アイコンをFigmaに挿入できる
  • 外部サイトから商用利用可能な画像をFigmaに入れることができる
  • 画像の背景を自動で検出して削除する

プラグインはFigmaコミュニティで探します。

Figmaコミュニティ

https://www.figma.com/community

ソートをかけて「プラグイン」を選択。気になるものを見つけたら「試す」をクリックして、試してみましょう。

「多すぎてどれを使えばいいかわからない!」という人は、弊社デザイナーおすすめのFigmaプラグイン12選をまとめてあります。こちらの記事から使えそうなプラグインを選んでみてください。


デザイナー必読!Figmaのおすすめプラグイン12選【これがなければ仕事にならない】

Figmaの導入手順

Figmaの導入手順を紹介します。

アカウントを作成する

Figma公式ページから「サインアップ」をクリック。Googleアカウントまたはメールアドレスとパスワードを入力して「アカウントを作成」をクリックします。

Figmaサインアップ画面

日本語化する

ダッシュボードに入れたら、画面右上のユーザーアイコン横の矢印をクリック。メニューから設定をクリックします。

Figmaダッシュボード画面

「言語の変更」をクリックして、日本語を選択してください(画像ではすでに日本語に変更済み)。

Figma日本語化画面

フレームを作る

「デザインファイルを新規作成」をクリック。

デザインファイルを新規作成

左上のメニューから「井」のアイコンをクリックして①「フレーム」を選択。②右側に出たフレーム一覧の中から適当なものをクリックすると、③白いフレームが現れます。ここにデザインを作っていきます。

Figma フレーム

Figmaの基本的な使い方

Figmaの使い方をシンプルに説明すると、やることは以下の2つです。

  1. 画面左上のツールバーから図形などの要素を追加
  2. 画面右側のプロパティパネルで要素の見た目を調整

基本はこれだけ。場合によってはレイヤーパネルでレイヤーの順番を変えたりします。

Figma レイヤーパネル

Figmaのツールの種類

ツールバーには以下のツールがあります。ショートカットキーと機能をあわせて表にしました。これを見ればツールもひと通り使えるはずです。

ツール Short Cut Key 機能
移動 V フレーム上に追加した要素をドラッグで動かせる
拡大縮小 K テキストの枠をドラッグしてフォントサイズを拡大・縮小できる
フレーム F キャンバス上に任意の大きさの空白フレームを追加できる
セクション Shift + S セクションを追加できる。セクションの中に入った要素はグループとして一緒に移動が可能。
スライス S 書き出したい画像の範囲を指定できる
長方形 R 長方形を追加できる
直線 L 直線を追加できる
矢印 Shift + L 矢印を追加できる
楕円 O 楕円を追加できる
多角形 多角形を追加できる
星 星を追加できる
画像/動画を配置 Shift +Cmd +K 画像や動画を配置できる
ペン P ペジェ曲線などで好きな形を書くことができる
鉛筆 Shift +P フリーハンドで線が引ける
テキスト T テキストを追加できる
手のひらツール H ドラッグしてキャンバス全体を動かせる。フレームが複数ある時便利
コメントの追加 C コメントが追加できる

ショートカットキーを覚えると、カーソルがフレームとツールバーを行ったり来たりしなくなるので、作業がサクサク進みます。はじめは大変ですが、少しずつ覚えて使ってみましょう。

Figmaの料金プラン

「スターター」「Figmaプロフェッショナル」「Figmaビジネス」「エンタープライズ」の4つのプランがあります。

スターター Figmaプロフェッショナル Figmaビジネス エンタープライズ
無料(期限なし) ¥1,800 (編集者1人あたりの月額)

月払いは¥2,250
¥5,787 (編集者1人あたりの月額)

年払いのみ
¥9,644 (Figma編集者1人あたりの月額)

¥643 (FigJam編集者1人あたりの月額)

年払いのみ

無料プランは個人で使う人向け、有料プランはチームでの作業を快適にしたい人向けです。

例えば「Figmaプロフェッショナル」は1チームで使える以下の機能が入っています。

  • バージョン履歴数無制限
  • 権限の共有
  • チームライブラリ
  • 共有プロジェクトとプライベートプロジェクト

「Figmaビジネス」は複数チームでの開発が想定されており、

  • 組織全体のライブラリ
  • ブランチ機能とマージ機能
  • ファイルの一元管理

などの機能が加わります。

さらに大規模な開発では「エンタープライズ」が適当となるでしょう。

無料プランは期間の制限なしで使えますが、保存できるファイルが3つまでです。個人使用であっても本格的に使っていきたい場合は「Figmaプロフェッショナル」へのグレードアップを検討しましょう。

まとめ

以上、Figmaの概要をお伝えしました。いろいろ書きましたが、百聞は一見にしかず。Figmaを理解するには、自分で触ってみるのが一番です。無料のスタータープランでまずは試してみましょう。慣れてくると、PowerPointのような感覚で使えるはずです。

Web制作を早く快適にしてくれるだけでなく、ノンデザイナーにもやさしいデザインツール「Figma」をぜひお試しください。

超便利!「Figma to STUDIO」の使い方を画像12枚でわかりやすく解説

ノーコードツール「STUDIO」でサイト制作をする人に知ってほしいメリットとデメリット

クーシーブログ編集部

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

2023/03/08

テキスト:加藤久佳 デザイン:大坂間琴美

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
お問い合わせはこちら

Web制作ツール・Web最新トレンドの関連記事はこちら

  • 【2月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    2025年Webデザインの最新トレンドを海外からいち早くピックアップ!Photoshopのライブ共同編集機能、新作デザインツールTOP3、AI動画生成の最前線など、気になる情報をギュッとまとめました。Web制作者、デザイナー、マーケター必見の内容です。

    • Web最新トレンド
  • 【Webデザイン最新アイデア】プロも絶賛! 超参考になる「ギャラリー・まとめサイト」32選

    今回は、最新のWebデザインアイデアをチェックできるおすすめのWebギャラリーサイトを、デザインに強みを持つWeb制作会社クーシーが厳選してご紹介します。ぜひ活用して、デザインのヒントを見つけてみてください。

    • WebデザインTips
    • Web最新トレンド
  • 【Web担当者必見】2025年春、今押さえるべきWeb業界ニュースまとめ

    2025年の春(3〜4月)に話題となった最新のWeb業界ニュースを厳選してまとめました。Webマーケティング、SEO、トレンド、テクノロジーまで、Web担当者なら必ずチェックしておきたい情報が満載です。

    • Web最新トレンド
  • 【2025年4月最新】Webデザインニュース!海外の最旬情報をご紹介!

    Webデザイン最新情報の第2弾。ChatGPTを使った画像生成プロンプトの最新活用法と、Photoshop、Illustrator、Figmaの新機能を、未来のデザイン業界を切り拓く鍵と共にご紹介します。

    • Web最新トレンド
  • 【4月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    デザイン業界は今月も話題が盛りだくさん。AIの進化やツールのアップデート、インスピレーションを刺激する海外サイトまで、日々変化するトレンドをキャッチアップすることがますます重要になっています。 今回は、デザイン力に強みを持つWeb制作会社クーシーが、注目のAIモデル「o3」「o4-mini」か

    • Web最新トレンド
  • 【5月版】今知るべき2025年Webデザインニュース!海外から最新情報をご紹介!

    最新Webデザインニュースをお届けします。今月は、UI/UXワークフローの効率化に役立つAIツールや、Microsoftが導入した新機能を紹介。さらに、インパクトある海外サイトのファーストビュー3選をピックアップし、実務で活用できるアイデアをお伝えします。

    • Web最新トレンド
  • 【6月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    2025年6月のWebデザイン最新ニュースをまとめました。Googleのロゴ刷新、Figmaの大型アップデート、Androidの新デザインなど、注目トピックを海外情報からわかりやすく紹介します。

    • WebデザインTips
    • Web最新トレンド
  • 【2025年Webデザイントレンド最新版】Web制作のプロが大注目する10選まとめ

    デザイン戦略に長けたWeb制作会社が推す「2025年のWebデザイン最新トレンド」。余白、3D、ヒーロー画像だけじゃない、斬新な表現技術もご紹介!

    • WebデザインTips
    • Web最新トレンド

COOSYの
制作実績

UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。

制作実績を見る

Web制作の課題はクーシーが解決します

  • Web制作

    コーポレートサイト、採用サイト、ECサイトまで。最新AI技術を掛け合わせ、各サイトの特性に合わせたUIUX設計を実現します。

  • UIUX設計

    人間中心設計で価値ある体験を創造。SEO・AIOにも貢献し、LTV向上につながる直感的な画面デザインを実現します。

  • プロトタイプ作成

    Webサービスのアイデアを迅速にプロトタイプ化。企画段階から専門家が伴走し、プロジェクトの成功確度を高めます。

CATEGORY LIST

  • すべての記事一覧

  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット
  • WORKS

    Webサイト・アプリなどの
    様々な実例・制作実績のご紹介

    WORKS
  • CONTACT CONTACT

    Webサイトのご相談、お見積もりはこちらから

    Webサイトのご相談、お見積もりなど
    お気軽にお問い合わせください

ホーム

  • TOP
  • COOSY BLOG
  • 勉強し始めるなら今!Web制作におけるFigmaの使い方〜超初級編!【XDから卒業】
ページトップへ
  • TOP
  • SERVICE

    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
    • Web制作
  • WORKS

    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーションサイト
    • サービスサイト
    • システム開発
  • ABOUT

    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ 岩手
    • ロンドン支社
    • ミャンマー支店
  • RECRUIT

    • ディレクション部
    • デザイン部
    • システム開発部
    • アカウント・プランニング部
    • Webマーケティング事業部
    • 人事・総務部
    • オフショア
    • グローバル事業部
  • BLOG

    • 目的別
    • Web制作ハウツー
    • システム開発
    • Webサイト運用のコツ
    • Webマーケティング
    • 特集

COOSY SNS

  • facebook
  • X
  • お問い合わせ
  • Privacy policy
  • Site Policy
  • Security Policy
© COOSY All Rights Reserved.