デザイン未経験でも大丈夫！Figmaで最初に覚える5つの操作

Posted on by

Figmaは「触りながら覚える」デザインツール

Figma（フィグマ）は、Webブラウザで使えるUIデザインツールです。
インストール不要で、Googleアカウントさえあればすぐに始められる手軽さが魅力。
しかも無料で高機能。世界中のデザイナーが日常的に使っている定番ツールです。

でも、初めて触る人の多くがこう感じます。

「どこをクリックしたらいいの？」
「レイヤーとかフレームとか難しそう…」

安心してください。
Figmaは、操作のルールを5つだけ覚えれば、誰でもデザインの基本を理解できます。

この記事では、最初に覚えるべき5つの操作を、初心者でも実践できるステップで紹介します。

STEP1：フレーム（Frame）を作ってキャンバスを整える

まずは「フレーム」を作ることから始めましょう。
フレームとは、デザインの“土台”となる画面領域のこと。
Webページ・スマホアプリ・バナーなど、どんなデザインもこの上で作ります。

▶ 操作方法

  1. 左上メニューの「Frame」アイコン（四角形＋）をクリック
  2. 右側のプリセットから「Desktop」や「iPhone 13」などを選択
  3. 真っ白なキャンバスが表示されたら準備完了

ポイント

  • フレームは「ページ」を作る感覚でOK。
  • 名前をつけておくと後で整理が楽になります（例：Top Page、スマホ版など）。

STEP2：図形（Shape）を使って要素を配置する

次に、図形ツールを使ってレイアウトを作ってみましょう。
四角・丸・線を組み合わせることで、ボタンやカードなどのUIを表現できます。

▶ 操作方法

  • Rキー → 四角形（Rectangle）
  • Oキー → 丸（Oval）
  • Lキー → 線（Line）

マウスでドラッグするだけで形が作れます。
Shiftキーを押しながら操作すれば、正方形や正円を作ることも可能です。

ポイント

図形を作るときに出る「紫色のガイドライン」に注目。
Figmaは自動で位置を整えてくれるので、初心者でもきれいに並べられます。

STEP3：テキスト（Text）を入力して情報を整理する

デザインの中に文字を入れるには「Text」ツールを使います。
見出し・説明文・ボタンテキストなど、情報を整理する要素です。

▶ 操作方法

  1. Tキーを押す
  2. キャンバスをクリックして文字を入力
  3. 右パネルでフォントや文字サイズを変更

おすすめ設定

  • フォント：Noto Sans JP（日本語でも崩れにくい）
  • 文字サイズ：見出し＝24px前後、本文＝14〜16pxが目安

補足

FigmaはGoogle Fontsと連携しているため、無料で数百種類のフォントが使えます。
デザインに合った雰囲気を試しながら選べます。

STEP4：色・余白・影など「見た目」を整える

形と文字が揃ったら、次は“デザインらしさ”を出していきましょう。
右側のプロパティパネルで、配色・角丸・影などを調整します。

▶ よく使う設定項目

項目内容
Fill（塗りつぶし）背景色を設定（HEXコードも入力可）
Stroke（線）枠線の色と太さを調整
Corner Radius角を丸くする（ボタンなどに）
Effect → Drop Shadow影をつけて立体感を出す

配色のコツ

初心者は「3色以内」でまとめるのがおすすめ。

  • メインカラー（例：青 #007BFF）
  • サブカラー（例：グレー #F4F4F4）
  • 強調カラー（例：オレンジ #FF9500）

STEP5：整列とグループ化でレイアウトを美しく

最後に、デザインの見栄えを整える操作です。
要素を正確に並べたり、複数オブジェクトをまとめたりすることで、全体が一気にきれいになります。

▶ 整列の操作

複数の要素を選択（Shift＋クリック）して、上部ツールバーから整列方法を選択。

  • 左寄せ
  • 中央揃え
  • 均等配置

また、「Distribute spacing」を使えば、間隔を自動的に揃えられます。

▶ グループ化の操作

複数の要素を選択 → Ctrl（Command）＋G
グループ化した要素は、まとめて移動・複製が可能になります。

ポイント

「Auto Layout（オートレイアウト）」機能を使えば、要素を並べたときの余白も自動で調整されます。
デザインが崩れにくく、ボタンなどの拡張にも便利です。

Figmaを覚えるコツ：完璧を目指さず“触ってみる”

Figmaは、使えば使うほど感覚的に操作できるようになります。
最初から完璧を目指す必要はありません。

学びのステップ例

  1. 1日目：ツールの位置を覚える
  2. 2日目：ボタンを1つ作ってみる
  3. 3日目：LP（1画面）を真似してみる
  4. 4日目：色やフォントを調整して自分風にする
  5. 5日目：動くプロトタイプに挑戦！

デザインは「慣れ」で上達する分野。
Figmaなら、失敗してもすぐUndoで戻せるので、どんどん触ってみましょう。

まとめ：Figmaは「最初の5ステップ」で十分始められる！

今回紹介した5つの操作を覚えるだけで、あなたも立派なFigmaユーザーです。

操作ステップ内容
① フレームを作る作業領域（ページ）を準備する
② 図形を配置するレイアウトのベースを作る
③ テキストを入れる情報を整理する
④ 色と影を整えるデザインの印象を決める
⑤ 整列・グループ化全体を整えて完成度を上げる

これだけで、バナー・アプリUI・LPデザインの基礎がすべて身につきます。
デザイン未経験でも、Figmaなら“触りながら”自然とセンスが磨かれていくでしょう。