「デザインの学校 これからはじめるFigmaの本」（技術評論社）の評判・価格・レビュー
Figmaを学ぶための教材の基本情報・価格・レビュー。
PR・広告を含みます
Figmaをスクールで学ぶなら、教育訓練給付で最大80%OFF。
対象講座なら受講料の最大80%（給付区分・上限・要件あり）が後日戻り、実質負担を抑えられます。独学の本＋スクールの併用も。
▶ あなたの講座でいくら戻るか試算（無料・30秒）
無料相談で適用条件を確認できます
無料相談で適用条件を確認できます
無料相談で適用条件を確認できます
はじめての方へ：教育訓練給付のしくみと損しない選び方 ／ 申請手順5ステップ
学んだ後に「作って公開する」ための環境例です。サーバー・ツールは教育訓練給付／補助の対象外です。
※給付率・実質額は区分（一般20%／特定一般40%／専門実践 最大80%）と要件で変わり、即時値引きでなく後日支給です。最終可否はハローワーク・厚労省でご確認ください。掲載はPR（送客手数料を受領）。
この本について
Figma（フィグマ）はUIデザインやモックアップ、プロトタイプの作成に便利なデザインプラットフォームです。FigmaはWeb版とアプリ版があり、無料版と有料版があります。本書は無料で使えるWeb版のFigmaを使用して、Webサイトのモックアップとプロトタイプ作成の手順を解説します。 Chapter0 Figmaについて知ろう 01 Figmaの特徴を確認しよう 02 アカウントを登録しよう 03 Figmaのインターフェースを確認しよう 04 画面表示とモードを切り替えよう 05 お手本ファイルをダウンロードしよう 06 お手本ファイルを読み込もう
Chapter1 ロゴを作ろう 01 新規ファイルを作ろう 02 フレームを作ろう 03 角丸四角形を描こう 04 半円を描こう 05 オブジェクトを複製＆変形しよう 06 曲線を描こう 07 塗りと線を設定しよう 08 文字を入力しよう 09 グループ化して書き出そう
Chapter2 バナーを作ろう 01 ページを追加しよう 02 バナーの背景にグラデーションを設定しよう 03 ロゴを配置しよう 04 直線を描こう 05 バナーに文字を入力しよう 06 フレームを画像として書き出そう
Chapter3 レイアウトのベースを作ろう 01 ページとフレームを作って準備しよう 02 レイアウトガイドを設定しよう 03 画像やボタンの場所を決めよう 04 テキストボックスで文字を入力しよう
Chapter4 パーツを作ってレイアウトしよう 01 色のルールを色スタイルに登録しよう 02 フォントのルールをスタイルに登録しよう 03 ボタンを作ろう 04 アイコンと大見出しを作ろう 05 ヘッダーを作ろう 06 ヘッダーのメニューが開いた状態を作ろう 07 フッターのベースを作ろう 08 お知らせエリアのベースを作ろう 09 コンテンツカードのベースを作ろう
Chapter5 トップページのデザインを完成させよう 01 コンポーネントを複製して配置しよう 02 フッターを完成させよう 03 メイン画像エリアを作ろう 04 お知らせとコンテンツカードを作ろう 05 原稿を流し込もう 06 データを調整しよう
Chapter6 下層ページとプロトタイプを作ろう 01 下層ページを作ろう 02 ボタンにバリアントを設定しよう 03 プロトタイプで画面どうしをつなごう 04 インタラクションでハンバーガーメニューの開閉を設定しよう 05 バリアントにコネクションの設定をしよう 06 完成したプロトタイプを確認／共有しよう
判型：単行本
Figmaとは
Figmaは、ブラウザやデスクトップで使えるインターフェース設計向けのデザイン・プロトタイピングツールです。画面レイアウト、文字、図形、画像などを一つのキャンバスで編集でき、共有や同時編集もしやすくなっています。UI設計の作業と開発への受け渡しを接続しやすい環境として広く使われます。
こんな人向け：想定読者はデザイン基礎を学び始めた人、企画や開発と橋渡しする担当者です。図形の配置や文字設定など、画面の見た目を作る基礎操作に触れていると理解が進みやすいです。
独学ロードマップでの位置
学習はまず基礎操作を理解し、次に共通部品の設計へ進みます。最後にプロトタイプとレビュー運用を学ぶと、単発作業ではなく継続的に使える知識になります。
- UIの基本構成とツールの扱いを確認し、主要な操作を触ってみる。
- 図形や文字、カラー、タイポグラフィを使って簡単な画面を再現し、表示の考え方を固める。
- コンポーネント化とスタイル管理を使って、同種パーツを整然と再利用できるようにする。
- オートレイアウトや制約を使い、画面幅や余白の変化に耐える構造を作る。
- 画面遷移を作成し、コメント、バージョン履歴、共有設定まで一連で試してレビュー手順を体験する。
独学で足りる？体系的に学ぶ選択肢
独学では、1冊を最初から最後まで読むより、テーマを分けて往復する方が定着しやすいです。写経だけで終わらず、学んだ内容を自分の目的の画面に置き換えて作ることで判断力が育ちます。教材は図が分かりやすく、実務に近い作業を段階的に再現できるかどうかで選ぶと失敗しにくいです。
独学が不安な人や期限がある人は、課題提出とレビューが設計されている学習形態が適しています。サービス名を決めつけず、添削の軸・コミュニティの有無・学習の進行管理が見えるかを比較すると選びやすくなります。 ▶ 給付でいくら戻るか試算
よくある質問
Q. Figmaはデザイン経験がなくても始められますか？
最初は独特の操作概念が多く、戸惑う場面はあります。ただし基本操作は反復しやすく、視覚的に確認しながら進めれば習得できます。最初から高度な機能を詰め込まず、最小単位の作成→確認→整える流れを繰り返すのが確実です。
Q. 実務では設計だけでなくチーム共有も必要ですが対応できますか？
Figmaは画面作成だけでなく、共有リンク、コメント、履歴管理が同じ流れで使える点が強みです。仕様の意図をコメントで残すだけで、関係者間の認識違いを減らしやすくなります。教材を選ぶときは、レビュー運用まで扱うかどうかが実務適合性の判断軸になります。
Q. 独学と体系講座はどちらを選ぶべきか迷います
独学は自分の都合で進められ、理解したい点を深掘りしやすい点が強みです。一方、順番を間違えると停滞しやすく、挫折のリスクがあります。期限や継続の不安が強い場合は、進捗と添削が組み込まれた方式を併用するとバランスが取りやすいです。
次の一冊：次に読む方向性としては、デザインシステム基礎や情報設計、UX改善の考え方に進むのがおすすめです。Figma操作の次に、画面をどう評価し改善するかまで広げると選書判断に役立ちます。
