はじめてのFigma（フィグマ）完全解説マニュアル
本マニュアルの目的と進め方
本テキストは、これまでデザインソフトに触れたことがない方でも、「Figmaとは何か」という根源的な理解から、自分の思い通りに部品を作成・編集できる状態まで無理なく導くために設計されています。難しい専門用語はすべて日常の身近な道具に置き換えて解説しています。
学習の目次（クリックすると該当箇所に移動します）
そもそもFigma（フィグマ）とは何か？
Figmaは、パソコンの画面上でアプリやWebサイトのデザイン、チラシ、プレゼンテーション用スライドを組み立てるための世界標準デザインツールです。
イメージで理解 現実世界に例えると「絶対に散らからない、無限に広い作業机と工作セット」
工作用紙をハサミで切り、のりで貼り、ペンで文字を書く——あの図画工作の楽しさを、画面の中でそのまま行えます。
Figmaが多くの人に選ばれている3つの理由
-
1
面倒なインストールが不要 Google ChromeやMicrosoft Edgeなど、普段インターネットを見ている画面（ブラウザ）ですぐ開けます。
-
2
「保存ボタン」がない（完全自動保存） 1文字打ち込むごと、1ミリ動かすたびにインターネット上に自動保存されます。「保存を忘れてデータが消えた」という恐怖が一切ありません。
-
3
同じ机をみんなで囲んで作業できる 同僚や友人とリンクを共有するだけで、相手のマウスカーソルの動きを見ながら、同時に1つの作品を作れます。
マウス操作と画面の基礎知識
画面を開いたとき、どこに何があるのかを理解しておけば怖くありません。画面は明確に「3つの役割」に分かれています。
レイヤーパネル
置いたパーツの「重なり順リスト」。下にあるものほど奥、上にあるものほど手前に見えます。
キャンバス（作業台）
無限に広がる真っ白な作業机です。ここに白い紙（フレーム）を置き、デザインを作ります。
プロパティパネル
色や大きさの「設定リモコン」。選んだパーツに応じて設定項目が切り替わります。
これだけ覚えれば迷わない！画面移動のマウス操作
| やりたいこと | 操作方法（手順） | 初心者へのワンポイント |
|---|---|---|
| 部品をつかむ（選択） | 左クリック | つかむと周囲に青い線がつきます。解除は何もない場所をクリック。 |
| 机を移動する（見渡す） | Space を押しながらマウスをドラッグ | 矢印カーソルが「手のひら」に変わります。マウスホイール押し込みでも可能。 |
| 近づく・離れる（ズーム） | Ctrl（Macは Cmd）を押しながらホイール回転 | 細かい文字を見るときは前へ、全体を確認するときは手前へ回します。 |
基本の道具（ツール）をマスターする
画面の上部（または下部）に並んでいるアイコン群が「道具箱」です。まずは以下のたった4つの道具を覚えるだけで、9割のデザインが作れるようになります。
パーツを掴んで位置を動かすための「自分の手」です。
無限の机の上に敷く「白い紙（画面サイズ）」を用意する道具です。
ボタンやカードの土台となる四角形（Rectangle）を描く道具です。
画面上に日本語や英数字を配置する道具です。
色と形を自由に変える（右パネルの使い方）
作った四角形を左クリックして青い線がついた状態にすると、画面右側の「設定リモコン（プロパティパネル）」が使えます。ここにある主要な設定4つを押さえましょう。
失敗したときの救済策と重要キー
パソコン初心者が知っておくべき一番大切なこと
パソコンの操作で「取り返しのつかない致命的な失敗」は絶対に起きません。 変な形になってしまっても、文字が消えてしまっても、魔法のキーを使えば瞬時に直前の状態に戻せます。
1手前に戻す（やり直し）
間違えた瞬間にこれを押せば、時計の針を巻き戻すように元の状態に戻ります。
いらない物を消す
消したいパーツをクリックして選択したあと、このキーを押すと消えます。
双子のように増やす
選んだパーツと全く同じものがその場に増えます。マウスでずらして使います。
【実践練習】綺麗なWebサイトのボタンを1つ作ろう
学んだ道具を組み合わせて、実際のWebサイトやアプリで使われている「押しやすい送信ボタン」をゼロから完成させましょう。以下のステップに沿って進めます。
台紙（フレーム）を敷く
キーボードの F を押し、右パネルに表示された一覧から「Desktop」をクリックします。中央の作業机に真っ白な大きな紙が現れます。
ボタンの土台（四角形）を描いて設定する
キーボードの R を押し、白い台紙の上でマウスを斜めに引っ張って四角形を描きます。
・右パネルの「W」に 200、「H」に 50 と入力して確定します。
・角丸アイコンに 8 と入力し、角を少し丸くします。
・「Fill」をクリックし、好きな青色（例：#004098）を選びます。
ボタンの上に文字を乗せる
キーボードの T を押し、四角形の中央付近を1回カチッと左クリックします。
・「送信する」と入力し、入力が終わったら Esc キーを押します。
・右パネルの文字設定で、色を「白（#FFFFFF）」にし、文字サイズを「18」にします。
位置をど真ん中に整える
キーボードの V を押して矢印ツールに戻します。文字をマウスで掴み、青い四角形のちょうど真ん中に動かします。上下左右の真ん中に来ると、赤いガイド線がピピッとお知らせしてくれます。
2つを合体させる（グループ化）
四角形と文字がバラバラにならないよう、1つの「ボタンというパーツ」に束ねます。
・マウスの左ボタンを押したまま、四角と文字をまるごと囲むように四角く引き伸ばして選択します。
・その状態で Ctrl + G（Macは Cmd + G）を押します。
🎉 これで完成です！どこへ動かしても文字と四角が一緒に動く立派なボタンが作れました。
コメント