第7回：Figmaなどのデザインツールを使ってみよう｜Webデザイン実践ステップへ！

これまでHTMLやCSS、デザインの基礎を学んできたら、次はいよいよ「実際のデザイン作り」です。
そのときに欠かせないのがFigma（フィグマ）をはじめとするUI/UXデザインツール。

今回は、未経験者でも扱いやすいFigmaを使ったデザインの始め方をわかりやすく解説します。

Figmaとは？なぜ今選ばれているのか

Figmaはブラウザ上で使えるWebデザイン・UIデザイン用のツールです。

Figmaが人気な理由

• インストール不要で使える（クラウド型）
• 共同編集が超カンタン（Googleドキュメント感覚）
• 無料でも十分使える機能が豊富
• WebデザインとアプリUIに強い！
• 2. Figmaの基本操作とアカウント作成

1. 公式サイト（https://www.figma.com）にアクセス
2. 無料アカウントを作成（Googleアカウント連携OK）
3. 「New File」で新規デザインを開始

よく使うツール一覧

ツール	アイコン	用途
Frame	四角枠	ページサイズ指定
Rectangle	四角形	ボックス描画
Text	T	テキスト入力
Components	▲	パーツの部品化
Prototype	→	動き・遷移の設定

ワイヤーフレームとモックアップの違い

目的	ワイヤーフレーム	モックアップ
ざっくり設計	配置を決めるための設計図	実寸・色付け済み完成状態
ビジュアル	色や写真なし（灰色ベース）	配色やフォントあり
作成タイミング	初期構想段階	デザイン固めの段階

→ デザインの工程：
ワイヤーフレーム → モックアップ → コーディング

UIパーツ（ボタン・ヘッダーなど）の作り方

Figmaでは**「コンポーネント」**機能を使うことで、効率的に部品を設計できます。

作成手順（例：ボタン）

1. Rectangle で四角形を描く
2. Text でボタン文字を入力（例：「お問い合わせ」）
3. 両方を選択 → Create Component（⌥⌘K）
4. 色・角丸・シャドウなどを整える
5. 他のページでも使い回し可能に！

→ ヘッダー・メニュー・カード型パーツも同じ手順でOK

コーディングとの連携方法

デザインを作って終わりではありません。
Webサイトに反映するためにはコーディング担当との連携が必須です。

Figmaで使える便利機能

• CSSコードの自動出力：右側の InspectタブでHTML/CSSの値をコピー可
• 画像書き出し（PNG/SVG/JPG）
• コメント機能：修正依頼やポイント指示もスムーズ

Figmaで作った「モックアップ」をそのまま見せながら、
エンジニアに「画面に落とし込んでください」と伝えられるのが最大の魅力です。

まとめ

• Figmaは「誰でも使える」Webデザインツール
• ワイヤーフレーム▶モックアップ▶コーディングへ進めるのが基本の流れ
• コンポーネントを使えば効率UP、チーム連携も抜群！
• HTML/CSSとの連携もスムーズなので初心者にもおすすめ

次回は、プロトタイプ機能を使って「動くデザイン」を作る方法」をご紹介します！
「ボタンを押したらページが遷移する」など、よりリアルなUXを作れるようになりますよ。

#Figma初心者#デザインツール勉強中#WEBデザイン基礎#ワイヤーフレーム#モックアップ#UIUXデザイン#WEB制作初心者#未経験からWEBデザイナー#コーディング連携#デザイン講座

Favorite