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