はじめに
前回の記事ではChatGPTやClaudeなどのAIツールをプログラミング学習とコーディングに活用する方法を解説しました。今回は少し方向を変えて、デザインツールFigma（フィグマ）の基本的な使い方を紹介します。「デザイナーのツールでしょ？」と思う方もいるかもしれませんが、Web制作者にとってFigmaは欠かせないツールです。デザイナーが作ったデザインデータを確認したり、自分でワイヤーフレームを作ったりと、コーダー・エンジニアにも役立つ場面がたくさんあります。
1. Figmaとは何か
1.1 Figmaの特徴
Figmaはブラウザ上で動作するUI・UXデザインツールです。インストール不要でWebブラウザから使えて、複数人でリアルタイムに同じファイルを編集できます。
Figmaの特徴：
✅ ブラウザで動く
→ インストール不要
→ WindowsでもMacでも同じ操作感
✅ 無料で使い始められる
→ 個人利用・学習用は無料プランで十分
✅ リアルタイム共同編集
→ 複数人が同時に同じファイルを編集できる
→ デザイナーとエンジニアが同じ画面を見ながら話せる
✅ コードの書き出しに対応
→ 要素を選択するとCSS・iOSなどのコードが表示される
✅ プラグインが豊富
→ アイコン・画像・グリッドなど便利な機能を追加できる
1.2 Web制作者がFigmaを使う場面
コーダー・エンジニアがFigmaを使う主な場面：
① デザインデータを確認する
→ デザイナーが作ったデザインのサイズ・色・フォントを確認する
→ 「この要素のpaddingは何px？」を調べる
② ワイヤーフレームを作る
→ ページの構成・レイアウトを簡単に設計する
→ コードを書く前に「どんな構成にするか」を整理する
③ コンポーネントを確認する
→ ボタン・カード・フォームなどの部品を確認する
→ CSSやReactコンポーネントに変換する
④ 自分のポートフォリオをデザインする
→ コードを書く前にFigmaでデザインを作っておく
⑤ クライアントとイメージを共有する
→ フリーランスの場合、制作前にFigmaでデザイン案を見せる
2. Figmaを始める
2.1 アカウントを作る
アカウント作成の手順：
① figma.com にアクセスする
② 「Get started for free」をクリックする
③ メールアドレスまたはGoogleアカウントで登録する
④ 無料の「Starter」プランを選ぶ
→ 個人のドラフトファイルは無制限に作れる
→ 共同編集（3ファイルまで）も無料で使える
2.2 画面の構成を知る
Figmaの画面構成：
┌────────────────────────────────────────┐
│ ツールバー（上部） │
│ 選択・フレーム・図形・テキストなど │
├─────────┬──────────────────┬───────────┤
│ │ │ │
│ レイヤー│ キャンバス │ プロパティ│
│ パネル │ （作業エリア） │ パネル │
│ （左） │ │ （右） │
│ │ │ │
└─────────┴──────────────────┴───────────┘
左パネル → 画面に配置した要素の一覧（レイヤー）
キャンバス → 実際に作業するエリア
右パネル → 選択した要素の幅・高さ・色・フォントなど
3. 基本操作をマスターする
3.1 キャンバスの移動とズーム
キャンバスの操作：
移動：
スペースキーを押しながらドラッグ
または マウスの中ボタンを押しながらドラッグ
ズームイン・アウト：
Ctrl（Mac：Command）+ スクロール
または Ctrl +「+」で拡大 / Ctrl +「-」で縮小
全体を表示する（フィットビュー）：
Shift + 1
選択した要素を中心に表示する：
選択してから Shift + 2
3.2 要素を選択する・動かす
選択と移動の操作：
要素を選択する：
Vキー → 選択ツールに切り替える
要素をクリック → 選択される
複数選択：
Shift + クリック → 選択に追加する
ドラッグで囲む → まとめて選択する
移動する：
選択してからドラッグ
1pxずつ移動（ナッジ）：
選択して矢印キー → 1pxずつ移動
Shift +矢印キー → 10pxずつ移動
3.3 よく使うショートカットキー
必ず覚えておくショートカット：
F → フレームツール（Webページの画面を作るときに使う）
R → 長方形ツール
T → テキストツール
V → 選択ツール
H → ハンドツール（キャンバスを移動する）
Ctrl（Command）+ Z → 元に戻す
Ctrl（Command）+ D → 複製する
Ctrl（Command）+ G → グループ化する
Ctrl（Command）+ [ / ] → レイヤーの順番を変える
Alt（Option）+ ドラッグ → 要素を複製しながら移動
4. フレームを作る
4.1 フレームとは
FigmaでフレームはWebページやスマートフォン画面の「器」になる重要な概念です。
フレームの使い方：
① Fキーを押してフレームツールに切り替える
② キャンバスをドラッグして好きなサイズのフレームを作る
③ 右パネルの「Design」タブで
よく使われるサイズを選ぶこともできる：
Desktop：
→ 1440 × 900（フルHDデスクトップ）
→ 1280 × 800
Mobile：
→ 390 × 844（iPhone 14）
→ 360 × 800（Android）
Tablet：
→ 768 × 1024（iPad）
💡 Webページのデザインはまずフレームを作るところから始めます： フレームの中に要素を配置していくのがFigmaの基本的な作り方です。フレームはHTMLの <div> に近いイメージです。
5. 基本的な要素を作る
5.1 長方形・円を作る
図形の作り方：
長方形：
① Rキーを押す
② キャンバスをドラッグして描く
③ 右パネルでW（幅）・H（高さ）を正確に入力する
正方形や正円を作る：
Shiftキーを押しながらドラッグ → 縦横比が1:1になる
角丸の設定：
長方形を選択 → 右パネルの「Corner radius」に数値を入力
例：8と入力 → 角が8px丸くなる
5.2 テキストを追加する
テキストの作り方：
① Tキーを押す
② キャンバスをクリック → テキストを入力する
（またはドラッグして範囲を決めてから入力する）
③ 右パネルでフォント・サイズ・色などを設定する
テキストのプロパティ：
・フォントファミリー → Noto Sans JP・Inter など
・フォントサイズ → 16・18・24・32 など
・フォントウェイト → Regular・Medium・Bold など
・行間（Line height）→ 1.5・160% など
・文字間隔（Letter spacing）→ 0・0.05em など
・テキストの色 → カラーピッカーで選ぶ
5.3 色を設定する
色の設定方法：
① 要素を選択する
② 右パネルの「Fill」（塗り）をクリックする
③ カラーピッカーが開く
・カラーピッカーで直接選ぶ
・HEXコード（例：#1A5FC0）を入力する
・RGB値を入力する
よく使う色の設定：
塗りなし → 「-」ボタンをクリック
透明度の設定：
HEXコードの横の「100%」の数値を変える
例：「50%」→ 半透明になる
グラデーションの設定：
Fillの「Solid」をクリック → 「Linear」などに変える
6. デザインデータを確認する（コーダー向け）
6.1 デザインデータから数値を読み取る
デザイナーが作ったFigmaのデータからコーディングに必要な情報を取得します。
確認できる情報：
① サイズ（幅・高さ）
要素を選択 → 右パネルのW（幅）・H（高さ）を確認
② 位置（X・Y座標）
要素を選択 → 右パネルのX・Yを確認
③ 余白（padding・margin）
要素間の距離を確認する方法：
→ 要素を選択した状態でAlt（Option）キーを押しながら
別の要素にホバーする
→ 要素間の距離がピンク色の数値で表示される
④ 色
要素を選択 → 右パネルの「Fill」のカラーをクリック
→ HEXコード・RGBが表示される
⑤ フォント情報
テキストを選択 → 右パネルで
フォント名・サイズ・ウェイト・行間を確認できる
⑥ 角丸（border-radius）
長方形を選択 → 右パネルの「Corner radius」を確認
6.2 CSSコードを確認する（Inspectモード）
FigmaにはCSSのコードを自動で表示してくれる機能があります。
Inspectモードの使い方：
① 画面右上の「Inspect」タブをクリックする
（または要素を選択して右パネルの「Inspect」を見る）
② 任意の要素をクリックする
③ 右パネルにその要素のCSSが表示される：
例：
.element {
display: flex;
width: 360px;
height: 48px;
padding: 12px 24px;
background: #1A5FC0;
border-radius: 8px;
}
④ 表示されたCSSをコピーして
自分のCSSファイルに貼り付ける
⑤ 細かい調整は自分で加える
→ Figmaが出力するCSSはあくまで参考値
→ レスポンシブ対応や細かい調整は自分で書く
💡 Inspectモードは「答え合わせ」に使いましょう： 「このボタンのpadding何だっけ」という確認に使うのが最も効果的な使い方です。すべてのCSSをコピーしてくると、Figmaに依存した保守しにくいコードになってしまうので注意が必要です。
7. コンポーネントを活用する
7.1 コンポーネントとは
コンポーネントはFigmaでの「再利用可能な部品」です。ReactのコンポーネントのFigma版というイメージです。
コンポーネントの作り方：
① 再利用したい要素を作る（例：ボタン）
② その要素を選択する
③ 右クリック → 「Create component」をクリック
または Ctrl（Command）+ Alt（Option）+ K
④ 紫色のダイヤモンド（◆）アイコンが付いたら完成
コンポーネントを使う（インスタンスを作る）：
⑤ 左パネルの「Assets」タブをクリックする
⑥ 作ったコンポーネントを見つける
⑦ キャンバスにドラッグ&ドロップする
→ コンポーネントのコピー（インスタンス）が作られる
⑧ 元のコンポーネントを変更すると
すべてのインスタンスに自動で反映される
7.2 コミュニティのテンプレートを使う
Figmaにはコミュニティが公開している無料テンプレートが豊富にあります。
テンプレートの探し方：
① figma.com/community にアクセスする
② 検索欄に「portfolio」「landing page」
「UI kit」などを入力して検索する
③ 気に入ったテンプレートを見つけたら
「Open in Figma」または「Duplicate」をクリックする
→ 自分のFigmaに保存されて使えるようになる
おすすめのテンプレート：
・Material 3 Design Kit（Googleのデザインシステム）
・Untitled UI（UIコンポーネントの大型キット）
・Wireframe Kit（ワイヤーフレーム用）
8. AutoLayoutで柔軟なレイアウトを作る
8.1 AutoLayoutとは
AutoLayoutはFigmaのCSSのFlexboxに相当する機能です。要素を縦・横に並べて余白を自動調整できます。
AutoLayoutの設定方法：
① 要素（またはグループ）を選択する
② 右パネルの「+」ボタン（AutoLayoutの追加）をクリック
または Shift + A
③ 設定できる項目：
方向：
→ 横方向（Horizontal）← Flexboxのrow
→ 縦方向（Vertical）← Flexboxのcolumn
要素間の余白（Gap）：
→ CSSのgapに相当
→ 数値を入力するとすべての要素間に均等な余白がつく
内側の余白（Padding）：
→ CSSのpaddingに相当
→ 上下左右それぞれ設定できる
揃え方（Alignment）：
→ 中央揃え・左揃え・右揃えなど
→ CSSのalign-items・justify-contentに相当
💡 AutoLayoutを使うとコーディングの感覚に近いレイアウトが作れます： display: flex で作るレイアウトをFigmaで表現するのがAutoLayoutです。AutoLayoutを使って作られたデザインはCSS Flexboxへの変換がとてもスムーズになります。
9. ポートフォリオのデザインをFigmaで作る
9.1 コーディング前にFigmaで設計するメリット
コードを書く前にFigmaで設計するメリット：
① 全体の構成を俯瞰できる
→ コードを書き始める前に「どんなページにするか」が固まる
② 試行錯誤がコードより速い
→ Figmaで色やレイアウトを変えるのはコードより圧倒的に早い
③ クライアントとの認識合わせができる
→ 「こういうデザインで作りますよ」と事前に確認できる
④ コーディングがスムーズになる
→ 迷わず仕様通りにコードを書けるようになる
9.2 ポートフォリオのページ構成をFigmaで設計する例
設計手順：
① 新しいフレームを作る
→ 1440 × 900（デスクトップ）のフレームを作る
② 大きなブロックを長方形で配置する
→ ヘッダー
→ ヒーローセクション
→ スキルセクション
→ 制作実績セクション
→ お問い合わせセクション
→ フッター
③ 各ブロックの中身を埋めていく
→ テキストを追加する
→ ボタンを配置する
→ 画像のプレースホルダーを置く
④ 色・フォント・余白を調整する
⑤ スマートフォン版（390px幅）のフレームも作る
→ レスポンシブデザインの設計
⑥ 完成したらコーディングを開始する
10. 実践チェックリスト
✓ figma.comで無料アカウントを作成したか
✓ 新しいファイルを作ってFキーでフレームを作れるか確認したか
✓ RキーとTキーで長方形とテキストを作れるか確認したか
✓ スペースキーを押しながらドラッグでキャンバスを移動できるか確認したか
✓ 要素を選択してAlt（Option）キーを押しながら別の要素にホバーして要素間の距離を確認できたか
✓ 右パネルのInspectタブでCSSコードを確認できたか
✓ 要素をコピー（Ctrl+D）して複数の要素を効率よく配置できたか
✓ AutoLayout（Shift+A）で要素を縦横に並べてpaddingとgapを設定できたか
✓ コミュニティテンプレートを1つDuplicateして中身を確認したか
まとめ
今回はFigmaの基本的な使い方を解説しました。ポイントをまとめると：
- FigmaはブラウザベースのUI・UXデザインツールで無料で使い始められる
- コーダー・エンジニアも「デザインデータの確認」「ワイヤーフレーム作成」「ポートフォリオデザイン」などで活用できる
- フレーム（Fキー）・長方形（Rキー）・テキスト（Tキー）の3つが最も使う基本ツール
- Alt（Option）キーを押しながらホバーすると要素間の距離がピンクの数値で表示される
- InspectモードでCSSコードを確認できるが「答え合わせ」用として使うのがベスト
- AutoLayoutはCSSのFlexboxに相当する機能で要素を縦横に並べてpadding・gapを設定できる
- コーディング前にFigmaでページ構成を設計しておくと全体像が固まりコーディングがスムーズになる
- コミュニティテンプレートを活用するとプロのデザインの構成・色使い・余白を学べる
次の記事では、Figmaをさらに活用して実際にポートフォリオのデザインを作っていく実践的な手順を解説します。お楽しみに！
コメント