Figmaの使い方 超入門｜未経験Webデザイナーが最初にやること【無料で始める】
Figmaがいいって聞くけど、開いても何から触ればいいのか分からない…
無料って本当？お金がかかったり、英語で難しかったりしないかな…
AKIFigmaは無料で始められて、今のWebデザインでは標準のツールです。最初に触る順番を、つまずかないように整理しますね。
Webデザインの勉強を始めると、必ずと言っていいほど名前を聞くのが「Figma（フィグマ）」です。とはいえ、いざ開いてみると画面にいろいろなボタンが並んでいて、何から触ればいいのか分からず固まってしまう——最初はみんなそうなので、安心してください。
この記事では、未経験の方がFigmaを無料で始めて、最初の1枚を作れるようになるまでを、超入門としてやさしく整理します。結論を先に言うと、覚えるべき基本操作は5つだけで、あとは作りながら覚えれば十分です。難しい専門用語はできるだけ使わずに進めます。
全くの未経験から独学とスクールを経てWebデザイナーへ転職。その後Webデザイナー・Webディレクターとして働き、現在は本ブログの運営やWebサイト制作を通じてデザインに携わる。IT業界経験20年以上。
そもそもFigmaとは？なぜ今のWebデザインで標準なのか
Figmaは、Webサイトやアプリのデザインを作るためのツールです。いちばんの特徴は、無料プランがあり、ブラウザだけで動くこと。ソフトをインストールしなくても、アカウントを作ればすぐに使い始められます。WindowsでもMacでも同じように使えるのも、初心者にはありがたいところです。
もう一つの強みが、複数人で同時に編集できる「共同編集」です。これが現場で重宝されていて、今ではWebデザインの実務でもFigmaが標準になりました。未経験から目指すなら、まずFigmaを触れるようにしておくのが、いちばん遠回りのない選択だと感じています。
Photoshop・Illustratorとの違いと使い分け
「PhotoshopやIllustratorも要るの？」とよく聞かれますが、最初はFigma1つで大丈夫です。ざっくりした得意分野はこんなイメージです。
| ツール | 得意なこと | 未経験の優先度 |
|---|---|---|
| Figma | WebサイトやアプリのUIデザイン・画面設計 | ◎ まずこれ |
| Photoshop | 写真の加工・補正、リッチな画像づくり | ○ 必要になったら |
| Illustrator | ロゴ・イラスト・印刷物などの図形作成 | △ 後回しでOK |
写真をがっつり加工したくなったらPhotoshop、というように、必要になった段階で足していけば十分です。最初から全部そろえようとすると、それだけで力尽きてしまうので、まずはFigmaに絞りましょう。
📌 関連記事：ツール全体の今どきの選び方 → Webデザインの最新トレンドと使うツール
Figmaの始め方【無料アカウント作成の手順】
始め方はとてもシンプルです。メールアドレスかGoogleアカウントがあれば、数分で使い始められます。クレジットカードの登録もいりません。
✅ Figmaを始める3ステップ
- Figma公式サイトにアクセスして「Get started（無料で始める）」を選ぶ
- メールアドレス、またはGoogleアカウントで登録する
- 用途を聞かれたら「デザイン」を選び、新しいデザインファイルを開く
画面が英語で表示されて不安になるかもしれませんが、ブラウザの翻訳機能を使えば日本語でも操作できます。慣れてくると英語のままのほうが情報を探しやすくなるので、最初だけ翻訳に頼る、くらいの気持ちで大丈夫です。
これだけ覚えればOK｜Figmaの基本操作5つ
機能はたくさんありますが、最初に覚えるのは次の5つだけで十分です。この5つが分かれば、簡単なバナーやWebページのデザインは作れるようになります。
- フレーム（Frame）：デザインの土台になる枠。スマホ・PCなどサイズを選んで置く
- 図形（Shape）：四角・丸などを描く。ボタンや背景の素になる
- テキスト（Text）：文字を入れる。フォント・サイズ・色を調整できる
- カラー・塗り（Fill）：図形や文字に色をつける。右側のパネルで設定
- コンポーネント（Component）：繰り返し使う部品を登録して使い回す（慣れてきたら）
操作は基本的に「左のツールバーで道具を選ぶ → 画面に置く → 右のパネルで調整する」の繰り返しです。最初の4つ（フレーム・図形・テキスト・カラー）だけでも、ちゃんとした見た目のものが作れます。コンポーネントは少し進んだ機能なので、慣れてきてからで構いません。
AKI全部の機能を覚えようとしないのがコツです。実際、現場でも毎日使うのはこの基本操作が中心ですよ。
最初の1枚を作ってみる（簡単なバナーがおすすめ）
操作を覚えたら、いきなり本やチュートリアルを完璧にこなそうとせず、小さな1枚を最後まで作り切ってみるのが上達の近道です。おすすめは、シンプルなバナー（横長の画像広告のようなもの）です。要素が少なく、短時間で1つ完成させられます。
たとえば「セール告知のバナー」なら、フレームでサイズを決めて、背景に色をつけ、図形でボタンを置いて、テキストでキャッチコピーと価格を入れる——これだけで1枚できます。最初は見慣れたバナーを真似して作るのが、いちばん学びになります。完成したら、好きなデザインと見比べて「どこが違うか」を考えると、ぐっと力がつきます。
📌 関連記事：デザインとコーディング、どちらから学ぶ？ → 未経験はデザインとコーディングどっちから始めるべきか
未経験がFigma学習でつまずかないコツ
最後に、未経験の方がFigmaやWebデザインの学習で挫折しやすいポイントを、正直にお伝えしておきます。先に知っておくだけで、ずいぶんラクになります。
⚠️ こんな進め方はつまずきやすい
- 機能を全部覚えようとする：使わない機能まで触って、疲れて止まってしまう
- 完璧な作品を1つ目から狙う：終わらず、完成の達成感を味わえない
- 作らずに動画を見続ける：見ただけでは手が動かない。少しでも自分で作るのが大事
採用担当として未経験の方を見てきた経験から言うと、伸びる人は「下手でも、まず作って出す」人です。きれいに作れるかより、手を動かし続けられるかのほうが、結果的に大きな差になります。独学で進めるのがしんどくなってきたら、Figmaやデザインを体系立てて教えてくれるスクールを検討するのも一つの手です。自分に合うやり方で、無理なく続けるのがいちばんだと思います。
📌 関連記事：独学かスクールか迷ったら → Webデザインスクール比較【採用担当目線】
よくある質問
Q：Figmaはずっと無料で使えますか？
A：個人の学習や練習なら、無料プランでずっと使えます。作れるファイル数などに制限はありますが、勉強や1〜2枚の制作には十分です。チームで大規模に使うようになったら有料プランを検討する、という流れなので、最初からお金の心配はいりません。
Q：PhotoshopやIllustratorは買わなくて大丈夫ですか？
A：最初はFigmaだけでOKです。写真の加工が必要になったらPhotoshop、というように、やりたいことが出てきた段階で足せば十分です。いきなり全部そろえる必要はありません。
Q：英語が苦手でも使えますか？
A：問題ありません。画面は英語ですが、ブラウザの翻訳機能で日本語表示にできますし、よく使うボタンは限られているのですぐ慣れます。実際、英語が分からなくても使いこなしている人はたくさんいます。
Q：まず何から練習すればいいですか？
A：好きなバナーやWebサイトのワンシーンをFigmaで真似して作るのがおすすめです。お手本があると、サイズ・色・文字の置き方を具体的に学べます。1枚作り切るたびに確実に上達するので、まず小さく1枚を完成させてみてください。
まとめ：5つの操作で、まず1枚作ってみる
AKI完璧に覚えてから作るのではなく、作りながら覚える。これがFigma上達のいちばんの近道だと思います。
- Figmaは無料・ブラウザで動く。今のWebデザインの標準ツールで、まずこれを触ればOK
- 覚える基本操作は5つ（フレーム・図形・テキスト・カラー・コンポーネント）
- 小さなバナーを1枚作り切るのが上達の近道。完璧より、手を動かし続けること
Figmaは奥が深いツールですが、最初の一歩としては、ここまで押さえておけば十分です。あれこれ調べて動けなくなるより、まずアカウントを作って、四角を1つ置いてみる——そのくらいの軽さで始めて大丈夫です。手を動かしていれば、できることは自然と増えていきます。まず小さく、1枚作ってみてください。
関連記事
- Webデザインの最新トレンドと使うツール — ツール全体の今どきの選び方
- 未経験はデザインとコーディングどっちから始めるべきか — 学ぶ順番に迷ったら
- 未経験からのWebデザイン勉強法 — 学習全体の進め方
- 未経験からWebデザイナーになるロードマップ — ゴールまでの全体像