［Figma入門おすすめ本ランキング］プロ推薦。webデザイン初心者はコレ！

このような疑問をお持ちの方に向けて解説します。

「Figmaがデザインツールとして優秀らしいので試してみたいのですが、どんな本を使って勉強したら良いのでしょうか？」このような方も多いのではないでしょうか。

そこで今回は、

• 10年目の現役webデザイナー
• webデザインの記事を50本以上書いてきた

筆者が、Figmaの入門に役立つオススメ本を解説します。ぜひ参考にしてみてくださいね。

プロが推薦する【Figma入門おすすめ本ランキング】webデザイン初心者はこれを読もう！

• 初心者からちゃんとしたプロになる　Figma基礎入門（とりあえず触りたい超初心者向け）
• はじめてでも迷わないFigmaのきほん やさしく学べるWebサイト・バナーデザイン入門 （とりあえず触りたい超初心者向け）
• Figmaで作るUIデザインアイデア集 サンプルで学ぶ35のパターン（一通り操作がわかる中級者向け）
• これからはじめるFigma Web・UIデザイン入門 (Compass Web Development)（初心者から全部マスターできる）
• Figma for UIデザイン［日本語版対応］（初心者から全部マスターできる）
• Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り（プロダクト開発したい中級者向け）
• Figmaデザイン入門〜UIデザイン、プロトタイピングからチームメンバーとの連携まで〜（ざっくり概要をつかむ）

おすすめ本①Figma for UIデザイン［日本語版対応］ アプリ開発のためのデザイン、プロトタイプ、ハンドオフ 

• 出版社 ‏ : ‎ 翔泳社 (2022/11/14)
• 発売日 ‏ : ‎ 2022/11/14
• 単行本（ソフトカバー） ‏ : ‎ 320ページ

書籍「Figma for UIデザイン［日本語版対応］」の特徴

こんな方におすすめ

・Figmaをはじめて使う方
・UIデザイナーを目指す方
・エンジニアとの連携を改善したいデザイナー
・開発ツールとしてのFigmaを学びたいエンジニア
・現場のワークフローを把握したいマネージャー

ここがオススメ①figmaの基本操作なら一通り出来ます！と言えるようになる

書籍「Figma for UIデザイン［日本語版対応］」は、第1章〜第2章で操作を細かく勉強できるのが特徴です。Figmaを全く触ったことない人が機能を１から勉強したい人におすすめです。

また、Amazonのレビューでも

と、購入者が知らなかった機能の解説まであり、かゆいところに手が届く内容となっています。

ここがオススメ②写真投稿アプリを作りながら勉強できる

書籍「Figma for UIデザイン［日本語版対応］」は、第3章〜第6章で写真投稿アプリを作っていきます。「Figmaってどう現場で役に立つの？」という人や「ワイヤーフレーム、プロトタイプ」ナニソレという人でも、実際に写真アプリを作るので実務が頭の中でイメージ出来るようになります。

また、Amazonのレビューでも

と、購入者が知らなかったエンジニアとの協業の解説まであり、かゆいところに手が届く内容となっています。

ここがオススメ③現場のリアルがわかる

書籍「Figma for UIデザイン［日本語版対応］」は、デザインの本としては、珍しく、Figmaを学びたいエンジニア、現場のワークフローを把握したいマネージャーにも向けて書いてあります。

エンジニアやマネージャーがUIデザイナーがどんな事を考えてデザインを行っているかイメージするのに向いてる本と言えます。

【ここはマイナスのデメリット】ページ数は多い

デザインの本としては、320ページと多いボリュームになります。いろんなものをかなり詰め込んでいる本書。時間があまりない場合、もしかしたら必要な箇所だけを読む。ぐらいで良いかもしれません。

また、Amazonのレビューでも

と、「作業を羅列してるだけ」という厳しいレビューがあるのも頭に入れておいたほうが買って後悔しないでしょう。

おすすめ本②初心者からちゃんとしたプロになる　Figma基礎入門

• 出版社 ‏ : ‎ エムディエヌコーポレーション (2023/5/26)
• 発売日 ‏ : ‎ 2023/5/26
• 単行本（ソフトカバー） ‏ : ‎ 272ページ

書籍「初心者からちゃんとしたプロになる Figma基礎入門」の特徴

こんな方におすすめ

・事業会社や制作会社のWebデザイナー／UIデザイナー
・制作職以外でもFigmaを操作する機会のある方
・基本から現場の一段深いノウハウまでを習得したい方

ここがオススメ①1日30分で済む

書籍「初心者からちゃんとしたプロになる Figma基礎入門」は、1日30分で済むようになっています。30分で１つのレッスンが終わるように設計されています。時間が区切られているのがいいですね。どこで終わらせたらいいかが分かりやすいので、時間のない人にオススメです。

また、Amazonのレビューでも

と、なっており30分で終わるのでスキマ時間でも学習できるようになっています。

ここがオススメ②サンプルデータを使って学習できる

書籍「初心者からちゃんとしたプロになる Figma基礎入門」では、webデザインとモバイルアプリを作るレッスンがあります。サンプルデータがあるので、それをなぞっていくだけで、webデザインとモバイルアプリを完成させることができます。

サンプルデータがある教材は、とりあえず何も考えずなぞるだけで作品が出来上がるので便利です。

【ここはマイナスのデメリット】説明が投げやりな部分がある

デザインの本としては、説明がわかりにくい部分があります。adobeXDを使っていることがある人なら本書ですんなり移行できますが、全くデザインツールを触ったことがない人は中々説明がとっつきづらい部分もあります。

また、Amazonのレビューでも

と、「とても読みにくい」という厳しいレビューがあるのも頭に入れておいたほうが、買って後悔しないでしょう。

おすすめ本③はじめてでも迷わないFigmaのきほん やさしく学べるWebサイト・バナーデザイン入門 

• 出版社 ‏ : ‎ インプレス (2023/7/12)
• 発売日 ‏ : ‎ 2023/7/12
• 単行本（ソフトカバー） ‏ : ‎ 272ページ

書籍「はじめてでも迷わないFigmaのきほん」の特徴

こんな方におすすめ

・Figmaを使ってみたいと思うWebデザイナー
・過去にFigmaを使ってみたが、よく分からなくてあきらめてしまったWebデザイナー
・モバイルアプリのインターフェイスを作成する必要がある人
・企業のSNS担当者、インフルエンサー
・Web広告を出稿している企業の担当者
・資料作成が必要な社会人、大学生

ここがオススメ①webデザイン以外の実例が豊富

書籍「はじめてでも迷わないFigmaのきほん」は、webデザイン以外の実例が豊富です。

・Webサイト（LP）
・UIデザイン
・Instagram広告
・YouTubeのサムネイル
・プレゼン資料
・名刺

と、他の本に無い「プレゼン資料や名刺」を作ることができます。

また、Amazonのレビューでも

と、なっておりFigmaの作れる物の多さに可能性を感じて購入した人がたくさんいます。

ここがオススメ②図解でわかりやすい

書籍「はじめてでも迷わないFigmaのきほん」は、作品が作れるようになるのが目的です。写真と図解を使い画面の説明やどこをタップすれば良いか、細かく解説してくれます。

また、Amazonのレビューでも

と図解を高く評価しているレビューが目立ちました。

【ここはマイナスのデメリット】説明が省略されることがある

デザインの本としては、全くデザインツールを触ったことがない人は中々説明がとっつきづらい部分があります。一度わからなくなったら、本を一度本棚に戻してPhotoshopなど他のツールに慣れてから再度チャレンジするのも手です。

また、Amazonのレビューでも

と、「ハンズオンで進めることができない」という厳しいレビューがあるのも頭に入れておいたほうが、買って後悔しないでしょう。

おすすめ本④Figmaで作るUIデザインアイデア集 サンプルで学ぶ35のパターン

• 出版社 ‏ : ‎ インプレス (2024/7/23)
• 発売日 ‏ : ‎ 2024/7/23

書籍「Figmaで作るUIデザインアイデア集」の特徴

こんな方におすすめ

・Figmaを使っているWebデザイナー

ここがオススメ①UIデザインを実務であつかっている人がすぐ使える事例

書籍「Figmaで作るUIデザインアイデア集」は、の実例が35のパターンあります。とにかく使えそうなパーツを探してきて、自分のデザインに組み込むだけでもUIのクォリティが上がります。

また、Amazonのレビューでも

と、なっておりUIデザインサンプル集というよりもUIの基本的な知識が総合的に身につく本になっています。

ここがオススメ②ボタンなどUIデザインのパーツの意味がわかる

書籍「はじめてでも迷わないFigmaのきほん」は、作品が作れるようになるのが目的です。写真と図解を使い画面の説明やどこをタップすれば良いか、細かく解説してくれます。

Amazonのレビューでも

と高い評価になっています。

【ここはマイナスのデメリット】Figmaが大きくバージョンアップして書籍の操作画面とかなり違う

Amazonのレビューでは、

と、「Figmaが大きくバージョンアップして本書のUIがかなり違います。」というレビューがありました。

Figmaは常にアップデートされ続けます。どの本を購入しても「Figmaのアップデートで操作画面が違うリスクはある。」ということも頭に入れておいたほうが、本を買った時に後悔しないでしょう。

おすすめ本⑤これからはじめるFigma Web・UIデザイン入門 (Compass Web Development)

• 出版社 ‏ : ‎ マイナビ出版 (2022/9/26)
• 発売日 ‏ : ‎ 2022/9/26
• 単行本（ソフトカバー） ‏ : ‎ 256ページ

書籍「これからはじめるFigma Web・UIデザイン入門」の特徴

こんな方におすすめ

• これからFigmaをはじめる人
• プロジェクトでFigmaを使うことが決定した人が、デザイン制作のながれを知りたい場合

ここがオススメ①Figma入門書として評価が高い

書籍「これからはじめるFigma Web・UIデザイン入門」は、Figma入門書として操作から作品制作まで全てを網羅しています。作中に出てくる作品もレベルが高いです。Figma本の中で一番web制作に特化した内容となっています。

また、Amazonのレビューでも

と、なっておりFigmaの基本的な使い方が総合的に身につく本になっています。

ここがオススメ②これ一冊でFigmaがマスターできる

書籍「これからはじめるFigma Web・UIデザイン入門」は、とても高評価が多い本です。

Amazonのレビューでも

と高い評価になっています。

【ここはマイナスのデメリット】他の一冊をfigmaの入口にして読み終えてから、もう一度戻ってきて本書を読むという使い方をしたい

Amazonのレビューではデザインの本として図解がたくさん入っていて読みやすい反面、

と、「決め手になるボタンや場所が明記されていない箇所がいくつかありました。」というレビューがありました。

Figma学習のコツはFigma単体で学ぶというより、Photoshopなどの他のソフトと並行しながら勉強するとFigmaの理解が早くすむと思います。

おすすめ本⑥Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り

• 出版社 ‏ : ‎ 翔泳社; 第1版 (2024/4/5)
• 発売日 ‏ : ‎ 2024/4/5

書籍「Figma for デザインシステム 」の特徴

こんな方におすすめ

• 「デザインシステムに興味があるけど何から始めてよいかわからない」Webデザイナー
• UI/UXデザイナー
• サービスやプロダクトの開発者

ここがオススメ①Figma中級者に強い

書籍「Figma for デザインシステム」は、Figmaを一通り操作できるようになった人の次のステップとしてオススメです。アプリやwebサイトの保守やメンテナンス性をデザインの管理面から向上させるのにピッタリの本。

Amazonのレビューでも

と、なっておりFigmaの基本的な使い方がわかっている人がさらにステップアップするための本になっています。

ここがオススメ②社内エンジニアと連携してプロダクト開発をレベルアップさせる

書籍「これからはじめるFigma Web・UIデザイン入門」は、社内エンジニアと連携するのにピッタリの本です。内製化したデザインチームならちょっとした手直しが頻繁に起こりますよね。

「あのパーツの色を水色にして欲しい」「写真を差しかえて欲しい」こういった小さい要望をサッとこなすのには、わかりやすいデータ管理が大切です。

Amazonのレビューでも

「社内エンジニアと一緒に読みたい内容」と高い評価になっています。

おすすめ本⑥Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り

• 出版社 ‏ : ‎ 翔泳社; 第1版 (2024/4/5)
• 発売日 ‏ : ‎ 2024/4/5

書籍「Figma for デザインシステム」の特徴

こんな方におすすめ

• 「デザインシステムに興味があるけど何から始めてよいかわからない」Webデザイナー
• UI/UXデザイナー
• サービスやプロダクトの開発者

ここがオススメ①Figma中級者に強い

書籍「Figma for デザインシステム」は、Figmaを一通り操作できるようになった人の次のステップとしてオススメです。アプリやwebサイトの保守やメンテナンス性をデザインの管理面から向上させるのにピッタリの本。

Amazonのレビューでも

と、なっておりFigmaの基本的な使い方がわかっている人がさらにステップアップするための本になっています。

ここがオススメ②社内エンジニアと連携してプロダクト開発をレベルアップさせる

書籍「これからはじめるFigma Web・UIデザイン入門」は、社内エンジニアと連携するのにピッタリの本です。内製化したデザインチームならちょっとした手直しが頻繁に起こりますよね。

「あのパーツの色を水色にして欲しい」「写真を差しかえて欲しい」こういった小さい要望をサッとこなすのには、わかりやすいデータ管理が大切です。

Amazonのレビューでも

「社内エンジニアと一緒に読みたい内容」と高い評価になっています。

【ここはマイナスのデメリット】figma入門ではない

この本はあくまで、figmaを全く触ったことがない人には向けて書かれていません。そこに注意しましょう。

おすすめ本⑦Figmaデザイン入門〜UIデザイン、プロトタイピングからチームメンバーとの連携まで〜

• 出版社 ‏ : ‎ 技術評論社 (2023/2/8)
• 発売日 ‏ : ‎ 2023/2/8

書籍「Figmaデザイン入門」の特徴

こんな方におすすめ

• Figmaに興味はありつつも、まだ使ったことのない方
• デザインを始めてみたいけど、どのツールを使えばよいのかわからない方
• デザイナーとの連携をもっとスムーズにしたいと思っているエンジニアやディレクター

ここがオススメ①ざっくり概要を知ることができる

書籍「Figma for デザインシステム」は、Figmaを一通り概要を知りたい人にオススメです。

Amazonのレビューでも

と、デザイナー目線、ディレクター目線、エンジニア目線でも理解できるようになっており、Figmaの概要を理解するための本になっています。

【ここはマイナスのデメリット】読みづらい

書籍「Figmaデザイン入門」は、Figmaの概要を掴むのにはピッタリですが、初心者に優しい紙面デザインとは言えなそうです。

Amazonのレビューでも

と読みにくく、荒さの目立つ本となっています。

【どう選べば良い？】Figma入門の本・書籍の選び方

Figmaを本や書籍で学ぶメリット・デメリット

メリット

デメリット

FIgmaを本・書籍で学ぶ際に注意したいポイント

Figmaを独学で勉強するのにおすすめのサイト

Figmaを独学①Youtube

また本と併用して欲しいのがYouTube動画です。最近では、YouTubeでソフトの使い方を説明してくれる動画があります。

初心者の方にはYouTubeがかなり便利です。動画に合わせて一緒に操作するだけも全然違います。これは講師時代にオススメしてた方法です。初心者の方の学習のコツは、

• 完璧を目指さない
• わからないところは飛ばす

ということです。全部1度で完璧にする必要はないので、分かるところだけやりましょう！この「放置型」の学習はとても良いですよ。時間が経てば経つほど、脳が勝手に知識を結びつけて理解してくれます！

何より、「全部覚えないといけない」というハードルから解放されます。一度取り入れてみてください。

Figmaを独学②Udemy

Figmaを独学③サイト

【Figmaと合わせて学ぶと良い】おすすめのデザイン基礎

Figmaを勉強しつつ、UIについても詳しくなれると良いです。UIとは、ユーザーインターフェースの略で、画面デザインのことですね。ホームページやアプリの画面をデザインすることをUIデザインといいます。

UIの知識があれば、Figmaの操作の覚えも早くなります。UI知識とFigma操作はセットだと言えるでしょう。

こちらの本がオススメ！（見た目似てますが、別々の本）

• なんでボタンはこのデザインが良いのだろう
• なんでこの問い合わせフォームが使いやすいのだろう

などUIに関する判断ができるようになります。

基礎的な知識は

配色やフォントなどデザイン全般の知識については、

ロードマップ：［ママ主婦がwebデザイナー］に未経験からなる方法をプロが解説します。
必要な機材：［たったこれだけ］webデザイナーに必要なソフト・アプリを解説。現環境はコレ！
本とかも使うと良い：［2022年版］節約あり！webデザイナー初心者向けのおすすめ本10選

Figmaってどんなツール？

• Photoshopなどデザインツールを使ったことがある人で、1週間。
• 何も使ったことない人なら、早くて1ヶ月。ゆっくりで3ヶ月。

これぐらいを見ておくと良いと思います。

Figmaは何がすごい？【特徴】

「Figmaは何がすごいの？」という方に向けて、Figmaの特徴3つを解説します。個人的に思うポイントは、

• 数値が自動で計算されて、コーディングがしやすい
• 無料で使うことができる
• ブラウザ上で、編集できる

この点が便利で支持されています。

例えば前までのphotoshopは、コーダーさんがコーディングする際にデザインの数値を一つ一つ手で測る必要がありました。（全体の横幅が、何ピクセルなど）そういったものをFigmaが自動で計算してくれました。（今はphotoshopもプラグインで対応可能。）

また、デザインアプリをダウンロードすることなくブラウザで使えるのも便利。流行りのCanva Proなどにも似ていますね。

Figmaは独学とスクールどっちがいい？

補足：Figmaを学習できるスクール

本や動画だと続くのか不安という人には、デイトラがオススメ。

• オンラインで完結！料金も他のスクールより安い
• 現役Webデザイナーが講師
• 好きな講師を指定可能
• いつでも気軽に質問可能

となっています。今なら無料体験が受けれます。このサイトから申し込みする人多数です。しつこい勧誘も無いので気になる人は、お気軽に無料体験を受けてみてください。

その他のwebデザインスクールは、［就・転職支援あり］オンラインで完結するWebデザインスクール・ランキング6選！社会人〜大学生までで詳しく解説しています。

まとめ：YouTubeと併用しよう

いかがだったでしょうか？

本とYouTubeを組み合わせるのが効果的です。また、「わからないところは、イライラする前に放置」がオススメです。全部完璧にするのは、しんどくて挫折にもつながりますからね！

まず本を「1周なんとなくぼやーっと」やってみましょう。そして2周目に分からないところをやると1周目の時より自分の成長を感じれて、やる気がめっちゃ出ます。これがめっちゃ大事！脱完璧主義。

この記事がFigma学習の参考になりましたら嬉しいです。

何か知りたい人がいらっしゃいましたら、是非コメント欄でお知らせくださいね。

それでは。