2022年9月26日、株式会社 マイナビ出版さんから本を出版します。
『これからはじめるFigma Web・UIデザイン入門』
所属先のデザイン会社のメンバー4人で書きました。現在Amazonおよび全国の書店にてご購入いただけます📚
Contents
Figma（フィグマ）とは？
Figma（フィグマ）とは、デザインプロセスのすべての人をつなぎ、チームがより良いデジタルプロダクトをより速く提供できるようにするためのデザインコラボレーションツールです。近年では世界および日本でのシェアが高まり、デザインツールとしてたくさんのひとに利用されています。
Figmaを使いはじめたのは約2年前。Web・UIデザイン、資料デザイン、ブレスト、情報設計、紙ものデザインのラフ作成、プロトタイプ作成、記事のアイキャッチや画像の作成など、もはや仕事でFigmaを触らない日はありません。
プライベートでも頻繁に使用し、部屋の間取り図作成、画像の編集、イメージボードの作成など、その自由度の高さと操作性の高さに夢中です。Figmaを取り入れてからデザイン制作がより楽しくなりました。
そんな大好きなFigmaの本を、このたび出版することになりました。
企画、構成、編集、図版・表紙・作例デザインなど、メンバーと一緒にがんばったので、ぜひ手に取っていただけるとうれしいです！
本書の4つの特徴
本書の主な特徴は4つ。
- 日本語化対応
- 4つの作例を通じてFigmaでのデザインのながれを学べる
- チームでのFigma活用方法も紹介
- 実際のデザインデータをダウンロードして触れる
以下、それぞれの特徴について少しだけ紹介します。
まずは日本語化対応。2022年7月29日にリリースされた日本語UIに対応しています。英語UIにハードルを感じていた、これからFigmaをはじめる人も安心です。
2つ目に、本書ではポートフォリオサイト、コーポレートサイト、ECサイト、レシピアプリ、4つのデザイン作例を収録しています。それぞれのデータはダウンロードファイルをご用意しているため、デザインデータを見ながら、実際に手を動かしてFigmaの操作方法を学べます。
3つ目はチームでの活用方法です。すでにFigmaを使用しているけど、チームではまだ使ったことがない、もっとチームで活用できる方法を知りたい、デザイナー以外の職種のメンバーがFigmaを使うメリットを知りたい、そういった方のヒントにもなる内容を収録しています。
最後に、実際のデザインデータをダウンロードしていただけます（Figma的に言うとファイルのコピー）。なかなか見られないデザイン会社のデザインデータを、見て、さわって学べます。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デザイン制作体験
- ポートフォリオサイトのデザイン作成
- ファイルの準備
- 色スタイルの作成
- テキストスタイルの登録
- ボタンのコンポーネントの作成
- グローバルナビゲーションの作成
- フレームの作成
- ファーストビューの作成
- Service（サービス）セクションの作成
- Works（制作実績）セクションの作成
- About（私について）セクションの作成
- フッターの作成
- ページ全体の余白の調整
第3章 応用編 3つの作例から学ぶデザイン制作のながれ
- 3つの作例概要
- コーポレートサイト
- インテリアECサイト
- レシピアプリ
第4章 活用編 チームでのFigma活用とペアデザイン
- チーム制作に向いているFigmaの特徴
- チームで利用できるFigmaの5つの便利な機能
- Figmaを使ったペアデザイン
- 職種を越えたコラボレーション
- 便利なツール連携
3章では、コーポレートサイト作例を通じてFigmaを使ったデザイン制作の進め方、EC作例を通じてECサイトデザインのポイントやFigmaを使った画像編集の方法、レシピアプリ作例を通じてUIデザインのポイント、プロトタイプの作成方法などを学びます。
このほか、デザインでよく使うショートカットなども少し紹介しています。
1章から4章まで読み終えると、Figmaの基本的な操作方法から実際のウェブサイト・UIデザイン制作での活用方法、チームでの活用方法などを知れる構成になっています。
おわりに
デザインの書籍を地元・三重県の図書館で週10冊ほど借りあさっていたのが4年前。当時は「デザイナーになるわけじゃないし、趣味だし、借りれるだけ借りて楽しもう」と思ってました。しかし気づけばデザインの魅力から離れられず、半年後に転職。
その約1年後には自主制作でうすい本を作って販売。24ページとうすい本ではあるものの、「本」を自分で0から作ること、入稿・印刷手配をして販売の準備をすること、多くの人の手に取ってもらえることに楽しさを感じました。当時の体験や学びには大きな価値があったものの、仕事をしながらの制作は大変さもあり「たぶんもう作らない」と思ってました。
それが今年、会社のなかまと書籍を作り、出版社さんを通じて全国流通。だれもが立ち寄る書店の棚に、自分たちの本が並ぶ日がくるとは。
人生って何があるかわからないし、1冊の本、小さなできごとで大きく変わるものです。
「これからデザインをはじめたい」「Figmaを使ってみたい」という方は、ぜひ手に取ってみてくださいね！
