はじめに

WebサイトやアプリのUI設計に欠かせない「ワイヤーフレーム」。Figmaは、ブラウザ上で使えるデザインツールとして、手軽にワイヤーフレームを作成できる点で人気です。本記事では、Figmaを使った初心者向けのワイヤーフレーム作成方法を、実践的に解説します。

1. ワイヤーフレームとは？

1.1 ワイヤーフレームの目的

• ページ構成や要素の配置を視覚化する
• チーム内でデザインの方向性を共有する
• 開発前の情報設計やUX設計の基盤となる

1.2 ワイヤーフレームの種類

• ローファイ（Low-Fidelity）: 手書きや簡素な図形で構成される
• ハイファイ（High-Fidelity）: 実際のUIに近い詳細な設計図

2. Figmaの基本操作を覚えよう

2.1 アカウント作成と初期設定

1. Figma公式サイト にアクセスし、無料アカウントを作成
2. ブラウザまたはアプリ版で起動
3. 新しいデザインファイルを作成

2.2 画面構成

• Canvas: 実際にデザインするエリア
• Layersパネル: オブジェクトの階層構造
• Propertiesパネル: サイズ、位置、カラーなどを設定

3. ワイヤーフレームの作成手順

3.1 フレーム（画面サイズ）の設定

1. 左側ツールバーの「Frameツール」を選択（ショートカット：F）
2. スマホ用（iPhone）、PC用（Desktop）など任意のサイズを選択

3.2 レイアウトの設計

Figmaでは「Rectangle（四角形）」や「Text（テキスト）」などを使って簡単に構成できます。

• ナビゲーションバー: 上部に長方形を配置し、ロゴやメニュー項目をテキストで記述
• メインビジュアル: 中央に画像用の四角形と見出しテキスト
• コンテンツセクション: 複数の矩形やリスト要素を並べる

3.3 コンポーネント化

繰り返し使う要素（ボタンやカード）を「Component」にすることで、効率的に再利用できます。

1. 対象の要素を選択
2. 右クリック → Create Component

4. 初心者向けのワイヤーフレームテンプレート活用

Figmaの「Community」から、無料で使えるワイヤーフレームテンプレートが多数提供されています。

おすすめテンプレート例

• Wireframe Kit 2.0（基本UI要素が揃っている）
• Mobile UI Wireframe（スマホ向け設計に最適）

利用方法

1. Community画面で「wireframe」と検索
2. 任意のテンプレートを「Duplicate」して編集可能に

5. ワイヤーフレーム作成のコツと注意点

• 色や装飾は最小限に：構成に集中できる
• 1ページに1機能を意識：シンプルにまとめる
• チームと共有する：早い段階でフィードバックを得る

まとめ

Figmaは、無料で始められて直感的な操作が可能なため、初心者でもすぐにワイヤーフレームを作成できます。まずはシンプルな構成から始め、徐々にコンポーネントやテンプレートを活用してスキルを高めましょう。

参考リンク

• Figma公式サイト
• Figma Community