Figma｜はじめに

次の章に進む

0. はじめてのFigma

a. はじめに

■ Figmaは、現在シェアNO.1のUI作成ツール

皆さん、WEBのUIデザイン(*1) の制作ツールと言うと、何を思い浮かべますか？

2大グラフィックソフトとして確立しているAdobeのPhotoshop? Illustrator? それともXD?

いえいえ、今はWEB制作時のUIデザインツールというと圧倒的にFigmaが主流です。

参考: https://www.uxtools.co/survey/design-tools-awards/design-standard

その扱いやすさ・機能性からGoogleやMicrosoftなど世界的な大手企業をはじめ、国内外の多くの企業専属デザイナーや制作会社・フリーランスのデザイナーが使用しています。

更に無料で使用できる事から、これからデザインを学びたい方々や更にはノンデザイナーでも使用する方々も多く、現在シェアNo.1を確立している注目のUI作成ツールです。

■ Figmaがある程度使えるようになると…

Figmaがある程度使えるようになると、企業などからニーズのあるWEBサイトやアプリのデザインが出来るようになる他、ランディングページ(*2)やバナー広告画像(*3)、更にはプレゼン資料や名刺など、様々な媒体を制作できるようになります。

Figmaの使い方を覚え、WEB制作の現場で活躍できる制作スキルを身に付けましょう。

✅ (*1) ：UI

UIとは「ユーザーインターフェース」の略。

WEBサイトやアプリを訪れたユーザーが、快適に操作できるようにインターフェースをデザインすることです。

✅ (*2) ：LP

LP(ランディングページ)とは、主にWeb広告から訪れたユーザーに「購入」「お問い合わせ」「資料請求」などの行動を起こしてもらうことに特化されたページ。

略して"LP"と呼ばれます。

✅ (*3) ：バナー広告

バナー広告とは、Webサイト上に表示される画像（もしくは動画）の広告のこと。

✅ WEBサイト / LP(ランディングページ) / アプリなど。

✅ バナー広告

✅ サムネイルやSNS画像

b. Figmaの特徴を知ろう

1. 無料で使える。（スタータープランの場合）

学習する範囲であれば無料版（スタータープラン)で十分です。

※無料以外のプランについては、後述の「プランについて」にて解説しています。

プランと料金 | Figma

2. Windows, Macに対応

両OSに対応しており、更にはChromeなどのウェブブラウザからでも使用する事が出来ます。

タブレットやスマートフォンでは基本的には使用できませんが、制作したFigmaのデザインを確認する事は出来ます。

3. FigmaとPhotoshop/Illustratorの違いについて

基本的には、いずれのアプリケーションでもWEBデザインの作業をする事が出来ます。

しかし、PhotoshopとIllustratorは元々WEB等のUI制作を目的としたアプリケーションではありませんでした。

Photoshop

写真などの画像に加工を加えるなど、画像制作をする事に特化したアプリケーション。
Illustrator

イラストを描く事や印刷物の制作に特化したアプリケーション。

FigmaはWEB等のUI作成に特化したツールで、その分野における便利な機能が多数搭載されています。

更にはスタッフやクライアント達と素早くデザイン共有したり、また複数スタッフでの共同作業も容易である事から、現在WEB制作の現場において最も重宝するツールとなっています。

4. 作業効率を向上させる機能がたくさん

Figmaには、作業効率を向上させる機能が数多く搭載されています。

少しでも効率的に作業出来るようになりましょう。

※詳細は第4章で解説します。

5. コンテンツ制作を補助する様々なプラグイン

Figmaは、コンテンツ制作を補助する様々なプラグイン（拡張機能）を使う事も出来ます。

例えば、

Unsplash : 著作権フリーの画像を素早く配置。
Iconify : アイコン画像を素早く配置。
Mockup : モックアップを素早く作成。 ※ここでのモックアップとは、デザインしたものをPCやスマホの画面に仮に表示させた見本状態の事。

上記の他にも、たくさんのプラグインがあります。

※こちらも、第4章で詳しく解説します。

6. プレゼン資料や名刺の作成など、WEB以外の用途にも使える

Figmaはベクター形式（拡大縮小しても劣化しない画像形式）の画像を作成出来てPDFでも出力できるため、プレゼン資料や名刺などを作成する事も可能です。

扱いやすいフロー作成やプレビュー機能もあるので、スライドを使って社内プレゼンをする時、便利に使う事が出来ます。インタラクティブな表現も可能です。

7. 依頼者や担当の方々との共同作業ができる

Figmaにはスタッフやクライアント達と素早くデザインの共有が出来、更に直にコメントを残す機能もある為、余計な連絡のやり取りの時間と手間を省く事も出来ます。

また複数の編集者やデザイナー達と同時に作業する事も可能なので、効率的な制作進行をする事が出来ます。

そのため、チームを組んで案件を受けるような場合には非常に重宝するツールと言えます。

c. Figmaをインストールしよう

Figmaのウェブサイトにアクセスし、ダウンロードしよう。

FigmaサイトURL

Figmaダウンロード | デスクトップ&モバイル向けWebデザインアプリ

macOSまたはWindowsデスクトップ向けFigma Webデザインアプリ、フォントインストーラ―、デバイスプレビューアプリをダウンロードできます。

ここで使用するパソコンのOS（mac, windows）に合わせたダウンローダーを選択します。ダウンロード後、各OSのインストール方法について記載します。

Macの場合

1 . ダウンロードした「Figma.dmg」を開きます。
2 . 下記画面が表示されたら、左の「Figma」のアイコンを、右の「Applications」にドラッグ&ドロップ。

3 . 「アプリケーション」にFigmaが追加されます。
4 . この後は下記に記載のFigmaをインストール後に進みます。

Windowsの場合

1 . ダウンロードした「FigmaSetup.exe」を開きます。

2 . Figmaが使用PCのアプリに追加されます。
3 . この後は下記に記載のFigmaをインストール後に進みます。

Figmaをインストール後

Figmaをインストールした後は、アカウント作成を行います。

※もし自分のgoogleアカウントがあれば、このアカウントをそのまま使用してもOKです。勿論、Figma用のアカウントを別途作成してもOKです。

次の章に進む

1 . Figmaを立ち上げると、以下の画面になります。（※日本語の場合もあります）

既にGoogleアカウント（もしくはFigmaのアカウント）があり、そのアカウントを使用する場合は Log in with browserへ。
アカウントが無い場合（もしくは別途作成する場合）は、No account?Create oneよりアカウント作成してから Log in with browser へ。

2. Log in with browser を選択後、ログインが成功すると以下のような表示になります。
※今回はgoogleアカウントでログインした場合です。

3 . 後はOpen the desktop appを選択すれば、ログインした状態でFigmaのデスクトップアプリを起動できます。

Windows ARMは扱い方は通常のWindowsと同じですが、規格が異なり通常のWindowsでは動作しません。
もしWindows ARM対応のPCを使用の際は、こちらを選択してください。
ベータ版は開発版です。初心者の方は選択しなくてOKです。
同列に配置されている「フォントインストーラー」とは、ブラウザ版でローカルPC（使用しているPC）のフォントを使用出来るようにするツールです。

デスクトップ版とブラウザ版の違い

Figmaはデスクトップ版（アプリ版）でも、Chrome等のウェブブラウザからも使用出来ます。

基本的に大きな変わりは無いのですが、ある程度作り込んだデザインを編集する場合に、ウェブブラウザ版は動作が遅くなりやすいので、なるべくはデスクトップ版を使う事をおすすめします。

プランについて

Figmaには４つのプランがあります。※作業の際は、無料のスタータープランで十分です。

スタータープラン（無料）
プロフェッショナルプラン
ビジネスプラン
エンタープライズプラン

プランの違いは、公式サイトで確認できます。

プランと料金 | Figma

1. 各章の目次（詳細は各章のページにて記載）

✅ 各章の目次を見ることで、Figmaを学習する全体の流れを把握しましょう！

FigmaのUIに関する注意

Figmaは機能改善のために日々アップデートが行われており、その影響で教材内のUIと実際のUIが違う場合があります。
UIが異なることで操作に迷われた場合は、Figmaの公式ヘルプセンターや生成AIを活用しながら学習を進めていただきますようお願いいたします。

【第1章】初期設定をして作業の準備をしよう

第1章の内容

1-1 言語の設定	デフォルトの言語は英語ですが、設定で日本語に変更出来ます。
1-2 テーマ（背景色）の選択	お好みに合わせてFigmaの画面を設定してみよう。

【第2章】画面の構成を知ろう

第2章の内容

2-1 ホーム画面の説明	Figmaを立ち上げて初めに目にする画面の解説です。
2-2 デザインファイルを新規作成しよう	まずは、Figmaで作業する為のファイルを作成しよう。
2-3 編集画面の説明	Figmaで作業する編集画面の解説です。

【第3章】基本操作を覚えよう

第3章の内容

3-1 オブジェクトを作成しよう	まずは、Figmaの基本的な操作である図形作成やテキスト入力をして、オブジェクトを作成してみよう。
3-2 オブジェクトの大きさを変えたり、向きを変更してみよう	作成したオブジェクトを拡大縮小したり、向きを変えてみよう。
3-3 オブジェクトの色を変えてみよう	カラーパレットを使用して、自由自在に色を変更出来ます。
3-4 テキストを編集してみよう	入力したテキストのサイズや書体等を変更してみよう。
3-5 オブジェクトを複製してみよう	作業時に良く使うので、覚えておくと便利です。
3-6 レイヤーを覚えよう	配置したオブジェクトの確認や管理ができます。
3-7 フレームツールを覚えよう	実際にデザイン作業する際は、基本的にはこのフレーム内に図形や画像やテキストを配置して作業を進めます。
3-8 レイヤーをグループ化してみよう	レイヤーを整理整頓してみよう。
3-9 画像をFigmaに置いてみよう	自分のパソコンにある画像をFigmaに置いてみよう
3-10 キャンバスを自由に動かしてみよう	Figmaの編集画面の倍率を変えたり、上下左右自由に動かしてみよう。
3-11 パスの操作を覚えよう	パスで描く事により、図形ツールには無い形を自由に描く事が出来ます。
3-12 作成したものを画像データで書き出してみよう（エクスポート）	Figmaでは、簡単に画像データを作る事が出来ます。試しに画像を作ってみましょう。

【第4章】便利な機能を覚えよう

第4章の内容

4-1 ショートカット	ショートカットを使いこなす事が出来れば、効率的に作業出来るようになります。
4-2 ガイド（定規・グリッド）	ガイドを使用すれば規則性のあるレイアウトを構築する事が容易です。
4-3 コンポーネント	同じようなパーツを使いまわしたい場合、コンポーネントを使うと便利です。
4-4 バリアント	配置したコンポーネントを別コンポーネントに切り替える際などに便利です。
4-5 スタイル	フォントの色/サイズ/書体等を登録する機能です。全体のフォントの統一化に役立ちます。
4-6 オートレイアウト	複数のオブジェクトを、素早く規則的な整列ができる機能です。
4-7 マスク	オブジェクトの表示領域を限定させる方法です。
4-8 エフェクト	オブジェクトに影を作ったり、ぼかし等の効果を付ける事ができます。
4-9 プラグイン	Figmaの拡張機能です。多くの便利な機能を使う事ができます。

【第5章】ワイヤーフレームを作成してみよう

ここからは実際にウェブサイトのデザインを制作する工程に入ります。

一般的な制作方法としては、初めから時間を使って色や画像等を含めたような作り込んだデザイン作成をするのではなく、まず短時間でも作成可能なワイヤーフレームという設計図を作成します。

==
主な工程
1. ワイヤーフレームを作成。
2. 作成したワイヤーフレームをチームやクライアント等、関係者に確認してもらう。
3. OKが出たら、デザイン作業開始。
4. ある程度完成したら、デザインを関係者に確認してもらう。
==

この章では、このワイヤーフレームについて解説していきます。
まずは、サンプルを参考に模写する事から始めてみましょう。

第5章の内容

5-1 ワイヤーフレームとは？	ワイヤーフレームは、ウェブページの設計図。
5-2 ワイヤーフレーム作成の際、必要なことは？	ワイヤーフレームの要点を解説します。
5-3 Figmaで用意されているフレームをベースにしてみよう	Figmaには色々なデバイスに合わせたサイズのフレームが用意されています。
5-4 ガイド（定期・グリッド）を敷いて、ルールを決めてみよう	直感的にオブジェクトを配置するだけではなく、ある程度ルールを作って配置してみましょう。
5-5 オブジェクトを配置してみよう	ガイドを基準に、図形ツールやテキストツールを使って上手く配置してみましょう。
5-6 プレビューしてみよう	フレームごとに分けた表示を確認してみよう。
【演習】オリジナルサイト制作を考案し、そのワイヤーフレームを作ってみよう	独自でサイトのワイヤーフレームを作ってみましょう。テーマは架空のお店やサービスなど何でもOKです。

【第6章】プロトタイプを設定してみよう

第6章の内容

6-1 プロトタイプとは？	Figmaにはウェブページのように、設定したリンクをクリックすると指定したフレームにジャンプする機能があります。
6-2 5章で作ったワイヤーフレームに、フローの設定を加えてみよう	ワイヤーフレームに導線設定をして、リンク設定を加えてみましょう。
6-3 フロー設定を加えたワイヤーフレームを、プレビューしてみよう	リンク設定したオブジェクトをクリックし、画面遷移を確認してみましょう。
6-4 インタラクションを設定してみよう	ハンバーガーメニューなど、実際の挙動に近い動作を加える事も可能です。
6-5 フロー設定を加えたワイヤーフレームを、共有してみよう	作成したFigmaデータを他の方に見て貰う事が出来ます。
【演習】オリジナルで作ったワイヤーフレームに、フロー設定を加えてみよう	第5章で自作したワイヤーフレームに、フロー設定を加えてみよう。

【第7章】デザインをしてみよう

第7章の内容

7-1 5章で作ったワイヤーフレームに、デザインを加えてみよう	ここからデザイン作業のスタートです。
7-2 メインビジュアルや、サムネイル/アイコン等の画像を作成してみよう	素材・パーツの準備してみましょう。
7-3 Figmaでデザインする際の便利技	初めての方でも扱える簡単な便利技を幾らかご紹介します。
7-4 準備した素材を配置したり、色やテキストを調整してみよう	ワイヤーフレームで作成した部分に、デザインを加えていきます。
7-5 デザインしたサイトを、共有してみよう	作成したデザインを、色々な方に手早く見て貰おう。
【演習】オリジナルで作ったワイヤーフレームに、デザインを加えてみよう	第5章の演習で作成したワイヤーフレームに、デザインを加えてみよう。

【第8章】バナー画像を作ってみよう

第8章の内容

8-1 バナー広告とは	他のWebページに誘導する為に設置する広告です。
8-2 バナー画像を作る際の心得やコツなど	初めに3つのポイントを抑えよう。
8-3 実際に作ってみよう	注意点を覚えて、作成してみよう。
8-4 書き出ししてみよう（エクスポート）	Figmaの機能「エクスポート」より、簡単に画像書き出しする事が出来ます。
8-5 リサイズしてみよう	配置場所に準じたサイズになるよう、リサイズしてみましょう。
【演習】オリジナルのバナーを作ってみよう	バナー作りの基礎を覚えたら、オリジナルのバナーを作成しよう。
【演習】バナーギャラリーを作ってみよう	独自のバナーギャラリーを作ってみましょう。ポートフォリオ用に作っておくと、就活時に役に立つと思います。

【第9章】LPのデザイン案を作ってみよう

第9章の内容

9-1 LPとは	LP（ランディングページについて説明します。
9-2 LPとホームページの違い	二つのサイトの目的・ターゲット・デザインの違いを理解しましょう。
9-3 ワイヤーフレーム作成からデザイン実装まで進めてみよう	ホームページ作成の時と同じくワイヤーフレームから着手してみましょう。単一ページなのでホームページの時に比べ作りやすいと思います。
9-4 デザインしたLPを、共有してみよう	色々な方にデザインしたLPを見て貰おう。
【演習】オリジナルのLPデザイン案を作ってみよう	オリジナルのLPを作ってみましょう。勿論シンプルなものでOKです。テーマは架空の商品やイベントなど、何でもOK。

次の章に進む