ISBN 9784839980313
これからはじめるFigma Web・UIデザイン入門
概要
Figmaをハンズオンで学びWebデザイン制作の流れを身につける
想定読者
Figmaをこれから使い始めるデザイナー志望者・非デザイナー職のWebプロジェクト参加者。日本語UIに対応した2022年9月版の解説を求める人。
こんな人には向いていない
- すでにFigmaを実務で運用しており、コンポーネントやオートレイアウトの応用テクニックを探している中上級デザイナー
- XDやSketchからの移行で差分だけを把握したい経験者には基礎説明の比重が大きい
- Figmaプラグイン開発やFigma APIを使った自動化を目的とする開発者には対象外
読了後にできるようになること
- Figmaのアカウント作成から基本インターフェイス・ファイル構成まで一通り設定できる
- コンポーネント・オートレイアウト・スタイルを使ってデザインシステムの土台を作れる
- ポートフォリオサイトを題材にフレーム・色スタイル・テキストスタイル・ボタンを段階的に構築できる
- コーポレートサイト・ECサイト・レシピアプリの3種類の作例からジャンル別のデザイン制作の流れを把握できる
- チーム共同編集・ペアデザインなど職種横断コラボレーションでFigmaを活用する方法を知ることができる
- プロトタイプ作成と外部ツール連携の基礎を習得できる
本書のキー概念(章解説)
- 第 1 章 準備編 Figmaの準備と基本機能 — アカウント作成・インターフェイス・コンポーネント・オートレイアウトを含む。初読で時間をかけるべき章。30分サムネイル演習で操作感をつかむのが早道
- 第 2 章 実践編 Figmaで実践するWebデザイン制作体験 — ポートフォリオサイトを通じて色スタイル・テキストスタイル・コンポーネント・フレームを順に積み上げる。全作例中もっとも詳細な手順解説
- 第 3 章 応用編 3つの作例から学ぶデザイン制作のながれ — コーポレート・EC・アプリと業種別にデザインの考え方が変わる点を比較できる。第2章の手順を踏んだ後に取り組むと定着が速い
- 第 4 章 活用編 チームでのFigma活用とペアデザイン — 職種を越えたコラボレーションとツール連携を扱う。デザイナー以外のPM・エンジニア職が読む際に先に参照すると全体像が把握しやすい
ハイライト
- ポートフォリオサイト、コーポレートサイト、ECサイト、レシピアプリ、4つの作例を本書では収録しています。それぞれの作例のデータもダウンロードできるようにしています。(単一題材ではなく4種類の実案件類似作例を収録している点が本書の構成上の特徴として最も端的に現れている箇所)
- デザインプロセスのすべての人をつなぎ、チームがより良いデジタルプロダクトをより速く提供できるようにするためのデザインコラボレーションツールです。(Figmaがデザイナー専用ではなく職種横断ツールである文脈を示す箇所。第4章のチーム活用編への橋渡しとして機能する)
編集メモ
Qiita直接引用 0件 / 累計likes 0。Figmaトピック全体では多数の入門記事が存在するが本書ISBN・書名への直接言及は検索で確認できず。出版2022年9月で日本語化直後のタイミングに合わせた入門書として位置づけ
読む前に押さえておきたいこと
- ブラウザ操作とファイル管理の基本的なPC操作スキル
- WebサイトとアプリのUIとは何かという概念的な理解(HTMLの知識は不要)
- Figmaは無料プランで使い始められるため、事前にアカウント作成だけ済ませておくとハンズオンをスムーズに進められる
学習のコツ
- 第1章のコンポーネント・オートレイアウト節(1-6)は概念が抽象的に感じたら後回しにせず、第2章のボタンコンポーネント作成(2-5)と並行して手を動かしながら戻ると理解が定着しやすい
- 4つの作例データはすべてダウンロード可能なので、第3章の読み方は最終形を開いた状態で本文を読み進めると制作の意図が把握しやすい
- 第4章のチーム活用編はデザイナー以外の職種が先に読むと、Figmaを導入する際の説明材料として活用できる
- 2022年7月の日本語化以降のUIを前提にした解説のため、古いYouTube動画と並用する際はUI名称のずれに注意する
出版社による内容紹介
■Figmaとは Figma（フィグマ）は、デザインプロセスのすべての人をつなぎ、チームがより良いデジタルプロダクトをより速く提供できるようにするためのデザインコラボレーションツールです。 『すべての人がデザインを利用できるようにする』というビジョンのもと、2012年にアメリカのサンフランシスコで誕生しました。現在は世界中で多くのユーザーに支持され、日本でもユーザー数が伸びています。 シンプルな操作性や軽快な動作、強力な共同編集をはじめとした特徴をもつFigmaは、Webサイトやアプリケーションをデザインするデザイナーだけでなく、さまざまな職種のメンバーとコラボレーションすることで、プロジェクトや制作フローの改善においても活躍してくれます。世界中の人々が利用し、アップデートが活発なツールでもあるため、ぜひ一度Figmaを使ってその魅力に触れてみてください。 ■本書の特徴 ・日本語化対応 2022年7月29日にリリースされた日本語化に対応しました！操作画面および解説も日本語化に対応しているため、これからFigmaをはじめる人も安心です。 ・4つの作例で学べる ポートフォリオサイト、コーポレートサイト、ECサイト、レシピアプリ、4つの作例を本書では収録しています。それぞれの作例のデータもダウンロードできるようにしています。ハンズオンで自分の手を動かしながらFigmaの操作方法を学べます。 ・デザイン制作のながれがつかめる 4つの作例を通じて、Figmaを使ったデザイン制作のながれをつかめます。それぞれの作例に求められる調査や情報整理、フレームの用意やスタイル、プロトタイプの作成方法もご紹介します。 第1章 準備編 Figmaの準備と基本機能 1-1 アカウント作成と初期設定 1-2 ファイルブラウザ 1-3 Figmaのチーム・プロジェクト・ファイル 1-4 インターフェイス 1-5 デザインタブの各パネルの使い方 1-6 コンポーネント・オートレイアウト・スタイル 1-7 30分でできるサムネイル制作 1-8 Figmaコミュニティ 1-9 Figma公式リソース 第2章 実践編 Figmaで実践するWebデザイン制作体験 2-1 ポートフォリオサイトのデザイン作成 2-2 ファイルの準備 2-3 色スタイルの作成 2-4 テキストスタイルの登録 2-5 ボタンのコンポーネントの作成 2-6 グローバルナビゲーションの作成 2-7 フレームの作成 2-8 ファーストビューの作成 2-9 Service（サービス）セクションの作成 2-10 Works（制作実績）セクションの作成 2-11 About（私について）セクションの作成 2-12 フッターの作成 2-13 ページ全体の余白を調整する 第3章 応用編 3つの作例から学ぶデザイン制作のながれ 3-1 3つの作例概要 3-2 コーポレートサイト 3-3 インテリアECサイト 3-4 レシピアプリ 第4章 活用編 チームでのFigma活用とペアデザイン 4-1 チーム制作に向いているFigmaの特徴 4-2 チームで利用できるFigmaの5つの便利な機能 4-3 Figmaを使ったペアデザイン 4-4 職種を越えたコラボレーション 4-5 便利なツール連携
この本がどの学習段階で役立つかは、 関連する ロードマップ から確認できます。