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

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

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

そこで今回は、

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

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

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

全くの初心者からFigma中級者まで難易度別に並べました。

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

クリックすることで見出しにすぐジャンプすることができます。

おすすめ本①初心者からちゃんとしたプロになる　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 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 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デザイン入門〜UIデザイン、プロトタイピングからチームメンバーとの連携まで〜

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

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

こんな方におすすめ

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

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

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

Amazonのレビューでも

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

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

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

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 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入門の本・書籍の選び方

全く何もわからない超初心者さん、PhothshopやAdobeXDは触ったことがある、Figmaを知ってるデザイナー、エンジニア・マネージャーでFigmaを知っておきたいの4パターンの人に当てはめて選び方を解説しましょう。

全く何もわからない超初心者さん

超初心者さんはFigmaを触ってみるといいです。最初は本を買うよりYoutubeやUdemyの方がわかりやすいと思います。慣れてきたら、

• 初心者からちゃんとしたプロになる　Figma基礎入門（とりあえず触りたい超初心者向け）
• はじめてでも迷わないFigmaのきほん やさしく学べるWebサイト・バナーデザイン入門 （とりあえず触りたい超初心者向け）

で作品を作ってみましょう。さらにもっと進みたくなったら、

• これからはじめるFigma Web・UIデザイン入門 (Compass Web Development)（初心者から全部マスターできる）

で完璧にFigmaを使えるようにしましょう。

PhothshopやAdobeXDは触ったことがある

デザインツールを操作できる人は、Figmaに移りやすいです。

• これからはじめるFigma Web・UIデザイン入門 (Compass Web Development)（初心者から全部マスターできる）
• Figma for UIデザイン［日本語版対応］（初心者から全部マスターできる）

で基本的な部分をマスターしましょう。さらに進む場合、

• Figmaで作るUIデザインアイデア集 サンプルで学ぶ35のパターン（一通り操作がわかる中級者向け）
• Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り（プロダクト開発したい中級者向け）

で、どんどんFigmaを極めましょう。

Figmaを知ってるデザイナー

「Figmaはある程度使いこなせる。次のステップに進みたい。」そんな場合、

• Figmaで作るUIデザインアイデア集 サンプルで学ぶ35のパターン（一通り操作がわかる中級者向け）
• Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り（プロダクト開発したい中級者向け）

がオススメです。

エンジニア・マネージャーでFigmaを知っておきたい

非デザイナーがざっくりFigmaを知りたい場合、

• Figmaデザイン入門〜UIデザイン、プロトタイピングからチームメンバーとの連携まで〜（ざっくり概要をつかむ）

がオススメです。さらに業務効率を上げたい場合は、

• Figma for UIデザイン［日本語版対応］（初心者から全部マスターできる）
• Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り（プロダクト開発したい中級者向け）

を読むとデザイナーチームの管理がしやすくなると思います。

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

Figmaを本や書籍で学ぶメリット・デメリットを解説します！

本のメリット

• 全体像がわかりやすい
• 詳細がわかりやすい
• サンプルデータがもらえる

本で学習する場合、全体像がわかるという利点があるかと思います。ツールも一つ一つ丁寧に解説してくれるので操作方法に慣れるのに本は適していると思います。

デメリット

• 直感的にわかりにくい
• イメージは作りにくい
• 時間がかかる

本で学習する場合、直感的にわかりにくいというデメリットがあるかと思います。全く何もわからない超初心者さんの場合、動画の方がわかりやすい場合が多いです。動画でキッカケを作り「より深く知りたい」「Figma知りたい」となってから本に入るとスムーズに学習できるでしょう。

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

Figma単体で学習に入るよりは、Photoshopや他のAdobeソフトを一通り先に触った方がいいと思います。いろんなソフトに触れている人の方が最終的にFigmaの良さが理解できると思います。

本以外でFigmaを勉強するオススメの方法

Figma学習①Youtube

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

他にもBONO-カイクンさんのFigma初級チュートリアルやHIROCODE.さんの【2024最新】30分マスター講座 Figmaの基本と便利な使い方！ | WEBデザインツールもオススメです。

キッカケを作るのにYouTubeがかなり便利です。動画に合わせて一緒に操作するだけも全然イメージのわき方が違います。youtubeを使うことは、講師時代にもオススメしてた方法です。

Figmaを独学②Udemy

youtubeで物足りなくなった場合、Udemyに進みましょう。

Figmaを独学③サイト

Figma公式サイト

Figmaの8つの特徴を通して、基本操作を学ぶことができます。

1. フレーム（Frames）
2. 制約（Constraints）
3. コンポーネント（Components）
4. スタイル（Styles）
5. スマートセレクション（Smart Selection）
6. エクスポート（Exporting）
7. コメント（Commenting）
8. 共有（Sharing）

chot.design「UI/UXデザインツール『Figma』入門」

テキストと動画を使って勉強することができます。講座の内容は、

1. Figmaの概要とインストール
2. Figmaの基本操作
3. ツールバーの操作
4. プロパティパネルの操作
5. プロトタイピング
6. 共有とバージョン管理
7. 料理写真投稿アプリを作ってみよう

となっています。

デザインを学習するコツは無理しないこと

デザイン学習のコツは、

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

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

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

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

UIデザイン

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

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

こちらの本がオススメ！

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

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

配色

配色をマスターして綺麗な画面を設計しましょう。

フォント

フォントに詳しくなると良いでしょう。

レイアウト

レイアウトをマスターして、美しい画面をデザインしましょう。

Figmaってどんなツール？

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

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

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

この点が便利で他のツールより優れた点だと思います。

例えば、Photoshopではコーディングする際にデザインの数値を「全体の横幅が、何ピクセル」など一つ一つ手で測る必要がありました。

そういうめんどくさい計算をFigmaなら自動で計算してくれます。（今はphotoshopもプラグインで対応可能。）

また、アプリをダウンロードすることなくブラウザで使えるのもかなり便利です。

Figmaは独学とスクールどっちがいい？（とりあえず独学で問題なし）

Figmaはとりあえず独学で問題なし

「Figmaは独学とスクールどっちがいい？」と聞かれた場合、とりあえず独学でいいと思います。なぜなら、Figma単体で勉強する人は少ないと思うからです。また無料コンテンツでたくさん勉強することができます。

Figmaを使い始める理由として、

• webデザイナーだけど、会社でFigmaを取り入れるようになりそうだ
• エンジニアだけど、チームがFigmaで製品を作り始めた

という人が多いからです。もし、これから全くの初心者でwebデザイナーになろうとするなら先にPhotoshopを勉強した方がいいと思います。

補足：もしFigmaのためにオンラインスクールを利用したいなら

もし全くの初心者で本や動画だと最後までFigmaの学習が続くのか不安という人には、デイトラがオススメ。デイトラはwebデザインが丸ごと1パックになった講座です。

• Figmaを含めたwebデザインが全て学べる
• 買い切りオンラインで完結！料金も他のスクールよりかなり安い
• 現役Webデザイナーにいつでも気軽に質問可能

となっています。気になる人は、お気軽に無料体験を受けてみてください。今なら無料体験が受けれます。

詳しくは、在宅ワークへ！Webデザインスクール6選［就職支援あり］おすすめ比較ランキング（オンライン完結も）

でこちらで解説しています。

まとめ：webデザイン初心者のFigma入門には本をうまく活用しよう！

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

もう一度紹介した本をおさらいしますと、

となっています。

まず無理せず「1周なんとなくぼやーっと」本にそって学習をやってみましょう。そして2周目に分からないところをやりましょう。

そうすると1周目の時より自分の成長を感じることができます。さらにやる気が出ます。これがめっちゃ大事！脱完璧主義。自分を追い込まないようにするのが長続きする秘訣です。

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

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

それでは。