Webデザインの現場で今最も使われているツールがFigmaです。「名前は聞いたことがあるけど、使い方がよく分からない」「Adobe XDやPhotoshopとの違いが分からない」と感じている方も多いのではないでしょうか。
Figmaはブラウザ上で動作するデザインツールで、アカウントを作成するだけですぐに使い始められます。インストールが不要で、無料プランでも個人学習には十分な機能が使えるため、初心者にとって最も始めやすいデザインツールと言えます。
この記事では、Figmaの基本操作から実際のWebデザインへの活用方法まで、初めて触る方にも分かるように順を追って解説します。読み終わるころには、Figmaで簡単なWebページのデザインが作れるようになるはずです。
Figmaとは？他のデザインツールとの違い
Figmaは、UIデザインやプロトタイプ作成に特化したクラウドベースのデザインツールです。WebサイトやアプリのUIデザインを制作する際に広く使われています。
Figmaの主な特徴
- ブラウザで動作：インストール不要で、Googleアカウントがあれば数分で始められる
- リアルタイム共同編集：複数人が同時に同じファイルを編集できる（Googleドキュメントのデザイン版のようなイメージ）
- 無料プランが充実：個人利用なら無料プランで十分な機能が使える
- クロスプラットフォーム：Windows、Mac、Linuxすべてで利用可能
- 豊富なプラグイン：コミュニティが提供するプラグインで機能を拡張できる
Adobe XDやPhotoshopとの比較
かつてWebデザインの現場ではAdobe PhotoshopやAdobe XDが主流でしたが、現在はFigmaがデファクトスタンダードになっています。Adobeは2022年にFigmaの買収を試みましたが規制当局の承認が得られず断念しており、その後Adobe XDの新規販売を終了しました。
Photoshopは写真加工やバナー制作には引き続き強力ですが、WebサイトのUIデザインにはFigmaの方が適しています。コンポーネントの再利用、レスポンシブ対応のプレビュー、チームでの共同作業といった点で、Figmaが大きく優れています。
Figmaの始め方：アカウント作成からファイル作成まで
アカウントを作成する
Figma公式サイトにアクセスし、「Get started for free」をクリックします。Googleアカウントまたはメールアドレスで登録できます。Googleアカウントを使えば数分で登録が完了します。
ファイルを作成する
ログインするとダッシュボード画面が表示されます。「New design file」をクリックすると、空のキャンバスが開きます。この画面がFigmaのメインの作業スペースです。
画面構成を把握する
Figmaの画面は大きく3つのエリアに分かれています。
- 左パネル：レイヤー一覧やアセットが表示される
- 中央キャンバス：デザインを配置する作業エリア
- 右パネル：選択した要素のプロパティ（色、サイズ、フォントなど）を設定する
まず覚えるべき基本操作7つ
1. フレームの作成（ショートカット：F）
フレームはFigmaの最も基本的な概念です。HTMLでいう<div>タグに相当するもので、デザインの「入れ物」として機能します。キーボードで「F」を押すと、右パネルにデバイスのプリセットサイズ（Desktop、iPhone、iPadなど）が表示されるので、作りたいサイズを選びましょう。
Webサイトのデザインを始める場合は、「Desktop」（1440×1024）を選ぶのが一般的です。高さは後から調整できるので、最初はデフォルトのまま始めて問題ありません。
2. 図形ツール（ショートカット：R / O）
「R」で長方形、「O」で楕円を描画できます。図形を選択した状態で右パネルを操作すれば、色の変更、角丸の調整、線の追加などが行えます。ボタンやカードなどのUI要素は、基本的にこの図形ツールの組み合わせで作ります。
3. テキスト入力（ショートカット：T）
「T」を押してキャンバス上をクリックすると、テキストを入力できます。右パネルでフォント、サイズ、行間、文字間隔、色を細かく調整できます。FigmaではGoogle Fontsが標準で利用可能なので、日本語フォントも豊富に選べます。
4. 画像の配置
画像をキャンバスにドラッグ＆ドロップするだけで配置できます。図形の中に画像を入れたい場合は、図形を選択して「Fill」の設定から画像を指定します。この方法を使えば、角丸のカード内に画像をきれいに収められます。
5. オートレイアウト（ショートカット：Shift + A）
オートレイアウトは、要素を自動的に整列・配置してくれる機能です。CSSのFlexboxに近い概念で、Figmaの中でも特に重要な機能です。ボタンのテキストに合わせてサイズが変わるパディング設定や、カードの一覧を等間隔で並べる処理などが簡単に実現できます。
6. コンポーネント（ショートカット：Ctrl/Cmd + Alt + K）
コンポーネントは、再利用可能なデザインパーツを作る機能です。ボタンやナビゲーションバーなど、サイト内で繰り返し使う要素をコンポーネント化しておくと、一箇所を変更するだけで全てのインスタンスに反映されます。
7. スタイルの登録
よく使う色やテキストの設定は、スタイルとして登録しておくと便利です。プロジェクト全体で統一した配色やフォントサイズを管理できるため、デザインの一貫性を保つのに役立ちます。
Figmaの操作に慣れるコツは、ショートカットキーを積極的に使うことです。「F」でフレーム、「T」でテキスト、「R」で長方形、「C」でコメントの4つを覚えるだけで、作業スピードが大幅に上がります。
実践：シンプルなWebページをデザインしてみよう
ステップ1：フレームを作成する
「F」キーを押して、右パネルから「Desktop」を選択します。1440×1024のフレームが作成されたら、フレーム名を「トップページ」などに変更しておきましょう。
ステップ2：ヘッダーを作る
フレームの上部に高さ80pxの長方形を配置し、左側にロゴ用のテキスト、右側にナビゲーションメニューのテキストを配置します。オートレイアウトを使うと、メニュー項目の間隔を均等に保てます。
ステップ3：メインビジュアルを配置する
ヘッダーの下に大きな長方形を配置して、背景色やグラデーションを設定します。その上にキャッチコピーとボタンを重ねれば、ヒーローセクションの完成です。
ステップ4：コンテンツエリアを作る
カードコンポーネントを作成し、オートレイアウトで横に3つ並べます。それぞれのカードに画像、タイトル、説明文を入れれば、サービス紹介セクションのようなレイアウトが出来上がります。
知っておくと便利な応用機能
プロトタイプ機能
Figmaではデザインに画面遷移のインタラクションを設定できます。右パネルの「Prototype」タブに切り替えて、ボタンから次の画面へ線を引くだけで、クリック時の遷移が設定されます。プレビューモード（Ctrl/Cmd + Shift + P）で実際の動きを確認できるため、クライアントやチームメンバーへの共有にも使えます。
Dev Mode
Dev Modeは、デザインからCSSのプロパティ値を自動生成してくれる機能です。コーディング担当者がデザインの数値を手作業で測定する手間が省けるため、デザインからコーディングへの引き継ぎがスムーズになります。
プラグインの活用
Figmaにはコミュニティが開発した多数のプラグインがあります。特に便利なのは以下のプラグインです。
- Unsplash：フリー写真素材をFigma内で直接検索・配置できる
- Iconify：数万種類のアイコンをワンクリックで配置できる
- Contrast：テキストと背景のコントラスト比を自動チェックしてくれる
Figma AIの活用
FigmaにはAI機能が搭載されており、デザインの自動生成やテキストの置き換え、レイヤー名の自動リネームなどが行えます。AIを活用すれば、繰り返し作業の時間を大幅に削減できます。ただし、AIに頼りすぎず、基本操作をしっかり身につけた上で補助的に使うのが理想的です。
Figmaの無料プランでは、作成できるファイル数に制限があります（個人のドラフトは無制限ですが、チームプロジェクトは制限あり）。個人学習の段階では無料プランで十分ですが、チームでの利用やクライアントワークが増えてきたらプロフェッショナルプランへのアップグレードを検討しましょう。
Figma学習に役立つリソース
Figmaの操作をさらに深く学びたい場合は、以下のリソースを活用してください。
- Figma Basics 日本語版（www.figma.com・サイト終了） – Figma公式が提供する基本操作の教材
- Skillhub – Figmaの使い方入門 – 27の基礎スキルを体系的に学べる
- Figma公式YouTubeチャンネル – 新機能の紹介や使い方のチュートリアルが充実
よくある質問（Q&A）
Q：Figmaは完全に無料で使えますか？
A：Figmaには無料プラン（スタータープラン）が用意されており、個人学習レベルでは無料で十分に使えます。個人のドラフトファイルは無制限に作成可能です。ただし、チームプロジェクトの作成数や共有機能に制限があるため、チームでの本格利用にはプロフェッショナルプラン（月額$16/ユーザー・年払い）が必要になります。
Q：Figmaとデスクトップアプリの違いは？
A：Figmaにはブラウザ版とデスクトップアプリ版がありますが、機能は同じです。デスクトップアプリ版のメリットは、ブラウザのタブに埋もれないこと、ローカルフォントが使えることなどです。まずはブラウザ版で始めて、使い慣れたらデスクトップアプリ版に移行するのがスムーズです。
Q：Figmaでコーディングもできますか？
A：Figmaはあくまでデザインツールであり、コーディング（HTMLやCSSの記述）はできません。ただし、Dev Modeを使えばデザインからCSSのプロパティ値を確認でき、コーディング作業の参考にできます。実際のコーディングにはVisual Studio Codeなどのテキストエディタを使いましょう。
Q：Figmaのデータはどこに保存されますか？
A：Figmaのファイルはクラウド上に自動保存されます。そのため、パソコンが故障してもデータが失われる心配はありません。複数のデバイスからログインすれば同じファイルにアクセスでき、外出先ではタブレットで確認、自宅ではPCで編集といった使い方も可能です。
Q：Webデザイン以外にもFigmaは使えますか？
A：FigmaはWebデザイン以外にも、スマホアプリのUI設計、プレゼン資料の作成、SNS用の画像制作、ワイヤーフレームの作成など、幅広い用途で活用されています。汎用的なデザインツールとして覚えておいて損はありません。
まとめ
Figmaは無料で始められ、ブラウザだけで動作する手軽さと、プロの現場でも使われる本格的な機能を兼ね備えたデザインツールです。フレーム、テキスト、図形ツールの基本操作を覚えたら、オートレイアウトとコンポーネントを使いこなすことで、効率的にデザインを作れるようになります。
まずはアカウントを作成して、簡単なWebページのデザインに挑戦してみてください。「触りながら覚える」のがFigma上達の最短ルートです。
