Figma（フィグマ）はUIデザインやモックアップ、プロトタイプの作成に便利なデザインプラットフォームです。FigmaはWeb版とアプリ版があり、無料版と有料版があります。本書は無料で使えるWeb版のFigmaを使用して、Webサイトのモックアップとプロトタイプ作成の手順を解説します。 Chapter0　Figmaについて知ろう 01　Figmaの特徴を確認しよう 02　アカウントを登録しよう 03　Figmaのインターフェースを確認しよう 04　画面表示とモードを切り替えよう 05　お手本ファイルをダウンロードしよう 06　お手本ファイルを読み込もう Chapter1　ロゴを作ろう 01　新規ファイルを作ろう 02　フレームを作ろう 03　角丸四角形を描こう 04　半円を描こう 05　オブジェクトを複製＆変形しよう 06　曲線を描こう 07　塗りと線を設定しよう 08　文字を入力しよう 09　グループ化して書き出そう Chapter2　バナーを作ろう 01　ページを追加しよう 02　バナーの背景にグラデーションを設定しよう 03　ロゴを配置しよう 04　直線を描こう 05　バナーに文字を入力しよう 06　フレームを画像として書き出そう Chapter3　レイアウトのベースを作ろう 01　ページとフレームを作って準備しよう 02　レイアウトガイドを設定しよう 03　画像やボタンの場所を決めよう 04　テキストボックスで文字を入力しよう Chapter4　パーツを作ってレイアウトしよう 01　色のルールを色スタイルに登録しよう 02　フォントのルールをスタイルに登録しよう 03　ボタンを作ろう 04　アイコンと大見出しを作ろう 05　ヘッダーを作ろう 06　ヘッダーのメニューが開いた状態を作ろう 07　フッターのベースを作ろう 08　お知らせエリアのベースを作ろう 09　コンテンツカードのベースを作ろう Chapter5　トップページのデザインを完成させよう 01　コンポーネントを複製して配置しよう 02　フッターを完成させよう 03　メイン画像エリアを作ろう 04　お知らせとコンテンツカードを作ろう 05　原稿を流し込もう 06　データを調整しよう Chapter6　下層ページとプロトタイプを作ろう 01　下層ページを作ろう 02　ボタンにバリアントを設定しよう 03　プロトタイプで画面どうしをつなごう 04　インタラクションでハンバーガーメニューの開閉を設定しよう 05　バリアントにコネクションの設定をしよう 06　完成したプロトタイプを確認／共有しよう