これからはじめる Figma Web・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 便利なツール連携

Figma を初めて開く人が、画面の見方から Web サイト 1 枚分のデザインを仕上げるところまでを、手を動かしながら覚えるための入門書です。『これからはじめる Figma Web・UI デザイン入門』 (阿部 文人、今 聖菜、田口 冬菜、中川 小雪 著、マイナビ出版 (Compass Web Development)、2022 年 9 月 26 日発売) は、版元の紹介によれば 2022 年 7 月 29 日にリリースされた Figma の日本語化に対応し、操作画面と解説も日本語の表示に合わせています。ポートフォリオサイト、コーポレートサイト、EC サイト、レシピアプリの 4 つの作例を収録し、作例のデータもダウンロードできるとされています。

全 4 章の構成、準備編から活用編まで

本書は 4 章で、章題には準備編、実践編、応用編、活用編の段階が付いています。第 1 章「準備編 Figma の準備と基本機能」は、アカウント作成と初期設定、ファイルブラウザー、チームとプロジェクトとファイルの関係、インターフェイス、デザインタブの各パネルの使い方を順に押さえ、コンポーネントとオートレイアウトとスタイルの節を経て、30 分でできるサムネイル制作で最初の 1 枚を作ります。章の終わりには Figma コミュニティと Figma 公式リソースの節があります。第 2 章「実践編 Figma で実践する Web デザイン制作体験」は、ポートフォリオサイト 1 つを題材に、ファイルの準備、色スタイルの作成、テキストスタイルの登録、ボタンのコンポーネントの作成、グローバルナビゲーション、フレーム、ファーストビューの作成へ進みます。続いて Service、Works、About の各セクションとフッターを作り、最後にページ全体の余白を調整します。

3 つの作例で学ぶ調査からプロトタイプまでの流れ

第 3 章「応用編 3 つの作例から学ぶデザイン制作のながれ」は、作例の概要に続いて、コーポレートサイト、インテリア EC サイト、レシピアプリの 3 つを扱います。版元は、4 つの作例を通じて、それぞれの作例に求められる調査や情報整理、フレームの用意やスタイル、プロトタイプの作成方法も紹介すると案内しています。会社の紹介、商品の販売、スマートフォンのアプリでは、載せる情報の量も画面の遷移も違います。同じ道具で性格の異なる画面を作り分けることで、操作の手順だけでなく、何から決めていくかという制作の順序も身につけやすくなります。

画面のデザインを道具で作る時に効いてくるのは、見た目を整える個々の操作よりも、同じものを同じ定義から作る仕組みです。色や文字の規則、繰り返し現れる部品を一度定義して画面全体で使い回せば、修正は定義の側を直すだけで済み、画面ごとのばらつきも防げます。この考え方を組織の規模で体系化し、規則と部品を共有の資産として管理するものが デザインシステム です。また、要素の配置だけを粗く描いた ワイヤーフレーム で構成の合意を取ってから見た目を詰める進め方も広く使われており、Figma はその粗い段階から、作り込んだ画面、画面遷移を確かめるプロトタイプまでを 1 つのファイルの中で扱えます。

チームでの Figma 活用と、向く読者 / 向かない読者

第 4 章「活用編 チームでの Figma 活用とペアデザイン」は、チーム制作に向いている Figma の特徴、チームで利用できる Figma の 5 つの便利な機能、Figma を使ったペアデザイン、職種を越えたコラボレーション、便利なツール連携を扱います。版元の紹介は、Figma がデザイナーだけでなく、さまざまな職種のメンバーとのコラボレーションによって、プロジェクトや制作フローの改善にも役立つと説明しています。エンジニアやディレクターが、デザインデータの共有や確認の進め方を知る目的でこの章から読むこともできます。

一方で、目次は操作の習得と作例の制作が中心で、配色やタイポグラフィ、レイアウトの原則そのものを章題に掲げた章はありません。デザインの判断の根拠を体系立てて学びたい場合は、原則を主題にした本と組み合わせると目的に近づきます。組み合わせ方は Web デザインを独学する本の選び方 で整理しています。また、解説は 2022 年 9 月の刊行時点の画面に基づいています。版元自身が Figma をアップデートが活発なツールと紹介しているとおり、メニューの位置や名称が手元の画面と異なる箇所は、操作の目的から読み替えて進める前提になります。

ポートフォリオサイトを 1 つ完成させたあと、性格の違う 3 つの作例で同じ操作を繰り返せるのが本書の強みです。自分の作品をまとめたいデザイナー志望の人や、チームで Figma を使い始める現場で最初の 1 冊を探している人にとっては、作例データを手元で開きながら、Figma での制作の流れを一通り体験できる一冊です。