Figma for UI デザイン［日本語版対応］ アプリ開発のためのデザイン、プロトタイプ、ハンドオフ

Figma の操作を一通り覚えても、実際のアプリ開発でどの順に画面を作り、どうやってエンジニアへ渡せばよいかは別の問題です。『Figma for UI デザイン［日本語版対応］ アプリ開発のためのデザイン、プロトタイプ、ハンドオフ』 (沢田 俊介 著、翔泳社、2022 年 11 月刊) は、デザインツール Figma を使って UI デザインをゼロから学ぶための書籍で、「写真投稿アプリ」を題材に、実際のワークフローに沿ってアプリのデザインを作り上げていきます。版元の紹介文によると、基本を知るための「リファレンス編」と、現場のスキルを学べる「プラクティス編」が一冊にまとまっており、書名のとおり Figma の日本語版の画面に対応しています。

Introduction と 7 章の構成、操作の基本からハンドオフまで

目次は、アプリ開発の工程や企画の確認などを扱う Introduction から始まります。Chapter 1「基本的な操作」と Chapter 2「生産性を上げる機能」で道具としての Figma を押さえたあと、Chapter 3「ワイヤーフレームを作成する」、Chapter 4「プロトタイプを作成する」、Chapter 5「詳細デザインを作成する」、Chapter 6「デザインのハンドオフ」と続きます。章題の並びを見ると、前半の 2 章が機能を引くためのリファレンス、Chapter 3 以降が企画から実装への引き渡しまでを順に進める実践の部分にあたると読めます。最後の Chapter 7「ノンデザイナーのための Figma」は、版元が対象に挙げるエンジニアやマネージャーのような、デザインを本業としない人に向けた章と読めます。版元は、プロトタイピング、プラグイン、アニメーションにも踏み込んで解説しているため、Figma を使ったことのある人にも活用できると案内しています。

ワイヤーフレーム、プロトタイプ、ハンドオフという工程の意味

UI デザインの工程を分けて考える理由は、決めるべきことの順序にあります。最初に描く ワイヤーフレーム は、色や画像を省いて画面の構造と情報の配置だけを示す低い忠実度の設計図で、何をどこに置くかの合意を安く取るためのものです。次のプロトタイプは、画面同士をつないで遷移や操作の流れを試せる状態にしたもので、実装する前に使い勝手の問題を見つける役割を持ちます。詳細デザインで見た目を仕上げたあとに来るハンドオフは、余白や色、文字の大きさ、部品の状態といった実装に必要な情報を開発者へ引き渡す工程で、ここが曖昧だとデザインと実装のずれが生まれます。Figma はデザイナーとエンジニアが同じファイルを共有して作業できるため、この引き渡しを画面の画像ではなくデータそのものの共有で行える点が大きな特徴です。版元が本書の特長として「エンジニアが実装しやすいようなデザインを作成できる」ことを挙げているのは、この工程を意識した構成だからと読めます。部品を使い回す設計を突き詰めた先には、組織で UI の部品と規則を体系化する デザインシステム という考え方もあり、本書で身につける作業の型はその入り口にもなります。

Figma を初めて使う人と、エンジニアとの連携を見直したい人へ

版元がすすめる読者は、Figma をはじめて使う人、UI デザイナーを目指す人、エンジニアとの連携を改善したいデザイナー、開発ツールとしての Figma を学びたいエンジニア、現場のワークフローを把握したいマネージャーの 5 つです。紹介文は初学者が最初の一歩を踏み出せる構成だと説明しているため、デザインの経験は前提になりません。一方、本書は 2022 年 11 月刊で、紙面の画面写真やメニューの名前は刊行時点の Figma に沿っています。Figma はブラウザー上で継続的に更新されるサービスなので、手元の画面と配置や名称が違う箇所があり得る点は承知しておくと戸惑いが減ります。また主題は Figma でデザインを作って引き渡すところまでなので、受け取ったデザインを フロントエンド のコードとして組む技術を学びたい場合は、実装側の本を別に用意する必要があります。ほかの Figma の本や Web デザインの本との選び分けは Web デザイン本ガイド が参考になります。

これから UI デザインの仕事に入りたい人や、開発チームの中でデザインデータを受け取る側から作る側へ一歩踏み出したいエンジニアにとって、1 本のアプリを企画からハンドオフまで通して作る経験を積める本書は、現場の流れをつかむ近道になる一冊です。操作の手順書としても手元に置けるので、実務で迷った機能を引き直す使い方もできます。