Figmaの使い方 超入門｜未経験Webデザイナーが最初にやること【無料で始める】

スクール選び・比較

※本ページはプロモーションを含みます

Figmaがいいって聞くけど、開いても何から触ればいいのか分からない…

無料って本当？お金がかかったり、英語で難しかったりしないかな…

AKIAKI

Figmaは無料で始められて、今のWebデザインでは標準のツールです。最初に触る順番を、つまずかないように整理しますね。

Webデザインの勉強を始めると、必ずと言っていいほど名前を聞くのが「Figma（フィグマ）」です。とはいえ、いざ開いてみると画面にいろいろなボタンが並んでいて、何から触ればいいのか分からず固まってしまう——最初はみんなそうなので、安心してください。

この記事では、未経験の方がFigmaを無料で始めて、最初の1枚を作れるようになるまでを、超入門としてやさしく整理します。結論を先に言うと、覚えるべき基本操作は5つだけで、あとは作りながら覚えれば十分です。難しい専門用語はできるだけ使わずに進めます。

この記事を書いた人
AKI

全くの未経験から独学とスクールを経てWebデザイナーへ転職。その後Webデザイナー・Webディレクターとして働き、現在は本ブログの運営やWebサイト制作を通じてデザインに携わる。IT業界経験20年以上。
運営者情報とこのサイトが書かないこと

そもそもFigmaとは？なぜ今のWebデザインで標準なのか

Figmaは、Webサイトやアプリのデザインを作るためのツールです。いちばんの特徴は、無料プランがあり、ブラウザだけで動くこと。ソフトをインストールしなくても、アカウントを作ればすぐに使い始められます。WindowsでもMacでも同じように使えるのも、初心者にはありがたいところです。

もう一つの強みが、複数人で同時に編集できる「共同編集」です。これが現場で重宝されていて、今ではWebデザインの実務でもFigmaが標準になりました。未経験から目指すなら、まずFigmaを触れるようにしておくのが、いちばん遠回りのない選択だと感じています。

Photoshop・Illustratorとの違いと使い分け

「PhotoshopやIllustratorも要るの？」とよく聞かれますが、最初はFigma1つで大丈夫です。ざっくりした得意分野はこんなイメージです。

ツール得意なこと未経験の優先度
FigmaWebサイトやアプリのUIデザイン・画面設計◎ まずこれ
Photoshop写真の加工・補正、リッチな画像づくり○ 必要になったら
Illustratorロゴ・イラスト・印刷物などの図形作成△ 後回しでOK

写真をがっつり加工したくなったらPhotoshop、というように、必要になった段階で足していけば十分です。最初から全部そろえようとすると、それだけで力尽きてしまうので、まずはFigmaに絞りましょう。

📌 関連記事：ツール全体の今どきの選び方 → Webデザイナーが2026年に押さえるべきトレンドの追い方【採用担当が見ているポイントも】

Figmaの始め方【無料アカウント作成の手順】

始め方はとてもシンプルです。メールアドレスかGoogleアカウントがあれば、数分で使い始められます。クレジットカードの登録もいりません。

✅ Figmaを始める3ステップ

  1. Figma公式サイトにアクセスして「Get started（無料で始める）」を選ぶ
  2. メールアドレス、またはGoogleアカウントで登録する
  3. 用途を聞かれたら「デザイン」を選び、新しいデザインファイルを開く

画面が英語で表示されて不安になるかもしれませんが、ブラウザの翻訳機能を使えば日本語でも操作できます。慣れてくると英語のままのほうが情報を探しやすくなるので、最初だけ翻訳に頼る、くらいの気持ちで大丈夫です。

これだけ覚えればOK｜Figmaの基本操作5つ

機能はたくさんありますが、最初に覚えるのは次の5つだけで十分です。この5つが分かれば、簡単なバナーやWebページのデザインは作れるようになります。

📝 まず覚えるFigma基本操作5つ
  • フレーム（Frame）：デザインの土台になる枠。スマホ・PCなどサイズを選んで置く
  • 図形（Shape）：四角・丸などを描く。ボタンや背景の素になる
  • テキスト（Text）：文字を入れる。フォント・サイズ・色を調整できる
  • カラー・塗り（Fill）：図形や文字に色をつける。右側のパネルで設定
  • コンポーネント（Component）：繰り返し使う部品を登録して使い回す（慣れてきたら）

操作は基本的に「左のツールバーで道具を選ぶ → 画面に置く → 右のパネルで調整する」の繰り返しです。最初の4つ（フレーム・図形・テキスト・カラー）だけでも、ちゃんとした見た目のものが作れます。コンポーネントは少し進んだ機能なので、慣れてきてからで構いません。

AKIAKI

全部の機能を覚えようとしないのがコツです。実際、現場でも毎日使うのはこの基本操作が中心ですよ。

最初の1枚を作ってみる（簡単なバナーがおすすめ）

操作を覚えたら、いきなり本やチュートリアルを完璧にこなそうとせず、小さな1枚を最後まで作り切ってみるのが上達の近道です。おすすめは、シンプルなバナー（横長の画像広告のようなもの）です。要素が少なく、短時間で1つ完成させられます。

たとえば「セール告知のバナー」なら、フレームでサイズを決めて、背景に色をつけ、図形でボタンを置いて、テキストでキャッチコピーと価格を入れる——これだけで1枚できます。最初は見慣れたバナーを真似して作るのが、いちばん学びになります。完成したら、好きなデザインと見比べて「どこが違うか」を考えると、ぐっと力がつきます。

📌 関連記事：デザインとコーディング、どちらから学ぶ？ → Webデザインの勉強はデザインとコーディングどちらが先？現場10年・採用担当の視点で解説

未経験がFigma学習でつまずかないコツ

最後に、未経験の方がFigmaやWebデザインの学習で挫折しやすいポイントを、正直にお伝えしておきます。先に知っておくだけで、ずいぶんラクになります。

⚠️ こんな進め方はつまずきやすい

  • 機能を全部覚えようとする：使わない機能まで触って、疲れて止まってしまう
  • 完璧な作品を1つ目から狙う：終わらず、完成の達成感を味わえない
  • 作らずに動画を見続ける：見ただけでは手が動かない。少しでも自分で作るのが大事

採用担当として未経験の方を見てきた経験から言うと、伸びる人は「下手でも、まず作って出す」人です。きれいに作れるかより、手を動かし続けられるかのほうが、結果的に大きな差になります。独学で進めるのがしんどくなってきたら、Figmaやデザインを体系立てて教えてくれるスクールを検討するのも一つの手です。自分に合うやり方で、無理なく続けるのがいちばんだと思います。

📌 関連記事：独学かスクールか迷ったら → 【2026年】Webデザインスクール比較おすすめ12選｜転職経験者が徹底評価

よくある質問

Q：Figmaはずっと無料で使えますか？

A：個人の学習や練習なら、無料プランでずっと使えます。作れるファイル数などに制限はありますが、勉強や1〜2枚の制作には十分です。チームで大規模に使うようになったら有料プランを検討する、という流れなので、最初からお金の心配はいりません。

Q：PhotoshopやIllustratorは買わなくて大丈夫ですか？

A：最初はFigmaだけでOKです。写真の加工が必要になったらPhotoshop、というように、やりたいことが出てきた段階で足せば十分です。いきなり全部そろえる必要はありません。

Q：英語が苦手でも使えますか？

A：問題ありません。画面は英語ですが、ブラウザの翻訳機能で日本語表示にできますし、よく使うボタンは限られているのですぐ慣れます。実際、英語が分からなくても使いこなしている人はたくさんいます。

Q：まず何から練習すればいいですか？

A：好きなバナーやWebサイトのワンシーンをFigmaで真似して作るのがおすすめです。お手本があると、サイズ・色・文字の置き方を具体的に学べます。1枚作り切るたびに確実に上達するので、まず小さく1枚を完成させてみてください。

まとめ：5つの操作で、まず1枚作ってみる

AKIAKI

完璧に覚えてから作るのではなく、作りながら覚える。これがFigma上達のいちばんの近道だと思います。

📝 この記事のまとめ
  • Figmaは無料・ブラウザで動く。今のWebデザインの標準ツールで、まずこれを触ればOK
  • 覚える基本操作は5つ（フレーム・図形・テキスト・カラー・コンポーネント）
  • 小さなバナーを1枚作り切るのが上達の近道。完璧より、手を動かし続けること

Figmaは奥が深いツールですが、最初の一歩としては、ここまで押さえておけば十分です。あれこれ調べて動けなくなるより、まずアカウントを作って、四角を1つ置いてみる——そのくらいの軽さで始めて大丈夫です。手を動かしていれば、できることは自然と増えていきます。まず小さく、1枚作ってみてください。

関連記事