「FigmaではじめるUXデザイン入門」を読みました。
どうも。Reoです。
「FigmaではじめるUXデザイン入門」という本を読み終えたので、紹介と感想を書いていきます。
本を読んだきっかけ
これまであまり人とデザインを共有することがなかったのもあり、ずっと Sketch を使ってきていましたが、そろそろ Figma の勉強をしたいと思い立ち、本屋で色々な Figma 本の比較をしました。
実のところ、真面目に Figma の勉強がしたいと思い立ったというより、自作アプリであるお買い物メモアプリ「OKAIMO」を1.4.0にアップデートした時に、ストア用のスクショを作るのが大変で、もっと楽をしたいと思ったのがきっかけです。
ゆくゆくはAI機能を使いたいんですが、その前にそもそもちゃんと Figma 自体を使ったことがなかったので、まずは使えるようになるために勉強を始めました。
本屋で比較をして本書「FigmaではじめるUXデザイン入門」を選んだ理由は、Figma の使い方だけでなく、デザインの工程に沿った本であったからです。直近でモデルベースUIデザイン 構造化UIと情報設計の方法論を読んでいたこともあり、工程の確認や比較がしたかったのもあります。
本書の構成
全9章の構成です。
CHAPTER 1 UI/UXデザインとは何か？
CHAPTER 2 UXデザインのプロセス
CHAPTER 3 課題発見とコンセプト作成
CHAPTER 4 プロトタイピング
CHAPTER 5 Figma の基本操作
CHAPTER 6 情報設計とワイヤーフレームの制作
CHAPTER 7 UIデザインを完成させる
CHAPTER 8 UIパターンとリファレンス
CHAPTER 9 これからのUXデザイン
ページ数は319ページ。
FigJamを使う章
- CHAPTER 3 課題発見とコンセプト作成
- CHAPTER 6 情報設計とワイヤーフレームの制作
Figmaを使う章
- CHAPTER 5 Figma の基本操作
- CHAPTER 7 UIデザインを完成させる
- CHAPTER 8 UIパターンとリファレンス
実際に Figma を使う部分は他の本に比べると多くはありません。
一読してみて
UXデザインの工程を学びながら、Figma の基本を学ぶことができる一冊でした。
テーマは自分で決める必要があるので、ハンズオンで完全に真似して作るという形ではないのですが、手順を真似しながら進めることでUIデザインが完成するという本です。
自分も新規アプリのアイディアを本書の工程に沿って進めてみました。
FigJamを使ったアイディアまとめ
一番良かったと感じたのは、CHAPTER 3 の 「課題発見とコンセプト作成」で、Figma が提供するオンラインホワイトボード機能である FigJam を使ったアイディアをまとめる部分です。
この章は用意された FigJam のテンプレートを使って、アイディアをまとめます。
テーマを決めて、体験を書き出したりペルソナを作ったりを FigJam 上で行います。
オンラインホワイトボードは Miro しか使ったことがなかったので、Figma にもこういう機能があるんだ！という気づきを得ました。お手軽で便利ですね。
久しぶりにこうしてテーマに沿ってアイディアを整理しましたが、良いものですね。いつもは紙に書き出すことが多いので、こうしてテンプレートに沿ったやり方も、かなりアイディアが整理できて良いなと思いました。
FigJam の詳しい使い方はそこまで紹介されていませんが、付箋に文字を書く程度なので、直感的に使えます。
UXデザインのプロセス
CHAPTER 2「UXデザインのプロセス」では、ユーザー体験がどのようなプロセスでデザインされているのかが紹介されています。
UXの5段階モデルに沿った説明がされています。流れが非常にわかりやすいですね。
本書もCHAPTER 3以降はこの流れに沿ってアイディアをまとめてからUIデザインをしていきます。
手を動かしやすいというのが良い点でした。
Figma の使い方はUI制作に必須な機能を網羅
CHAPTER 5 では Figma の使い方を学びます。この章はハンズオンで、次のようなログイン画面を作りながら学びます。
実際に Figma で作り、プロトタイプで表示した画像です。
Figmaではオートレイアウトとコンポーネントとバリアントとスタイルガイド、そしてプロトタイプが肝なのかな？と感じました。これらを一通り触ってみるハンズオンになります。
様々なUIの作り方は、CHAPTER 8 にて紹介されています。
自分はある程度他のツールなどで慣れている考え方だったので、Figmaのこれらの機能には非常にとっつきやすかったのですが、初めてだと CHAPTER 8 は説明不足であると感じるかもしれません。
CHAPTER 8 で紹介されている UI は次のとおりです。
8-1 ホーム画面
8-2 オンボーディング/ウォークスルー
8-3 一覧/詳細
8-4 検索
8-5 予約
8-6 メニュー
8-7 カード
8-8 マップ
8-9 ペイウォール
8-10 スワイプ
8-11 エンプティステート
8-12 ローディングステート
8-13 エラーステート
8-14 パーシャルステート
8-15 ログ/履歴
8-16 マイページ
8-17 チャット
8-18 モーダルウィンドウ/ボトムシート
--- ここから Figma での作り方紹介あり ---
8-19 ボタン
8-20 トグルスイッチ
8-21 テキストフィールド
8-22 リスト
8-23 カード
8-24 カルーセル
8-25 モーダルウィンドウ
8-26 ボトムシート
8-27 タブバー
多くの種類が1〜2ページごとに紹介されています。Figma での作り方があるのはボタン以降です。
自分も真似して作りました。
CHAPTER 8 ではおそらく紙面の都合上ですが、コンポーネント化をあまり使っておらず、使うと効率アップと書かれているだけなので、その辺が難しく感じそうではあるかも？と思いました。
自分的にはアプリのUIを作る分にはこれだけでも十分だと感じました。
基本的にアプリ想定っぽいが
本書はあらゆるソフトウェア全般を対象にした工程の紹介であると思いますが、ハンズオン部分やリファレンスでは、基本的にはアプリ想定のデザインとなっていました。
一応私もiOSエンジニア経験が長いので、後半の章は気になるところがたくさんありました。
CHAPTER 7 で完成とするUIデザインにツッコミどころが多くあり、う〜んと思いながら読んでいました。
モーダル遷移っぽいのにナビゲージョンでpopしそうなアイコンを使っているな…とか、このデザインだと詳細画面に行けるってわからなくない？…とか…思いながら…
CHAPTER 8 のリファレンスに出てくるデザインも、エンジニア的にやめてほしいなぁと思うデザインや、よくわからない×ボタンやバックボタンがチラホラ…。ハンドルを示唆するデザインも、そこ動かせるの？と思うものがあり…。1画面のスクショで混乱するデザインが多くて、あまりサンプルに相応しいとは思えないのが残念でした。
工程が丁寧である故に、なぜ…と思ってしまいます。プラットフォームへの理解が不足しているのかもしれないと感じました。偉そうにすみません。
取り入れたい部分、取り入れない部分
以前読んだ「モデルベースUIデザイン 構造化UIと情報設計の方法論」と比較すると、同じ考えの部分もあれば、相違する部分も多くありました。
モデルベースUIデザインの本ではサイトマップは Web サイトの概念なので、他のソフトウェアには不適切という指摘があったのですが（自分もそう思う）、FigmaではじめるUXデザイン入門ではCHAPTER 6-8 に「ユーザーフロー図とサイトマップ」が紹介されており、そこではサイトマップはアプリでも使われることが書かれてしまっています。
また、モデルベースUIデザインの本にて「画面」単位で考えるのはやめようと教えられていたため、「画面」を作る工程の部分はハンズオンではやらず、読むだけにとどめました。
そもそもモデルベースUIデザインの本はの方はあまり一般的ではないとは思うので、本書の方が一般的なのだろうとは思います。ですが、一般的だから良い方法である、正解であるというのもまた違うでしょう。
本書だけにとどまらず、色んな考え方に触れ、自分自身で取り入れたい手法、取り入れない手法を選んでいきたいところです。
索引がない
残念な部分として、本書には索引がありません。
目次があれば索引はいらないという考えなのでしょうか。個人的には欲しかったです。
後から索引する体験と、本書を保管するときにサイズが横長であるため本棚に並べた時の体験があまり良くありませんでした。ただサイズが横長であることは、パソコン前に置いてハンズオンしやすいというメリットもあるので、一概にどちらが良いとは言いづらいですね。
本書を読む体験は良かったんですが、読み返す体験も良かったら嬉しかったなぁと思います。
おわりに
少し厳しい意見が多くなってしまったかもしれませんが、全体を通して良い本であったと思います。
UXデザインの全体の流れを紹介している本は多くはないでしょう。流れを掴むために必要な考え方がよくまとまっている本であると思います。
Figmaが初めての人ではなく、UIデザインが初めての人にオススメです。個人開発の人にも、サービスをデザインする流れを知ることができるのでオススメです。
ではでは。是非読んでみてください。
