概要

Web版Figmaでモックアップとプロトタイプを一から完成させる

想定読者

Figmaをまったく触ったことがない非デザイナー職(エンジニア・ディレクター等)や、デザイン学習を始めたい学生

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

• すでにFigmaで実務デザインを担当しているUIデザイナーには基礎事項の比重が大きい
• Auto Layout・バリアブル・Dev Modeなど2024年以降の機能を深く学びたい中級者には物足りない
• Figmaのコンポーネント設計やデザインシステム構築を目的とする読者には範囲が限られる

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

• Figmaの無料Web版でアカウント作成からインターフェース操作まで迷わず始められる
• ロゴ・バナー・ページレイアウトを段階的に作り上げ、一連のデザイン制作フローを体得できる
• 色スタイルとフォントスタイルをルールとして登録し、デザインの一貫性を保つ方法を習得できる
• コンポーネント化とバリアントを活用してボタンの状態変化を効率的に管理できる
• プロトタイプ機能で画面遷移とハンバーガーメニューのインタラクションを設定し、動くモックアップとして共有できる

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

• Figmaについて知ろう — アカウント登録とインターフェース確認まで。まずここを完走してから先に進む
• 第 1 章 ロゴを作ろう — フレーム・図形・曲線・グループ化の基本操作をすべて使う凝縮章
• 第 2 章 バナーを作ろう — グラデーション設定と画像書き出しを習得できる短い章、作業時間の目安は30分程度
• 第 3 章 レイアウトのベースを作ろう — レイアウトガイドとテキストボックスの扱い方。Webデザインの骨格を理解する章
• 第 4 章 パーツを作ってレイアウトしよう — 色・フォントスタイルの登録とヘッダー・フッター・カード作成。デザインシステム思考の入口
• 第 5 章 トップページのデザインを完成させよう — コンポーネント複製・原稿流し込み・データ調整で実務感を掴める章
• 第 6 章 下層ページとプロトタイプを作ろう — バリアント・インタラクション・共有まで完結させる最終章。プロトタイプ確認が達成感のピーク

ハイライト

• FigmaはWeb版とアプリ版があり、無料版と有料版があります。本書は無料で使えるWeb版のFigmaを使用して、Webサイトのモックアップとプロトタイプ作成の手順を解説します。(無料のWeb版だけで完結することを明示しており、導入コストへの不安を払拭する核心部分)

外部からの言及

• Figmaはブラウザ上でUIをデザインし、そのままデモ・コード生成まで一気通貫できるツールとして複数記事で紹介されており、エンジニアがデザイン工程に参加する入口ツールとして位置づけられている(qiita)
• Figmaの基本構成(ページ・キャンバス・パネル配置)を押さえることが、ツール習得の最初のハードルとして繰り返し言及されており、本書のChapter0の構成はこのニーズに直接対応している(qiita)

編集メモ

Qiita でのISBN直接言及は確認されず(0件)。Figma入門カテゴリ全体の言及は複数あるが本書への帰属は特定できないため、シグナル未測定として supplementary に分類

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

• PCのWebブラウザ操作(ドラッグ&ドロップ・コピーペーストなど)が問題なくできること
• HTMLやCSSの知識は不要だが、Webサイトのヘッダー・フッター・カードという概念を利用者として知っていると読み進めやすい

学習のコツ

• Chapter0でお手本ファイルをダウンロードしてから読み進めると、手を動かしながら確認できるため定着速度が上がる
• Chapter1〜2は独立した制作物なので、Figma操作に慣れてきたら自分のロゴ素材やバナー案件で差し替えて試すと実感が深まる
• Chapter4のスタイル登録は一見地味だが、Chapter5でコンポーネントを大量に配置する際に効いてくる。読み流さず手を動かすこと
• Chapter6のインタラクション設定は複雑に見えるが、まずバリアントなしでシンプルな画面遷移を完成させてから、バリアント連携に進む順番が安全