「デザインからサイト構築まで FigmaだけでWeb制作」（日経BP）の評判・価格・レビュー
Web制作を学ぶための教材の基本情報・価格・レビュー。
PR・広告を含みます
Web制作をスクールで学ぶなら、教育訓練給付で最大80%OFF。
対象講座なら受講料の最大80%（給付区分・上限・要件あり）が後日戻り、実質負担を抑えられます。独学の本＋スクールの併用も。
▶ あなたの講座でいくら戻るか試算（無料・30秒）
無料相談で適用条件を確認できます
無料相談で適用条件を確認できます
無料相談で適用条件を確認できます
はじめての方へ：教育訓練給付のしくみと損しない選び方 ／ 申請手順5ステップ
学んだ後に「作って公開する」ための環境例です。サーバー・ツールは教育訓練給付／補助の対象外です。
※給付率・実質額は区分（一般20%／特定一般40%／専門実践 最大80%）と要件で変わり、即時値引きでなく後日支給です。最終可否はハローワーク・厚労省でご確認ください。掲載はPR（送客手数料を受領）。
この本について
●Webデザイナーの必須ツール「Figma」解説書の決定版！ ●デザイン初学者はもちろん、デザイナー以外でも理解できる！ ●最新機能「Figma Sites」の実践活用までカバー！
Figma（フィグマ）は近年、多くのデザイナーや企業に選ばれているデザインツールです。Webサイトやアプリのデザインを効率良く制作できるだけでなく、検討や改善、プレゼンなどを含む一連の作業を効果的に進めることができます。クラウドベースなので共同作業にも向いていて、Webデザインなどにおける必須のツールになりつつあります。
さらに2025年には、デザインしたWebサイトをそのまま公開する新機能「Figma Sites」を搭載し、HTMLなどのコーディングの知識がなくても、Webサイトを制作・公開できるようになりました。
本書は、そんなFigmaの基本的な操作方法はもちろん、Figma Sitesなどの最新機能の活用法や、「使いやすく訴求力のあるデザイン」に必要なUI/UXの考え方まで、これからのFigma 活用を体系的に学べる1冊です。
執筆は、現役のデザイン講師として活躍する著者陣。現場で培った実践的な知識をもとに、初心者にも理解しやすく体系的に解説しています。 Chapter 1 Figmaについて 01 Figma とは 02 使う準備をしよう 03 Figma の構造 04 各部の名称と説明 05 デザインに着手する前に
Chapter 2 Webサイトを作りながら基本ツールを覚えよう 01 デザインを始める前の下準備 02 TOP ページのフレーム作成 03 ボタンの制作 04 ヘッダーの作成 05 ファーストビューの作成 06 NEWS セクションの作成 07 ABOUT セクションの作成 08 応用演習：残りのセクションとパーツ 09 完成まとめ 10 SPデザインの制作 11 レスポンシブについて
Chapter 3 プロトタイプを設定してみよう 01 プロトタイプとは 02 ページ遷移を再現する 03 ヘッダーを固定してみよう 04 アニメーションの種類 05 ホバーアニメーションをバリアントを使い再現する 06 プロトタイプを共有する 07 Figma でのさまざまなコミュニケーション方法
Chapter 4 Figma Sitesで制作から公開設定まで 01 Figma Sitesとは？ 02 Webサイトの制作 03 Webサイトのデザイン 04 Webサイトのレスポンシブ対応 05 アクセシビリティの向上 06 Figma Sitesで作成する際のポイントや便利な機能 07 Webサイトを公開する 08 まとめ
Chapter 5 UI/UXについて考えてみよう 01 UI/UXとは？ 02 UI/UXを考えるときに見るべきポイント 03 UI/UX視点からデザインの改善をしてみよう 04 作って終わりではなく「使われるか」を見る 05 UI/UX設計で活用できるプラグインの紹介
判型：単行本
Web制作とは
Web制作は、WebサイトやWebアプリを企画・設計・実装・公開・運用する流れ全体を扱う実践領域。見た目のデザインだけでなく、情報構造、リンク設計、操作性、公開後の更新性まで含めて考える必要がある。
こんな人向け：HTMLやCSSを学ぼうとしている人、または業務でWebページの改善を担当する人向け。基礎的なパソコン操作はできることを前提にすると、初期段階は取り組みやすい。
独学ロードマップでの位置
Web制作は情報設計→表示設計→動作設計→公開運用へと進む順番が分かりやすい。前半で土台を固め、後半で体験の質や運用を整える流れが定着しやすい。
- HTMLの文書構造と意味論を先に理解して、ページの骨組みを作れるようにする
- CSSで文字・色・レイアウトを統一的に整え、レスポンシブ対応の基礎を学ぶ
- JavaScriptでイベントや状態変化の基本を理解し、必要な動きを付ける
- アクセシビリティ、フォーム設計、読み込み速度を意識したチェック方法を習慣化する
- 模擬案件で企画から公開、修正、改善までの一連を実行して学びを定着させる
独学で足りる？体系的に学ぶ選択肢
独学では、実装中心・思考中心の教材を同時に読むより、テーマを分けると理解が定着しやすい。教材選びは、解説の具体性、演習の量、難易度の段階性、更新状況を4本柱で比較すると良い。特に疑問を解消できる補助情報（用語解説や図解、実例の背景）があるかを重視すると、単なる暗記に偏らない学習になる。
独学で時間が尽きる前に進行管理が必要な人には、学習の順序と成果物レビューを担保できる体系的な学習環境が有効。教材の進度管理、課題提出、修正指導をセットで進められる学び方は、習慣化とアウトプット形成を支えやすい。 ▶ 給付でいくら戻るか試算
よくある質問
Q. プログラミング経験がない状態でも始められますか？
できます。最初は難しく感じることがありますが、文書の骨格から順に触るとイメージを掴みやすいです。見た目だけでなく、どこに何を置くかという構造理解から始めると学習の抵抗が下がります。
Q. デザインとコーディングはどちらから学ぶべきですか？
最初はコーディングを先に体験して、実装可能な範囲を把握するのが効率的です。画面の仕組みを理解したうえでデザイン要件を読むと、設計意図と制約の整合が取りやすくなります。最終的には両者を往復しながら進むのが現実的です。
Q. 独学の教材を選ぶ基準は何ですか？
基礎→実践→応用へ自然に階段が上がる構成かどうかを確認するのが第一です。次に、単なる手順説明でなく、なぜそうするのかを示しているかを見ます。最後に、復習できる構成と実務に近い演習があるかで選ぶと挫折しにくいです。
次の一冊：次に読む方向としては、まずHTML/CSSの基礎の再確認を行い、次にJavaScript基礎、実装を補強する順序が有効です。さらに進むなら、UI設計、アクセシビリティ、運用設計のテーマを深めると判断軸が広がります。
