概要

Figmaを使ったWeb/UIデザインをハンズオン形式で一通り習得する

想定読者

Webデザイナーを目指す学生・社会人、および制作会社に入ったばかりの新人デザイナー。Figmaをはじめて触る段階から、レスポンシブ対応やインタラクティブUIまで一貫して学びたい人。

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

• すでにFigmaを日常業務で使いこなしており、オートレイアウト・コンポーネント・バリアブルを理解しているデザイナーには基礎内容が多い
• デザインツールの使い方よりもUI/UXのコンセプト設計やユーザーリサーチ手法を学びたい人には対象外
• Figmaを使ったアニメーション・モーションデザインの高度な表現を目的とする場合は別の専門書が必要

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

• オートレイアウト・コンポーネント・スタイル・バリアブルといったFigma固有の機能を実際のファイル操作を通じて理解できる
• スマートフォン画面からレスポンシブなデスクトップ画面まで、実務で使われる制作フローを一通り体験できる
• ハンバーガーメニューやカルーセルなど、現場で頻出するUIパターンをFigmaで実装する方法を習得できる
• プロトタイプ機能を使ったページ遷移・オーバーレイ・アニメーションの設定ができるようになる
• バリアント・インスタンスを活用して再利用性の高いコンポーネント設計ができる
• Figmaファイルの共有方法と、アプリでのプレビュー確認など、チーム制作を想定したワークフローを学べる

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

• 第 1 章 Figmaの概要とレッスンの準備 — FigmaとUI/UXデザインの関係、ソフトウェアセットアップを扱う。既にFigmaアカウントを持つ人は読み流してよい
• 第 2 章 スマートフォンのWebデザイン — 画像・テキスト・アイコン操作など基本操作の核心。Figmaを初めて触る人はここで手を動かすことが最重要
• 第 3 章 スクロールするスマートフォン画面 — オートレイアウトとコンポーネントを初めて扱う章。iOSコンポーネントの活用法とプロトタイプ基礎もカバー
• 第 4 章 ページ遷移するカード型ページ — スタイル・バリアブル・オーバーレイを扱う。デザイントークン的な思想の入口として重要な章
• 第 5 章 ハンバーガーメニューとカルーセル — 現場頻出のUIパターンを実装する実践的章。Figmaファイル共有の手順もここで学べる
• 第 6 章 レスポンシブなWebデザイン — フレーム拡大とプロパティによるデザイン変更を扱う。モバイルファーストで学んできた内容をデスクトップに展開する
• 第 7 章 インタラクティブなUIパーツ — 検索ウィンドウ・アニメーション・チェックボックス・ドラッグ操作まで扱う。インタラクション設計の集大成

ハイライト

• 解説の通りに操作を進めることでFigmaの基本をマスターできる、初学者必携の入門書です。実務に即したデザインを実際の流れに沿って制作し完成させることができます(本書がハンズオン形式で完成まで導く設計になっていることを端的に示す記述)
• 最新のWebサイトに必須のハンバーガーメニュー、カルーセル、レスポンシブ対応など、現場で今すぐ活用できるスキルをこれ1冊に詰め込みました(現場直結の実践スキルを網羅することを示す箇所。実務ニーズとの適合度が高い)

編集メモ

Qiita言及記事0件、楽天ランキングデータなし。2025年1月刊行の新刊であり、現時点でのQiita上の蓄積シグナルは未形成。入門書としての構成は充実しているが、外部シグナル不足によりsupplementaryと判定

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

• PCの基本操作(ファイル管理、ブラウザ操作)ができること
• HTMLとCSSの基礎概念(ボックスモデル、レイアウト)をなんとなく理解していると、オートレイアウトの意味が掴みやすい
• Webサイトを見たことがあり、スマートフォンとデスクトップでレイアウトが変わることを知っている程度の経験

学習のコツ

• LESSON 1はFigmaアカウント作成・UI確認が主目的。既にFigmaを開いたことがある人はLESSON 2から作業を始めると時間を節約できる
• LESSON 3のオートレイアウトとLESSON 4のバリアブルは、Figmaで最も習熟に時間がかかる機能。実際に手を動かして作例を完成させることを優先し、理解は後から追うのが効率的
• ダウンロードできるサンプルファイルは画像素材込みで提供されているため、自分で素材を用意せずにすぐ実習に入れる。途中で詰まったときは完成ファイルを参照して逆算する使い方が有効
• 巻末のショートカットキー一覧は、LESSON 2終了後に一度目を通し、手が覚えた段階で再確認すると習得速度が上がる