最近デザインツールで
Figmaを使っている話を耳にして興味がある!
でもFigmaって何から手をつければいいのかよく分かんないしAdobeを勉強した方がいいのかも迷ってるんだよね…
FigmaをWebデザインで使うメリットって本当にあるの?
Figmaは流行ってるけどAdobeが使えないとやっぱり駄目なんじゃないの?
Figmaの勉強をしたいけど何から手をつければいいか分からない
Figmaについて、このような悩み・疑問はありませんか。Webデザインで使われるデザインツールは沢山ありますよね。例えばAdobeのPhotoshop、Illustraotor、XDなどが有名ですが最近ではFigmaを使っている人も増えてきました。他にもCanvaやSketchなど沢山のデザインツールがあります。
デザイン初学者の方はこれだけデザインツールがあると何から学べばいいのか?どう学べばいいのか?勉強したデザインツールを本当に仕事に活用できるのか?悩んでしまうのも無理はありません。そこで本記事では
- Figmaを使うメリット
- Figmaを具体的に勉強する方法
- Figmaを実際の案件で使う際の具体的なノウハウ
この3点について解説していきます。
最後まで読めばFigmaを使うメリット・勉強の仕方・具体的な教材まで分ります。
Figmaは世界で注目されているデザインツール
「Figmaが良い!」ってデザインしている友人から聞いたんだけどFigma以外にもAdobeのPhotoshopとかillustratorとかデザインツールって沢山あるよね?
デザインツールは沢山あるし、それぞれ得意、不得意はあるんだけどFigmaは今、デザインツールで勢いのある注目ツールだよ!

そうだね!今、Figmaはすごく注目されているデザインツールなんだ✨
特にUI/UXデザイナーやフリーランスのWebデザイナーが積極的に使うことも増えてきたよ。
たしかに知り合いの企業のUIデザイナーさんやフリーランスのWebデザイナーさんがFigmaを使っている話をよく聞くよ!だから、こしばもFigmaを使えないかなって思ったんだ。
デイトラのデザインコースの船越良太さんはFigma使ってみて「これはやばい!」って思ってSketchからFigmaに乗りかえたんだって。今はFigmaを積極的に推しているよ!
Figmaをここまで推すのにはそれなりの理由があるんだよ。
もちろんAdobeのPhotoshopやIllustraotr、XDなども素晴らしいデザインツールだけど新しく出てきたFigmaにはFigmaの良さがあるんだ✨
目次
WebデザイナーがFigmaを活用する6つのメリット
Figmaのメリットは沢山あるんだけど6つにまとめてみたよ✨
- 学習コストが低い
- プラグインが豊富
- 無料ですぐに使える
- 複数人で操作できてチーム制作・共有にも便利
- コーダー・エンジニアにも使いやすい
- 軽い
メリット1:学習コストが低い
一つ目のFigmaを使うメリットは学習コストが低いこと!
Figmaは直感的に操作ができるから少し使えば基本的なことなら、すぐに使えるようになるんだ!
操作が直感的なのは良いね!
PhotoshopやIllustratorも一応、もってるんだけど機能が多すぎて何から手をつければ良いのか全然分からなくて結局、使っていないんだよね。
たしかにPhotoshopやIllustratorは機能が多くて出来ることは沢山あるよね。
でも多機能すぎてツールの操作方法を覚えるだけでも大変だと思うよ。
多くのWebデザインスクールや講座ではPhotoshopやIllustratorを勉強するんだけど、初学者だとツールの使い方を覚えるだけで精一杯でデザインそのものを全然、勉強できなかったという声は現実問題、多いかもね。
操作方法が直感的で、すぐに身につけられるのは嬉しいね!
複雑なことをしようとしたり100%使いこなそうとしたりするとFigmaも奥は深いと思うけど、直感的にできる範囲内でもかなり色々なことができるのがFigmaの良いところだね!
メリット2:プラグインが豊富
デザインツールでプラグイン?何か機能を追加できるの?
Figmaはプラグインが豊富だから色んなことができるんだ!
百聞は一見にしかず。下の画像は全部プラグインの機能でつくったものだよ!

使ってみたプラグイン一覧
- Unsplash(画像挿入)
- Remove BG(背景切り取り)
- Filter(フィルター)
- Isometric(アイソメトリック)
- Map Maker(地図作成)
Figmaは専用のプラグインを使えば背景透過もフィルターもアイソメトリックも簡単に作れるんだ!他にも地図や写真の画像を読みこむこともできるよ。しかも、これはFigmaのプラグインの一部にすぎないんだ。
プラグインで沢山の機能を拡張できるんだね。すごい!
メリット3:無料ですぐに使える
Figmaって凄いツールなんだね!でも利用料はお高いんでしょ?
Figmaって無料で使えるの?Adobeは利用料がかかるからデザインを本格的にはじめるかどうか悩んでいる人には負担だけど、無料だとお財布にもやさしいね!
でも無料版だと機能制限とかあって使いづらいってことない?
メリット4:複数人で操作できてチーム制作・共有にも便利
Figmaは複数人で同時に編集やコメントができるのも便利だよ。共同編集機能はAdobeのXDにはあるけどPhotoshopやIllustratorにはないって感じだね。
デザインデータを複数人で編集したりコメントできたりしたら便利だね。
Webディレクターさんとデザイナーさんが相談しながら一緒にデザインを作ることもできるよ。アプリ開発の会社でもFigmaで共同作業しているところは多いみたいだね。
Figmaは無料版でも個人でつくったデザインデータをクライアントさんにもワンクリックで共有できるから営業資料としても便利に使えるよ。

ワンクリックでポートフォリオを共有してお客さんに見せられるのも使い勝手良さそう!
メリット5:コーダー・エンジニアにも使いやすい
Figmaはコーダーさんやエンジニアさんにも使いやすいっていう評判だよ!
どうしてFigmaはコーダーさんやエンジニアさんにも使いやすいの?
Figmaだとブラウザで開けるからPhotoshopとかIllustratorみたいにソフトをいちいち起動する必要がないんだよね。あとマージンやパディングなどの値がFigmaだと取りやすいんだよね。このメリットはXDでも同じことが言えるけどね。
たしかにコーダーの視点だと値がとりやすいFigmaやXDのデザインカンプの方が仕事しやすいっていう意見もよく聞くね。
メリット6:軽い
あとFigmaのメリットはなんといっても軽いことだね!
PhotoshopやIllustratorって高機能なんだけどPCの性能によってはは動きが重いんだよね。
サクサクと動かせるかどうかはデザインをする上での時給単価などにも影響してくるけどFigmaは本当に軽いからストレスなく使えるのも良いところだね。
Figmaを独学で勉強する流れ
こしばFigmaが便利なのは分かったから、どうやって勉強するのか知りたい!
Figmaは直感的に操作できるから、まずは導入してとにかく手を動かして実践してみると自然に使えるようになるよ!
Figmaを導入してとにかく触ってみる

Figmaの導入はとても簡単。Emailを用意してパスワードを登録してアカウントを作るだけ!あとは指示通りに進めていけば、すぐに使えるようになるよ。
あとはFigmaを適当に触ってみて色々、試してみると良いよ。
操作方法がよく分からなかったらググって解決!直感的に使えるから意外となんとかなるよ。
名刺やLP・コーポレートサイトをトレース(模写)する
操作に慣れてきたら名刺やLP、コーポレートサイトの模写をひたすらやってみると良いよ。デザイン力も身につくしFigmaの操作にも慣れるから沢山、模写をすると良いよ。
GoFullPageっていうGoogleChromeの拡張機能を使うと
Webサイト全体のスクリーンショットがとれるんだよ。スクリーンショットを
横に並べたり半透明にして重ねたりして同じようにデザインを再現していくんだ。
(方法1)模写するサイトのスクリーンショットを横に並べて見ながら真似してみる

(方法2)模写するサイトを半透明にして下敷きにして上からなぞってみる(こっちの方が最初は簡単!)

お手本を見ながら同じようにデザインしていけば良いんだね。
でも画像の素材とかはどうするの?

素材もダウンロードできちゃうんだ。
このダウンロードした素材を配置したり図形や文字をうまく組み合わせたりしてデザインしていけば良いんだね。
素材はダウンロードしたものを使って文字のサイズや図形、余白などに気をつけながらデザインを再現する練習を何度もしてみると良いよ!
ちなみにデイトラのWebデザインコースでは実際に模写をしている動画を丸ごと撮影して載せているから模写の具体的なやり方も分かりやすいと思います✨
▶︎今すぐデイトラWebデザインコースに申し込む!
模写はデザインの練習には有効ですが模写したものをポートフォリオとして公開すると著作権などの問題が出てくるので練習しても基本的には公開しない方が良いでしょう。デイトラの課題はポートフォリオとして公開OKです。
Figmaを勉強できる参考教材(書籍で学習するのは難しい)
見様見真似でググりながらFigmaの操作に慣れようって話だったけどチュートリアルで一通りちゃんと勉強したいよ。参考書籍とかないの?
残念ながらPhotoshopやIllustrator、XDの書籍は結構あるんだけどFigmaを勉強できる日本語の書籍って全然ないんだよね。
でもFigmaを勉強できる教材はあるよ!
Figma公式


Adobeも
公式チュートリアルが実は充実しているから高価なスクールに通う前にまずは公式を確認してみることをおすすめするよ。
無料で出来ることから試してみてピンときてから有料の書籍やスクールに手を出しても遅くはないよ。
Udemy

英語だけじゃなく日本語で勉強できるFigma講座もあるんだね!これは良さそう!
Udemyの講座はセールのときに安く買えることが多いから、セールになったら興味のある講座を買ってみるのも良いんじゃないかな!
YouTube
YouTubeでFigmaの解説をしている人も最近、増えてきているみたいだね。
海外の方だけでなく日本人のYouTuberのデザイナーの方達もFigmaの使い方やTipsの動画をあげてくれているよ。YouTubeは体系的ではないかもしれないけど参考になる動画もたくさんあるから見てみると良いんじゃないかな!
YouTubeなら無料で見れる勉強のしはじめに良いかもしれないね!
TipsをSNSやnoteで地道に集める
FigmaのTips をSNSやnoteで地道に集めてみるのも勉強になるよ。
プロのデザイナーさんがFigmaのTipsを紹介しているから地道に集めてみるのもおすすめだよ!
ある程度、基礎が身についたら細かいテクニックを勉強してみるのも良さそうだね。
最初からTipsばかり集めても知識が断片的になるから、ある程度、慣れてきてからSNSやnoteで勉強するのもいいんじゃないかな?
PR:デイトラWebデザインコースはFigmaで仕事ができるところまで勉強します!

▶︎今すぐデイトラWebデザインコースに申し込む!
デイトラでもFigmaをメインツールとして使いながらWebデザインやUIデザインを学べるオンラインスクールを開講しています!
Figma公式やUdemy、YouTubeでもFigmaの操作方法は十分、勉強できるよね。デイトラのWebデザインコースを受講するメリットってある?
Figma公式、Udemy、YouTube、それぞれ素晴らしいコンテンツでFigmaの操作方法を学ぶには十分だよ。
ただデイトラのデザインコースはFigmaの操作方法を学ぶ以上にFigmaを実践的に仕事で活用できることにこだわっているんだ!
Figmaの操作方法を動画で解説(メンターに質問もできる!)
デイトラのWebデザインコースではFigmaの操作方法を
動画で詳しく解説しているよ。もちろん日本語だよ!
Figmaの解説動画は英語が多いけどUdemyやYouTubeに日本語の解説動画もあるよね?
デイトラの特徴は動画教材だけでなくオンラインでメンターに質問し放題なところだよ。
Figmaの操作で分からないこともオンラインで気軽に質問できるから詰まっても安心!

あとFigmaの操作方法も勉強するけど、それ以上にWebデザインの考え方も並行して勉強できるように設計されているんだ。
だからデイトラを修了する頃にはFigmaの使い方だけでなくデザインの基本まで身についているはずだよ✨
ツールの使い方だけじゃなくてデザインもあわせて勉強できるのはいいね!
初級編:Figmaでバナー・LPのデザイン
デイトラのWebデザインコースってどんな流れで勉強するの?
初級編・中級編・上級編のECとアプリデザインに分かれているよ。
初級から順番に見てみようか✨

(デイトラWebデザインコースより)
初級編では動画を見ながら名刺、バナー、LPのトレースをして、実際にオリジナルのデザインを作るところまで手を動かして勉強できるよ✨
中級編:Figmaでコーポレートサイトのデザイン

中級編ではコーポレートサイトのデザインを勉強します✨
複数ページのコーポレートサイトは単価の高い案件も多いから、デザインコースを受講したら中級編まではやってみることをおすすめするよ!
コーポレートサイトのデザインまで出来れば仕事の幅も広がりそうだね。
中級編まで終わったら実際にデザイナーとして営業しても良いようにカリキュラムが組まれているよ。
上級編:ECデザイン

上級編ではデザインの案件でも今、熱いECサイトのデザインとアプリのデザインをFigmaで実際に作っていくよ!
ECサイトのデザインができる人って少ないからね。
特に
Shopifyについて理解があるWebデザイナーは不足しているからShopifyが分かるWebデザイナーとして独立するのも将来性あると思うよ!
ShopifyとECデザインを勉強するのも良さそうだね!
ただデザインコースはShopifyに限らずECサイト全般のデザインを勉強するよ。Shopifyデザインに特化して勉強するなら
Shopifyコースでも勉強するのがおすすめだよ!
上級編:アプリデザイン(UIデザイン)

アプリのUIデザインもおすすめだよ!特にFigmaはアプリのUIデザインに適したデザインツールだから、Figmaを勉強するならUIデザインにも挑戦してみると良いよ!
FigmaってアプリのUIデザインに適しているんだね。
アプリのUIデザインができる人って人材市場に輩出される仕組みが全然できてないから、アプリのデザイナーの報酬もかなり良い傾向にあるね。
実はUIデザイナーも最終的に視野に入れられるようにデイトラではFigmaを推しているんだよ。
Figmaに慣れてアプリのデザイナーを目指してみるのも面白そうだね!
プロのデザインレビューも受けられる

デイトラのWebデザインコースはプロのデザイナーからレビューも受けられるんだよ!
一人でデザインの勉強をしていると自分のデザインのどこが改善できるのか分からないからレビューあるのはいいね!
デザインレビューはUdemyやYouTubeなどの動画にはないポイントだよ✨
実案件で困らないところまで営業方法・要件定義まで学べる
デイトラのWebデザインコースは勉強だけで終わらず仕事につなげるところまでをカリキュラムにしているよ。
Figmaの使い方だけ覚えても仕事にならなかったら残念だもんね。
具体的に何を教えてくれるの?

具体的には仕事の探し方、営業する際に役立つスライドの作り方、クライアントとのコミュニケーションの取り方などを詳しく勉強するよ。
デザインツールの使い方やデザインを勉強できる教材は沢山あるけど実際にデザインを仕事にする具体的な方法を教えてくれるところは少ないからありがたいね!
営業方法に関しては下の記事に詳しく書いてあるよ。
営業にも興味があるなら参考にしてみてね。
デザインコンテンストでポートフォリオを肥やす
[youtube https://www.youtube.com/watch?v=DxGifqiwy-A&w=956&h=538]
もちろん参加するといいこと沢山あるよ!
例えば入賞したら賞金もあるしデザイナーとして注目してもらえるきっかけにもなるよ✨
賞金がもらえてデザイナーとして注目されたら最高だね!
そうだね。
でもデザインコンテストで本当に大事なのはポートフォリオとして載せられる作品をつくることだよ。
入賞してもしなくても参加することに意義があるんだよ✨
Figmaで仕事はできる?Adobeのツールも勉強しないと駄目?
こしばFigmaを使っていこうと思うんだけど本当にAdobeのツールは勉強しなくて大丈夫?
Web制作会社の中にはAdobeを使うことが必須っていう会社もありそうだよ。
みんな、そこは不安に思うところだから詳しく解説するね!
Figmaを提案してAdobeからFigmaに変えてもらえることも多い
まずFigmaを使うメリットをクライアントさんに提案してみると意外にひっくり返ることもあるんだよ。実際に船越さんは案件でFigmaのメリットを伝えてAdobeからデザインツールをFigmaに替えてもらうことも多いんだって。
特に理由もなくPhotoshopやIllustratorで制作をしている会社も多いからね。
意外とFigmaを「使ってみようか?」っていう話にもなることもあるよ✨
言ってみるものだね!
Figmaを使うメリットをしっかりプレゼンできるようになるのもデザイナーとしての技術の一つかもしれないね。
Web制作会社ではAdobeのスキルを求められることはある
Web制作会社の中には「絶対、Adobeを使う!」っていうところもあるよね。
制作会社からいただくデザイン案件だと困ることない?
そうだね。エンドクライアントやWebアプリを開発している企業だとFigmaを提案したら通りやすいかもしれないけど、Web制作会社で制作フローが固まっているところだと難しいこともあるかもね。
ただAdobeを使うところと仕事をしなくてもデザイン案件はあるし、Figmaを勉強した後ならAdobeのデザインツールもFigmaと操作方法は似てるから習得はしやすいと思うよ。
最初はFigmaを勉強して、どうしても必要になったらAdobeのツールも使ってみる感じにしようかな。
補足しておくとコーダーだとPhotoshop、Illustrator、XD、Figmaと色んなデザインカンプを渡されることになるから最低限、Adobeも契約しないと現実的に仕事しづらいかな。
Web制作コースでもPhotoshopのデザインカンプをコーディングする課題が要望もあって追加されたしね。
画像加工など細かいところでPhotoshopを使えると便利

Adobeのツールをデイトラでは本当に全く勉強しないの?
Photoshopは少しカリキュラムの中に含まれているよ。
Figmaでは細かい画像加工が難しい面はあるからPhotoshopで最低限、知っておいた方が良い画像加工に関してはデイトラでも動画コンテンツで解説しているんだ。
あと豆知識なんだけどFigmaで作ったデータをPhotoshopのデータに変換できる
photopeaっていうサイトもあるから
psd(Photoshopのデータ)で納品することもできるよ。
Figmaで作ったデザインをPhotoshopのデータに変換することもできるんだね。
Figmaで作ってもいいけどPhotoshopのデータも欲しいっていうクライアントさんにはpsdファイルもセットで納品すると良いんじゃないかな!
PR:デイトラデザインコースでも独立サポート開始
デイトラのWebデザインコース中級編までを終えた人向けにデザイナー向け独立サポートコースもはじめました!
デイトラのWebデザインコースでも営業の方法は教えてるんだけど、それでも初案件ってやっぱり不安だよね?
デザイナー向けの独立サポートでは実案件でも使える営業資料、プロのメンターサービス、定期的なオンラインミーティングの開催で駆け出しのデザイナーさんを全力でバックアップする体制を整えているんだ!
それは頼もしいね。
独立サポートに参加するにはどうすればいいの?
デイトラのWebデザインコースの受講生の中から定期的に募集をかけているから、中級編まで終わらせてポートフォリオを用意しておけば応募できるよ!
こしばもデザイナー向けの独立サポートに応募してみようかな!
Figmaをメインツールにしてプロのデザイナーとして独立できるところまで勉強できるサービスだから検討してみてね✨
まとめ
Figmaを勉強する方法について解説しました。Figmaは世界で最も支持された近年、勢いのあるデザインツールです。海外ツールで日本語で体系的に学べる書籍はありませんが独学で勉強する方法もあります。Figmaのメリット・独学する方法についてもう一度、整理してみましょう。
Figmaのメリット
Figmaを使う6つのメリットです!
無料ではじめられて機能も豊富!直感的に操作できるからデザインをはじめたばかりの人にもおすすめ!
- 学習コストが低い
- プラグインが豊富
- 無料ですぐに使える
- 複数人で操作できてチーム制作・共有にも便利
- コーダー・エンジニアにも使いやすい
- 軽い
Figmaを勉強する流れ
Figmaを独学で勉強する流れです!
Figmaで沢山、良いデザインをトレースしていくと自然にFigmaの操作方法も身につきます!
- Figmaを導入する
- 実際に触ってみて操作方法に慣れる
- バナー・LP・コーポレートサイトのトレースをしてみる
Figmaで参考になる教材
Figmaで参考になる教材はこちらです!
最近は日本語のFigmaの情報や教材が増えてきました!
- Figma公式
- Udemy
- YouTube
- SNS/noteなどでTipsを拾う
【PR】デイトラのWebデザインコースはFigmaを使って仕事ができるところまで学びます
デイトラのWebデザインコースでは、Figmaの学習だけでは終わりません。現役のデザイン会社社長の船越良太さんが動画で営業資料の作成方法から実際に案件を進める際の注意事項、契約書関係、具体的な営業方法について詳しく解説しています。Figmaの操作方法だけでなくデザイナーとして仕事ができることに重点をおいたカリキュラムになっています。Figmaを使って本気でデザイナーとして活動したい方におすすめです!

▶︎今すぐデイトラWebデザインコースに申し込む!
デイトラのWebデザインコースはFigmaの操作方法だけではなくデザインの原理・原則、営業法まで学べるカリキュラムになっています✨