この本を一言で言うと
日本語対応のFigmaで4つの作例を制作しながら、Web・UIデザインのワークフローを実践的に習得できる入門書。
この本の概要
本書はFigmaによるWebデザイン・UIデザインの制作フローを学べる入門書。日本語化されたFigmaの操作画面に対応しており、初めてFigmaを使う人も安心して学習を始められる。ポートフォリオサイト・コーポレートサイト・ECサイト・レシピアプリという4つの作例を通じて、調査・情報整理・フレームの用意・スタイル設定・プロトタイプ作成まで一連のデザイン制作フローを習得できる。株式会社neccoのクリエイターチームによる実践的な解説が特徴。
Figmaって難しそうと思っていたけど、この本ならちゃんと使えるようになった
グラフィックデザインはIllustratorとPhotoshopでやってきたんですが、Web・UIデザインへの転向を考えてFigmaを学ぼうと思いました。ただ、Figmaって独自の概念が多くて、YouTubeで断片的に見ても体系的に理解できなかった。
この本は日本語化されたFigmaの画面を使って解説してくれるので、画面を見ながら操作を確認しやすかった。ポートフォリオ・コーポレート・EC・アプリと4種類の作例があるのも良くて、作るものによってFigmaの使い方が変わるんだということがわかった。
特に役立ったのがコンポーネントとスタイルの章で、同じデザイン要素を何度も再利用する仕組みを理解してから、作業のスピードが上がりました。IllustratorやPhotoshopにはない発想で最初は戸惑いましたが、慣れると手放せなくなる機能です。
プロトタイプの作り方まで解説してくれているのも実用的で、クライアントへの提案や社内共有に使えるものが作れるようになった。2022年の本なので最新のVariables機能などは別で調べる必要があるけど、基礎固めとしては十分な内容でした。
— グラフィックデザイナーからWebデザインに転向中（26歳女性）
この本で学べること
✓
操作画面も解説も日本語化されており、Figmaを初めて使う人でも迷わず学習を進められる。
✓
ポートフォリオサイト・コーポレートサイト・ECサイト・レシピアプリという異なる種類の制作物を通じて、様々なデザイン判断を学べる。
✓
デザインを作るだけでなく、調査・情報整理・スタイル設計・プロトタイプ作成まで実務のデザインプロセス全体を習得できる。
✓
株式会社neccoのデザイナー・エンジニアチームが執筆しており、実務のワークフローに即した内容になっている。
✓
Figmaの強みであるコンポーネント・スタイル・オートレイアウトの使い方を実例を通じて習得できる。
本の目次
- 1Chapter1 Figmaの基本操作
- 2Chapter2 ポートフォリオサイトのデザイン
- 3Chapter3 コーポレートサイトのデザイン
- 4Chapter4 ECサイトのデザイン
- 5Chapter5 レシピアプリのUIデザイン
- 6Chapter6 プロトタイプの作成と共有
良い点・気になる点
良い点
- ○日本語化Figmaに完全対応しており初心者でも使いやすい
- ○4種類の作例で多様なデザイン制作フローを体験できる
- ○プロチームによる実務に即した解説
- ○Web・アプリのUIデザイン両方をカバー
気になる点
- △2022年刊行のためFigmaの最新機能（Variables等）は別途確認が必要
- △HTMLやCSSの実装技術は扱っていない
著者について
こんな人におすすめ
✓
✓
✓
よくある質問
Q. Figmaの基本操作から解説していますか？▼
A. はい。Figmaのインストールや基本的な操作方法から丁寧に解説しており、初めてFigmaを使う方でも学習を始められます。
Q. Figmaの無料プランでも学習できますか？▼
A. 基本的な学習は無料プランで進められます。チーム機能など一部の機能は有料プランが必要な場合があります。
Q. この本の後にHTMLでの実装も学べますか？▼
A. 本書はFigmaでのデザイン設計に特化した内容です。HTML/CSSによる実装は別途Web制作の書籍で学ぶことをおすすめします。
UIデザインガイドライン集
実務で使えるUIデザインのガイドラインを無料でダウンロード
※ 登録いただいたメールアドレスは資料送付にのみ使用します