概要

FigmaとFigma Sitesでデザインから公開まで一気通貫で習得する

想定読者

WebデザインにFigmaを導入したいデザイン初学者・非エンジニアのWeb担当者。コーディング知識がなくてもWebサイトを制作・公開したい人。

こんな人には向いていない

• すでにFigmaを日常業務で使い込んでいるデザイナーには基本操作の解説が大半を占め、新しい発見は少ない
• HTML/CSS/JavaScriptでフルカスタムの実装を求める開発者には、Figma Sitesの制約(CMS・フォーム機能の欠如など)が障壁になる
• チームのデザインシステム構築やVariables・Dev Modeなど上級連携機能を目的とする読者には本書の射程が足りない

読了後にできるようになること

• FigmaのフレームとオートレイアウトでPCとSPに対応したWebデザインを組み立てられる
• コンポーネントとバリアントを使い、ヘッダーやボタンを再利用可能な部品として管理できる
• プロトタイプ機能でページ遷移・ホバーアニメーションを設定しステークホルダーへデモを共有できる
• Figma Sitesでデザインをそのまま公開サイトに変換し、レスポンシブ対応とアクセシビリティ設定まで行える
• UI/UXの基本指標(視認性・操作性・訴求力)をFigmaのプラグインを活用しながら改善できる
• コーディング不要で一人がデザインから公開まで完結する制作ワークフローを習得できる

本書のキー概念(章解説)

• 第 1 章 Figmaについて — ツール導入と基本構造の把握。既存ユーザーは読み飛ばして2章から入ってよい
• 第 2 章 Webサイトを作りながら基本ツールを覚えよう — TOPページからSPデザインまで手を動かして習得する本書の中核章
• 第 3 章 プロトタイプを設定してみよう — ページ遷移・ホバーアニメーション・バリアントを実装し、社内デモに使えるレベルまで引き上げる
• 第 4 章 Figma Sitesで制作から公開設定まで — 本書のユニークな付加価値。2025年リリースの最新機能を実践カバーする章
• 第 5 章 UI/UXについて考えてみよう — 作って終わりでなく『使われるか』の視点を持つための最終章。プラグイン活用も紹介

ハイライト

• さらに2025年には、デザインしたWebサイトをそのまま公開する新機能『Figma Sites』を搭載し、HTMLなどのコーディングの知識がなくても、Webサイトを制作・公開できるようになりました。(本書最大の差別化ポイントであるFigma Sites対応を端的に示す一節)
• 執筆は、現役のデザイン講師として活躍する著者陣。現場で培った実践的な知識をもとに、初心者にも理解しやすく体系的に解説しています。(実務経験のある講師陣による執筆であることを示し、学習コストの低さを裏付ける記述)

外部からの言及

• Figma SitesのベータをゼロからIけ、15時間でデザインから公開まで完走できたという実践報告が登場しており、コーディング知識なしでの公開ハードルが想定より低いことが確認されている。一方でレスポンシブ対応は手動調整が必要な部分があると指摘されている(qiita)
• 2025年時点でFigmaはUIデザインツールから多職種連携プラットフォームへ進化しており、Figma Sites・Figma Buzzなど職種別ツール群として分化しつつある。デザイナー以外にとっても学習範囲を役割で絞ることが現実的な選択とされている(qiita)

編集メモ

Qiita直接言及 0件 / 2025年11月刊行の新刊のため外部シグナル蓄積が少ない段階。Figma Sitesを扱う書籍として国内で数少ない先行書であり、補完的選択肢として位置づける

読む前に押さえておきたいこと

• Webサイトとは何か・URLとは何かの基本的な理解(HTMLの読み書きは不要)
• マウス操作でソフトウェアを使った経験(AdobeやCanvaなどのデザインツール経験があればなお良い)
• PCブラウザとインターネット接続環境(Figmaはクラウドベースのためインストール不要)

学習のコツ

• Chapter 1は既存ツール経験者なら読み飛ばして構わない。Chapter 2からサイト制作を手を動かしながら進め、Chapter 4(Figma Sites)を最優先で体験すると本書の価値を最短で実感できる
• Chapter 3のプロトタイプ設定は、クライアントへのデモ共有や社内レビューの場面で即座に使える技術。完成品ファイルを見ながら自分のデザインに同じ設定を施すと習得が早い
• Chapter 5のUI/UX章は読了後に戻ってくる使い方が効果的。まず一通り制作を完走させてから、改善の視点として再読すると気づきが多い
• Figma Sitesで公開した後、レスポンシブのブレイクポイントは自動対応ではなくオートレイアウトの設定状態に依存する。Chapter 4と並行してChapter 2のオートレイアウト節を反復することで、公開時のズレを減らせる