初心者必見！Figmaの使い方についてまとめてみた！

Figma

はじめに

Web制作やWebデザインを進めるうえで、ワイヤーフレームを作成できると、クライアントとの方向性を事前にしっかりと共有できるため、その後の作業がスムーズに進みます。

今回は、そんなワイヤーフレーム制作におすすめのツール「Figma」の基本的な使い方をご紹介します！

ワイヤーフレームを作れるツール「Figma」とは？

**Figma（フィグマ）**は、ブラウザ上で使えるデザインツールです。
アプリ版も用意されており、ブラウザとアプリのどちらでも利用可能。お好みに合わせて使い分けることができます。

無料プランと有料プランがありますが、ワイヤーフレームの制作であれば無料版で十分対応可能です。
「どのツールでワイヤーフレームを作ればいいか迷っている…」という方には、まずFigmaの無料版を試してみることをおすすめします。

特にFigmaはUI/UXデザインに特化した設計になっており、直感的に操作できる点も大きな魅力。
オンライン上で動作するため、インターネット環境があればどこからでも編集・共有が可能です。
さらに、複数人でのリアルタイム共同編集にも対応しているため、チームでのWeb制作にもぴったりです。

Figmaの基本的な使い方

1. アカウントを作成しよう

まずはFigmaの公式サイトにアクセスして、アカウントを作成しましょう。

▶︎ Figma公式サイト

サイトにアクセスしたら、右上の「Get started」ボタンをクリック。
Googleアカウントと連携するか、メールアドレスとパスワードを使って登録できます。
お好きな方法でアカウントを作成し、ログインしてください。

2. ブラウザかアプリか、使い方を選ぼう

Figmaは、ブラウザ上でもアプリでも使用可能です。
どちらの環境でも基本的な機能は同じなので、使いやすい方を選んで利用しましょう。

▶︎ Figmaアプリダウンロードページ

お使いのOSに合ったバージョンを選んでダウンロードしてください。
アプリで作成したデザインは、ブラウザ版でもそのまま確認・編集できます。

Figmaでできること

Figmaでは、以下のようなさまざまな機能を活用することができます：

  • ワイヤーフレームの作成

  • ページの追加・管理

  • コンテンツの作成（テキストや画像の配置など）

  • プロトタイプ（デモンストレーション）機能

  • デザインの共有

  • コメントの書き込み

各機能の特徴を解説！

● ワイヤーフレーム作成

サイトの構成や要素の配置をざっくりと設計する「枠組みづくり」ができます。初期段階の設計にぴったりです。

● ページ作成

新しいワークスペースを作成でき、画面ごとにデザインを整理できます。トップページ、下層ページなどを分けて制作するのに便利です。

● プロトタイプ機能

Figmaでは「ボタンを押したら次のページへ遷移する」といった動作を再現できます。
この機能を使えば、実際に操作できるようなデモンストレーションが作成可能。
クライアントにサイトの動きを視覚的に伝えられるので、完成イメージを明確に伝えたいときに非常に有効です。

● 共有機能

画面右上の「共有」ボタンから、URLを発行して他の人とプロジェクトを共有できます。
権限の設定も細かく可能なので、「閲覧のみ」「編集可能」などの使い分けも安心です。

● コメント機能

フィードバックをもらいたい部分にコメントを残すことができます。
編集画面の上部にあるコメントアイコンから、エレメントごとにピンポイントでコメントを追加可能。
チームメンバーやクライアントとスムーズにやり取りできるのもFigmaの魅力です。

Figmaの編集画面にあるアイコンの意味とは？

Figmaの編集画面は、機能をアイコン化してすっきりとまとめられているのが特徴です。
慣れれば直感的に使えますが、最初は「このアイコン、何の機能だろう？」と迷ってしまうことも。

そこで今回は、Figmaの編集画面左上に並ぶ主要アイコンの役割を分かりやすく解説します！

■ Figma編集画面 左上のアイコン一覧と機能

 

アイコン 機能の概要
メニュー ファイル操作全般：新規作成、保存、インポート、設定など各種メニューがまとまっています。
選択 要素の選択・移動・拡大縮小が可能。作業の基本となるツールです。
フレーム アートボードの作成（＝ページ枠を作る機能）。レスポンシブ設計にも対応。
図形 長方形・楕円・直線・多角形・星などの基本図形や、画像の配置ができます。
ペン 自由な線やカーブを描ける「ペンツール」や「鉛筆ツール」を使えます。
テキスト テキストの挿入・編集ができます。見出しや説明文などに活用。
プラグイン 外部プラグインやウィジェットを使って、Figmaを拡張することができます。
手のひら キャンバス全体をドラッグして移動できるツール。作業エリアの移動に便利。
コメント デザイン上にコメントを挿入可能。チームでのフィードバック共有に役立ちます。

■ 実際に触ってみるのが一番！

アイコンだけでは分かりづらく感じるかもしれませんが、一度でも使ってみるとスッと理解できるものばかりです。

まずは気になったアイコンをクリックしてみたり、簡単な図形やテキストを配置してみるところから始めてみましょう。
Figmaは直感的に操作しやすい設計になっているので、触れば触るほど慣れていきます！

Figmaでワイヤーフレームを作る方法

Figmaの基本操作がわかってきたところで、実際に1ページ（1ペラ）のワイヤーフレームを作成してみましょう。
今回は例として、簡単なWebページの構成に沿って解説していきます。Figmaを開きながら、ぜひ一緒に進めてみてください！

■ ワイヤーフレーム構成の基本

今回作成するページは、以下のようなパーツに分かれています。

  • ヘッダー（ロゴ・メニュー）

  • ヘッダー画像

  • コンテンツ（SERVICE／ABOUT／MEMBER／全幅画像／CONTACT）

  • フッター

それぞれのブロックを順に作成していきます。

STEP 1：フレームを作成する（土台づくり）

まず、デザインを描くキャンバス（土台）となるフレームを用意します。

  1. 左上の「フレームアイコン」をクリック

  2. 画面右側に表示されるテンプレートから「Desktop」サイズを選択（例：1440px）

これでワイヤーフレームのベースが完成です。

STEP 2：ヘッダーを作成する

ヘッダーの背景

  1. 図形アイコンから「長方形」を選び、画面上部にドラッグしてヘッダー領域を作成

  2. 幅：フレーム幅に合わせる、 高さ：50px程度

  3. 色：#D4D4D4（好みに応じて変更可能）

ロゴ・メニューをテキストで挿入

  • テキストツールで「ロゴ」や「メニュー」などを入力

  • 選択ツールで移動し、左右や中央に配置

  • 文字の調整は右側のパネルから（フォント・サイズ・太さなど）

  • 微調整にはガイド線（赤線）を活用し、バランスを整えましょう

STEP 3：ヘッダー画像を配置

  1. 図形アイコンから「画像の配置」を選択

  2. 任意の画像を選び、フレーム内にドラッグして配置

  3. 高さや幅は、ドラッグする範囲で自動的に調整されます

  4. 右メニューでコントラストや明るさを変更可能

  5. キャッチコピーなどのテキストも重ねて入れておくと印象UP

STEP 4：コンテンツ部分を作成

● SERVICEセクション

  • 見出し（テキスト）：「SERVICE」などを追加

  • 図形で正方形を作成し、角の半径に「150px」と入力 → 丸いアイコンに

  • この丸を4つコピー＆配置し、中央に整列

● ABOUTセクション

  • 四角の図形を追加し、その上にテキストを重ねる

  • 他セクションと高さや余白を揃えると統一感が出ます

● MEMBERセクション

  • テキストと画像を組み合わせて作成（画像はSERVICEと同様に配置）

  • 4人分の画像を均等に並べ、上下左右の余白を意識して整えましょう

● 全幅画像

  • ヘッダー画像と同じ方法で画像を挿入

  • 他のブロックとの余白を合わせて、レイアウトに統一感を持たせましょう

● CONTACTセクション

  • 四角形をベースにフォームを作成

  • 「NAME」「MESSAGE」「SEND」などの項目をテキストで追加

  • ボタン（SEND）は中央に配置し、上下の余白も整えると綺麗です

STEP 5：フッターを作成

  • ヘッダーと同じく、図形アイコンで四角を配置

  • 色はやや濃いめのグレー（例：#D9D9D9）で差別化

  • サイト情報や著作権表示などをテキストで追加しても◎

  • 最下部には余白を空けすぎず、きちんと詰めておくと締まります

まとめ

ワイヤーフレームは「構成を考える・形にする」ための設計図。
完璧を目指すよりも、まずはざっくりと要素を配置してみるのがコツです。

また、Figmaは操作が直感的で、図形・テキスト・画像配置などが簡単にできるため、デザインの初学者でも気軽に取り組めます。

慣れてくれば、そのままデザインカンプとして活用することも可能です。
ぜひまずは一度、実際に作ってみて感覚を掴んでみてくださいね！