これまでHTMLやCSS、デザインの基礎を学んできたら、次はいよいよ「実際のデザイン作り」です。
そのときに欠かせないのがFigma（フィグマ）をはじめとするUI/UXデザインツール。
今回は、未経験者でも扱いやすいFigmaを使ったデザインの始め方をわかりやすく解説します。
Figmaとは？なぜ今選ばれているのか
Figmaはブラウザ上で使えるWebデザイン・UIデザイン用のツールです。
Figmaが人気な理由
- インストール不要で使える（クラウド型）
- 共同編集が超カンタン（Googleドキュメント感覚）
- 無料でも十分使える機能が豊富
- WebデザインとアプリUIに強い！
- 2. Figmaの基本操作とアカウント作成
- 公式サイト（https://www.figma.com）にアクセス
- 無料アカウントを作成（Googleアカウント連携OK）
- 「New File」で新規デザインを開始
よく使うツール一覧
| ツール | アイコン | 用途 |
|---|---|---|
| Frame | 四角枠 | ページサイズ指定 |
| Rectangle | 四角形 | ボックス描画 |
| Text | T | テキスト入力 |
| Components | ▲ | パーツの部品化 |
| Prototype | → | 動き・遷移の設定 |
ワイヤーフレームとモックアップの違い
| 目的 | ワイヤーフレーム | モックアップ |
|---|---|---|
| ざっくり設計 | 配置を決めるための設計図 | 実寸・色付け済み完成状態 |
| ビジュアル | 色や写真なし（灰色ベース） | 配色やフォントあり |
| 作成タイミング | 初期構想段階 | デザイン固めの段階 |
→ デザインの工程：
ワイヤーフレーム → モックアップ → コーディング
UIパーツ（ボタン・ヘッダーなど）の作り方
Figmaでは**「コンポーネント」**機能を使うことで、効率的に部品を設計できます。
作成手順（例：ボタン）
Rectangleで四角形を描くTextでボタン文字を入力（例：「お問い合わせ」）- 両方を選択 →
Create Component（⌥⌘K） - 色・角丸・シャドウなどを整える
- 他のページでも使い回し可能に！
→ ヘッダー・メニュー・カード型パーツも同じ手順でOK
コーディングとの連携方法
デザインを作って終わりではありません。
Webサイトに反映するためにはコーディング担当との連携が必須です。
Figmaで使える便利機能
- CSSコードの自動出力：右側の InspectタブでHTML/CSSの値をコピー可
- 画像書き出し（PNG/SVG/JPG）
- コメント機能：修正依頼やポイント指示もスムーズ
Figmaで作った「モックアップ」をそのまま見せながら、
エンジニアに「画面に落とし込んでください」と伝えられるのが最大の魅力です。
まとめ
- Figmaは「誰でも使える」Webデザインツール
- ワイヤーフレーム▶モックアップ▶コーディングへ進めるのが基本の流れ
- コンポーネントを使えば効率UP、チーム連携も抜群！
- HTML/CSSとの連携もスムーズなので初心者にもおすすめ
次回は、プロトタイプ機能を使って「動くデザイン」を作る方法」をご紹介します！
「ボタンを押したらページが遷移する」など、よりリアルなUXを作れるようになりますよ。
#Figma初心者#デザインツール勉強中#WEBデザイン基礎#ワイヤーフレーム#モックアップ#UIUXデザイン#WEB制作初心者#未経験からWEBデザイナー#コーディング連携#デザイン講座