転職支援コース卒業生フリーランスの基礎知識フリーランスの基礎を知るフリーランスになる前にすべきことフリーランスの税金について知るフリーランスのリアルを知るWeb制作WebデザインWebアプリ開発ShopifyWebマーケティングお問い合わせするFigmaを独学でも勉強できる!Webデザイン実案件でFigmaを活用するノウハウも解説2021.09.06WebデザインHOMEWebデザインFigmaを独学でも勉強できる!Webデザイン実案件でFigmaを活用するノウハウも解説こしば最近デザインツールでFigmaを使っている話を耳にして興味がある!でもFigmaって何から手をつければいいのかよく分かんないしAdobeを勉強した方がいいのかも迷ってるんだよね...FigmaをWebデザインで使うメリットって本当にあるの?Figmaは流行ってるけどAdobeが使えないとやっぱり駄目なんじゃないの?Figmaの勉強をしたいけど何から手をつければいいか分からないFigmaについて、このような悩み・疑問はありませんか。Webデザインで使われるデザインツールは沢山ありますよね。AdobeのPhotoshop、Illustraotor、XDなどが有名ですが最近ではFigmaを使っている人も増えてきました。他にもCanvaやSketchなど沢山のデザインツールがあります。デザイン初学者の方はこれだけデザインツールがあると何から学べばいいのか?どう学べばいいのか?勉強したデザインツールを本当に仕事に活用できるのか?悩んでしまうのも無理はありません。そこで本記事ではFigmaを使うメリットFigmaを具体的に勉強する方法Figmaを実際の案件で使う際の具体的なノウハウこの3点について解説していきます。最後まで読めばFigmaを使うメリット・勉強の仕方・具体的な教材まで分ります。UI/UXデザイナーやフリーランスのWebデザイナーが積極的に使うことも増えてきたよ。こしばたしかに知り合いの企業のUIデザイナーさんやフリーランスのWebデザイナーさんがFigmaを使っている話をよく聞くよ!だから、こしばもFigmaを使えないかなって思ったんだ。デイトラちゃんデイトラのデザインコースの船越良太さんはFigma使ってみて「これはやばい!」って思ってSketchからFigmaに乗りかえたんだって。2021こしばここまでFigmaを推して大丈夫なの??デイトラちゃんFigmaをここまで推すのにはそれなりの理由があるんだよ。無料ですぐに使える複数人で操作できてチーム制作・共有にも便利コーダー・エンジニアにも使いやすい軽いメリット1:学習コストが低いデイトラちゃん一つ目のFigmaを使うメリットは学習コストが低いこと!Figmaは直感的に操作ができるから少し使えば基本的なことなら、すぐに使えるようになるんだ!こしば操作が直感的なのは良いね!PhotoshopやIllustratorも一応、もってるんだけど機能が多すぎて何から手をつければ良いのか全然分からなくて結局、使っていないんだよね。デイトラちゃんたしかにPhotoshopやIllustratorは機能が多くて出来ることは沢山あるよね。多機能すぎてツールの操作方法を覚えるだけでも大変だと思うよ。デイトラちゃん多くのWebデザインスクールや講座ではPhotoshopやIllustratorを勉強するんだけど、初学者だとツールの使い方を覚えるだけで精一杯でデザインそのものを全然、勉強できなかったという声は現実問題、多いかもね。こしば操作方法が直感的で、すぐに身につけられるのは嬉しいね!デイトラちゃん複雑なことをしようとしたり100%使いこなそうとしたりするとFigmaも奥は深いと思うけど、直感的にできる範囲内でもかなり色々なことができるのがFigmaの良いところだね!メリット2:プラグインが豊富デイトラちゃんFigmaは豊富なプラグインも魅力の一つだよ。こしばデザインツールでプラグイン?何か機能を追加できるの?デイトラちゃんFigmaはプラグインが豊富だから色んなことができるんだ!百聞は一見にしかず。Maker(地図作成)こしばこれ全部、Figmaのプラグインでつくったの?デイトラちゃんFigmaは専用のプラグインを使えば背景透過もフィルターもアイソメトリックも簡単に作れるんだ!他にも地図や写真の画像を読みこむこともできるよ。これはFigmaのプラグインの一部にすぎないんだ。こしばプラグインで沢山の機能を拡張できるんだね。すごい!メリット3:無料ですぐに使えるこしばFigmaって凄いツールなんだね!でも利用料はお高いんでしょ?デイトラちゃん実はStarter版なら無料で使えるんだよ✨こしばFigmaって無料で使えるの?Adobeは利用料がかかるからデザインを本格的にはじめるかどうか悩んでいる人には負担だけど、無料だとお財布にもやさしいね!こしばでも無料版だと機能制限とかあって使いづらいってことない?デイトラちゃんFigmaはひとりでデザインツールとして使う分には無料で何でもできるよ。複数人でFigmaで同時に同じデザインデータを編集したい場合は有料のProfessional版やOrganization版にアップグレードする必要があるよ。こしば個人で使うなら無料でも機能制限なく使えるんだね!メリット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の操作にも慣れるから沢山、模写をすると良いよ。こしばFigmaで模写ってどうやってやるの?デイトラちゃんGoFullPageっていうGoogleChromeの拡張機能を使うとWebサイト全体のスクリーンショットがとれるんだよ。スクリーンショットを横に並べたり半透明にして重ねたりして同じようにデザインを再現していくんだ。(方法1)模写するサイトのスクリーンショットを横に並べて見ながら真似してみる(方法2)模写するサイトを半透明にして下敷きにして上からなぞってみる(こっちの方が最初は簡単!)こしばお手本を見ながら同じようにデザインしていけば良いんだね。DownloaderっていうGoogleChrome拡張機能を使えば模写するサイトの画像データもまとめてダウンロードできるよ。こしば素材もダウンロードできちゃうんだ。このダウンロードした素材を配置したり図形や文字をうまく組み合わせたりしてデザインしていけば良いんだね。▶︎今すぐデイトラWebデザインコースに申し込む!模写はデザインの練習には有効ですが模写したものをポートフォリオとして公開すると著作権などの問題が出てくるので練習しても基本的には公開しない方が良いでしょう。デイトラの課題はポートフォリオとして公開OKです。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の動画をあげてくれているよ。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デザインの考え方も並行して勉強できるように設計されているんだ。ECとアプリデザインに分かれているよ。複数ページのコーポレートサイトは単価の高い案件も多いから、デザインコースを受講したら中級編まではやってみることをおすすめするよ!こしばコーポレートサイトのデザインまで出来れば仕事の幅も広がりそうだね。デイトラちゃん中級編まで終わったら実際にデザイナーとして営業しても良いようにカリキュラムが組まれているよ。上級編: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を推しているんだよ。学べるデイトラちゃんデイトラの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を独学で勉強する流れです!Figmaで沢山、良いデザインをトレースしていくと自然にFigmaの操作方法も身につきます!Figmaを導入する実際に触ってみて操作方法に慣れるバナー・LP・コーポレートサイトのトレースをしてみるFigmaで参考になる教材デイトラちゃんFigmaで参考になる教材はこちらです!最近は日本語のFigmaの情報や教材が増えてきました!Figma公式UdemyYouTubeSNS/noteなどでTipsを拾う【PR】デイトラのWebデザインコースはFigmaを使って仕事ができるところまで学びますデイトラのWebデザインコースでは、Figmaの学習だけでは終わりません。営業方法について詳しく解説しています。Figmaの操作方法だけでなくデザイナーとして仕事ができることに重点をおいたカリキュラムになっています。Web制作・Webデザイン・アプリ開発・動画編集など「自分に合った理想の働き方は何か」を見極めていただけます。投稿一覧フリーランスのライター職。タイの国立大学講師を経て帰国後に独立。新しい働き方/海外投資/コラム/旅/教育/IT関連を主に執筆。・ブートキャンプ2期に参加。各分野のフリーランスから学びを生かし、デザイン・コーディングと仕事の幅も広げています。2020.09.20最近、年齢や性別に関係なく30代や40代未経験でWebデザイナーを目指す人が増えています。