概要

Figma（フィグマ）はUIデザインやモックアップ，プロトタイプの作成に便利なデザインプラットフォームです。FigmaはWeb版とアプリ版があり，無料版と有料版があります。本書は無料で使えるWeb版のFigmaを使用して，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　完成したプロトタイプを確認／共有しよう

サポート

ダウンロード

以下のサンプルファイルをダウンロードできます。圧縮ファイルをダウンロードして，解凍してご利用ください。

ダウンロード

Lesson-File.zip

Material.zip

67cafe.zip