最近デザインツールでFigmaを使っている話を耳にして興味がある！
でもFigmaって何から手をつければいいのかよく分かんないしAdobeを勉強した方がいいのかも迷ってるんだよね…

Figmaについて、このような悩み・疑問はありませんか。Webデザインで使われるデザインツールは沢山ありますよね。例えばAdobeのPhotoshop、Illustraotor、XDなどが有名ですが最近ではFigmaを使っている人も増えてきました。他にもCanvaやSketchなど沢山のデザインツールがあります。

デザイン初学者の方はこれだけデザインツールがあると何から学べばいいのか？どう学べばいいのか？勉強したデザインツールを本当に仕事に活用できるのか？悩んでしまうのも無理はありません。そこで本記事では

• Figmaを使うメリット
• Figmaを具体的に勉強する方法
• Figmaを実際の案件で使う際の具体的なノウハウ

この３点について解説していきます。
最後まで読めばFigmaを使うメリット・勉強の仕方・具体的な教材まで分ります。

Figmaは世界で注目されているデザインツール

「Figmaが良い！」ってデザインしている友人から聞いたんだけどFigma以外にもAdobeのPhotoshopとかillustratorとかデザインツールって沢山あるよね？

デザインツールは沢山あるし、それぞれ得意、不得意はあるんだけどFigmaは今、デザインツールで勢いのある注目ツールだよ！

Figmaが最近、急に伸びているね…!!

そうだね！今、Figmaはすごく注目されているデザインツールなんだ✨
特にUI/UXデザイナーやフリーランスのWebデザイナーが積極的に使うことも増えてきたよ。

たしかに知り合いの企業のUIデザイナーさんやフリーランスのWebデザイナーさんがFigmaを使っている話をよく聞くよ！だから、こしばもFigmaを使えないかなって思ったんだ。

デイトラのデザインコースの船越良太さんはFigma使ってみて「これはやばい！」って思ってSketchからFigmaに乗りかえたんだって。今はFigmaを積極的に推しているよ！

結局Figmaが最強なんです😁

webデザインやUIデザインするのにAdobe製品を使うことが少数派な世界です🎨
いろんなマーケ会社や開発会社にこれを見せて、如何にフォトショやイラレを使ってデザインすることが時代遅れか力説したい#デイトラhttps://t.co/zUtOXOBfhb pic.twitter.com/8npNi60Npw

— 船越@デイトラ運営🍐 (@ryota_funakoshi) February 24, 2021

ここまでFigmaを推して大丈夫なの？？

Figmaをここまで推すのにはそれなりの理由があるんだよ。
もちろんAdobeのPhotoshopやIllustraotr、XDなども素晴らしいデザインツールだけど新しく出てきたFigmaにはFigmaの良さがあるんだ✨

WebデザイナーがFigmaを活用する６つのメリット

Figmaってそもそもどんなメリットがあるの？

Figmaのメリットは沢山あるんだけど6つにまとめてみたよ✨

1. 学習コストが低い
2. プラグインが豊富
3. 無料ですぐに使える
4. 複数人で操作できてチーム制作・共有にも便利
5. コーダー・エンジニアにも使いやすい
6. 軽い

メリット１：学習コストが低い

一つ目のFigmaを使うメリットは学習コストが低いこと！
Figmaは直感的に操作ができるから少し使えば基本的なことなら、すぐに使えるようになるんだ！

操作が直感的なのは良いね！
PhotoshopやIllustratorも一応、もってるんだけど機能が多すぎて何から手をつければ良いのか全然分からなくて結局、使っていないんだよね。

たしかにPhotoshopやIllustratorは機能が多くて出来ることは沢山あるよね。
でも多機能すぎてツールの操作方法を覚えるだけでも大変だと思うよ。

多くのWebデザインスクールや講座ではPhotoshopやIllustratorを勉強するんだけど、初学者だとツールの使い方を覚えるだけで精一杯でデザインそのものを全然、勉強できなかったという声は現実問題、多いかもね。

操作方法が直感的で、すぐに身につけられるのは嬉しいね！

複雑なことをしようとしたり100%使いこなそうとしたりするとFigmaも奥は深いと思うけど、直感的にできる範囲内でもかなり色々なことができるのがFigmaの良いところだね！

メリット２：プラグインが豊富

Figmaは豊富なプラグインも魅力の一つだよ。

デザインツールでプラグイン？何か機能を追加できるの？

Figmaはプラグインが豊富だから色んなことができるんだ！
百聞は一見にしかず。下の画像は全部プラグインの機能でつくったものだよ！

使ってみたプラグイン一覧

• Unsplash（画像挿入）
• Remove BG（背景切り取り）
• Filter（フィルター）
• Isometric（アイソメトリック）
• Map Maker（地図作成）

これ全部、Figmaのプラグインでつくったの？

Figmaは専用のプラグインを使えば背景透過もフィルターもアイソメトリックも簡単に作れるんだ！他にも地図や写真の画像を読みこむこともできるよ。しかも、これはFigmaのプラグインの一部にすぎないんだ。

プラグインで沢山の機能を拡張できるんだね。すごい！

メリット３：無料ですぐに使える

Figmaって凄いツールなんだね！でも利用料はお高いんでしょ？

実はStarter版なら無料で使えるんだよ✨

Figmaって無料で使えるの？Adobeは利用料がかかるからデザインを本格的にはじめるかどうか悩んでいる人には負担だけど、無料だとお財布にもやさしいね！

でも無料版だと機能制限とかあって使いづらいってことない？

Figmaはひとりでデザインツールとして使う分には無料で何でもできるよ。ただ複数人でFigmaで同時に同じデザインデータを編集したい場合は有料のProfessional版やOrganization版にアップグレードする必要があるよ。

個人で使うなら無料でも機能制限なく使えるんだね！

メリット４：複数人で操作できてチーム制作・共有にも便利

Figmaは複数人で同時に編集やコメントができるのも便利だよ。共同編集機能はAdobeのXDにはあるけどPhotoshopやIllustratorにはないって感じだね。

デザインデータを複数人で編集したりコメントできたりしたら便利だね。

Webディレクターさんとデザイナーさんが相談しながら一緒にデザインを作ることもできるよ。アプリ開発の会社でもFigmaで共同作業しているところは多いみたいだね。

Figmaは無料版でも個人でつくったデザインデータをクライアントさんにもワンクリックで共有できるから営業資料としても便利に使えるよ。

ワンクリックでポートフォリオを共有してお客さんに見せられるのも使い勝手良さそう！

メリット５：コーダー・エンジニアにも使いやすい

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の操作にも慣れるから沢山、模写をすると良いよ。

Figmaで模写ってどうやってやるの？

GoFullPageっていうGoogleChromeの拡張機能を使うとWebサイト全体のスクリーンショットがとれるんだよ。スクリーンショットを横に並べたり半透明にして重ねたりして同じようにデザインを再現していくんだ。

（方法１）模写するサイトのスクリーンショットを横に並べて見ながら真似してみる

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

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

あとImage DownloaderっていうGoogleChrome拡張機能を使えば模写するサイトの画像データもまとめてダウンロードできるよ。

素材もダウンロードできちゃうんだ。
このダウンロードした素材を配置したり図形や文字をうまく組み合わせたりしてデザインしていけば良いんだね。

素材はダウンロードしたものを使って文字のサイズや図形、余白などに気をつけながらデザインを再現する練習を何度もしてみると良いよ！

ちなみにデイトラのWebデザインコースでは実際に模写をしている動画を丸ごと撮影して載せているから模写の具体的なやり方も分かりやすいと思います✨

Figmaを勉強できる参考教材（書籍で学習するのは難しい）

見様見真似でググりながらFigmaの操作に慣れようって話だったけどチュートリアルで一通りちゃんと勉強したいよ。参考書籍とかないの？

残念ながらPhotoshopやIllustrator、XDの書籍は結構あるんだけどFigmaを勉強できる日本語の書籍って全然ないんだよね。
でもFigmaを勉強できる教材はあるよ！

Figma公式

Figmaの公式サイトが実は充実しているよ！説明は全部、英語だけどね！

こしば英語のチュートリアルなんて読めないよ。

それならFigmaのYouTube公式チャンネルもおすすめだよ。
こちらも英語だけど動画だから、とりあえず見様見真似でFigmaの操作をしてみると良いよ！

動画なら、こしばでも何とか分かるかも！

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

Udemy

Udemyもおすすめだよ。特に英語の教材が多いかな。
最近は日本語でFigmaを勉強できるUI/UXデザインの講座やWebデザインの講座も出てきたから合いそうな講座を受講してみるのも良いと思うよ！

英語だけじゃなく日本語で勉強できるFigma講座もあるんだね！これは良さそう！

Udemyの講座はセールのときに安く買えることが多いから、セールになったら興味のある講座を買ってみるのも良いんじゃないかな！

YouTube

YouTubeでFigmaの動画を見てみるのもおすすめだよ。

YouTubeでFigmaの解説をしている人も最近、増えてきているみたいだね。

海外の方だけでなく日本人のYouTuberのデザイナーの方達もFigmaの使い方やTipsの動画をあげてくれているよ。YouTubeは体系的ではないかもしれないけど参考になる動画もたくさんあるから見てみると良いんじゃないかな！

YouTubeなら無料で見れる勉強のしはじめに良いかもしれないね！

TipsをSNSやnoteで地道に集める

FigmaのTips をSNSやnoteで地道に集めてみるのも勉強になるよ。
プロのデザイナーさんがFigmaのTipsを紹介しているから地道に集めてみるのもおすすめだよ！

ある程度、基礎が身についたら細かいテクニックを勉強してみるのも良さそうだね。

最初からTipsばかり集めても知識が断片的になるから、ある程度、慣れてきてからSNSやnoteで勉強するのもいいんじゃないかな？

PR：デイトラWebデザインコースはFigmaで仕事ができるところまで勉強します！

デイトラでも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サイトのデザインってそんなに熱い分野なの？

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の使い方だけ覚えても仕事にならなかったら残念だもんね。
具体的に何を教えてくれるの？

具体的には仕事の探し方、営業する際に役立つスライドの作り方、クライアントとのコミュニケーションの取り方などを詳しく勉強するよ。

デザインツールの使い方やデザインを勉強できる教材は沢山あるけど実際にデザインを仕事にする具体的な方法を教えてくれるところは少ないからありがたいね！

営業方法に関しては下の記事に詳しく書いてあるよ。
営業にも興味があるなら参考にしてみてね。

デザインコンテンストでポートフォリオを肥やす

デイトラではデザインコンテストも開催しています！

コンテストに参加するといいことあるの？

もちろん参加するといいこと沢山あるよ！
例えば入賞したら賞金もあるしデザイナーとして注目してもらえるきっかけにもなるよ✨

賞金がもらえてデザイナーとして注目されたら最高だね！

そうだね。
でもデザインコンテストで本当に大事なのはポートフォリオとして載せられる作品をつくることだよ。
入賞してもしなくても参加することに意義があるんだよ✨

こしばもデザインコンテストに挑戦してみたいよ！

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つのメリットです！
無料ではじめられて機能も豊富！直感的に操作できるからデザインをはじめたばかりの人にもおすすめ！

1. 学習コストが低い
2. プラグインが豊富
3. 無料ですぐに使える
4. 複数人で操作できてチーム制作・共有にも便利
5. コーダー・エンジニアにも使いやすい
6. 軽い

Figmaを勉強する流れ

Figmaを独学で勉強する流れです！
Figmaで沢山、良いデザインをトレースしていくと自然にFigmaの操作方法も身につきます！

1. Figmaを導入する
2. 実際に触ってみて操作方法に慣れる
3. バナー・LP・コーポレートサイトのトレースをしてみる

Figmaで参考になる教材

Figmaで参考になる教材はこちらです！
最近は日本語のFigmaの情報や教材が増えてきました！

• Figma公式
• Udemy
• YouTube
• SNS/noteなどでTipsを拾う

【PR】デイトラのWebデザインコースはFigmaを使って仕事ができるところまで学びます

デイトラのWebデザインコースでは、Figmaの学習だけでは終わりません。現役のデザイン会社社長の船越良太さんが動画で営業資料の作成方法から実際に案件を進める際の注意事項、契約書関係、具体的な営業方法について詳しく解説しています。Figmaの操作方法だけでなくデザイナーとして仕事ができることに重点をおいたカリキュラムになっています。Figmaを使って本気でデザイナーとして活動したい方におすすめです！

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