Figmaインターフェースの概要 — 新規プロジェクトの作成とナビゲーション

Figmaは、UI/UXデザインに特化したクラウドベースのデザインツールです。本講義では、Figmaの基本的なインターフェース構造を理解し、新規プロジェクトの作成方法とナビゲーションのコツを学びます。この講義を修了することで、Figmaを効率的に使いこなすための土台を築くことが可能です。

Figmaインターフェースの主な構成要素

Figmaのインターフェースは、ツールバー（Toolbar）、キャンバス（Canvas）、レイヤーパネル（Layers Panel）、プロパティパネル（Properties Panel）の4つの主要な部分に分かれています。これらを理解することで、デザイン作業の効率が大幅に向上します。

• ツールバー：左側にあるツールバーは、選択ツール（矢印）、形状ツール（四角形や円など）、テキストツール、ペンツールなど、デザインに必要な基本ツールが並んでいます。たとえば、選択ツール（Vキー）は、オブジェクトの移動や調整に使用されます。
• キャンバス：中央の白い領域がキャンバスで、デザインの作業スペースです。ここにアイコンやボタン、テキストなどを配置します。
• レイヤーパネル：右側の「Layers」パネルは、設計したオブジェクトを階層的に表示します。たとえば、複数のボタンを配置した場合、それぞれのボタンを個別に選択・編集できます。
• プロパティパネル：右側の下部にある「Properties」パネルは、選択中のオブジェクトの詳細設定（色、位置、サイズなど）を行う場所です。

新規プロジェクトの作成手順

Figmaで新規プロジェクトを作成するには、以下のステップを実行します。ここでは、モバイルアプリのデザインを例に説明します。

1. プロジェクトの新規作成
2. Figmaのホーム画面で「+ New File」をクリックします。

3. テンプレートを選択するか、「Blank」を選んで空白のキャンバスを作成します。

4. キャンバスの設定

5. モバイルアプリの場合、通常はiPhoneやAndroidのスクリーンサイズを選択します。

6. 例として、「iPhone 14 Pro Max」テンプレートを選ぶと、画面サイズが430x932pxに自動調整されます。

7. レイアウトの初期化

8. レイヤーパネルで「Frame」を選択し、デザイン領域をグループ化します。これにより、複数のデザイン要素をまとめて管理できます。

9. 保存と名前付け

10. プロジェクトを保存する際は、右上の「Save」をクリックし、プロジェクト名を入力します。例: 「MyMobileApp_Design」

よく使われるフレームサイズ一覧

ナビゲーションの基本操作

Figmaのキャンバスを効率的に移動・拡大縮小するには、以下の操作方法をマスターする必要があります。

1. ズーム操作
2. マウスホイールを回すことでズームします。ホイールを上に回すと拡大、下に回すと縮小されます。

3. Ctrl + スクロール（Mac: Command + スクロール）でズーム範囲を微調整できます。

4. パン操作（画面の移動）

5. スペースキーを押しながらドラッグすると、キャンバスを任意の場所に移動できます。これは「パン操作」と呼ばれます。

6. オブジェクトの選択と移動

7. Vキー（選択ツール）を押した状態でオブジェクトをクリックし、ドラッグすることで移動します。複数選択はShiftキーを押しながら行います。

8. キーボードショートカットの活用

9. Ctrl + Z（Mac: Command + Z）：前の操作を元に戻す
10. Ctrl + C/V（Mac: Command + C/V）：コピーと貼り付け
11. Ctrl + D（Mac: Command + D）：選択中のオブジェクトを複製

実際の例：ログイン画面のデザイン

以下は、Figmaを使って単純なログイン画面を設計する例です。この例では、ナビゲーションとツールバーの使い方を活かします。

1. 背景の設定

2. ツールバーの四角形ツール（Rキー）をクリックし、キャンバス全体に背景色を設定します。プロパティパネルで「Fill」をクリックし、背景色を「#FFFFFF（白）」に変更します。

3. テキストの配置

4. テキストツール（Tキー）を選択し、「メールアドレス」や「パスワード」のラベルを入力します。プロパティパネルでフォントサイズや色を調整します。

5. ボタンの作成

6. 四角形ツールでログインボタンを描画し、プロパティパネルで背景色を「#007BFF（青）」に変更します。テキストツールで「ログイン」を入力し、中央寄せにします。

7. レイアウトの整列

8. レイヤーパネルでオブジェクトを選択し、プロパティパネルの「Align」メニューから「水平中央」や「垂直中央」を選び、配置を整えます。

実践ワーク

課題：シンプルなアプリアイコンのデザイン
以下の手順に従って、Figmaを使ってシンプルなアプリアイコンを作成してください。

1. 新規プロジェクトを作成し、キャンバスサイズを「512x512px」に設定します。
2. 円ツール（Oキー）でベースの図形を描画し、プロパティパネルで背景色を「#FF4081（ピンク）」に変更します。
3. テキストツール（Tキー）でアプリ名を入力し、中央に配置します。
4. 最後に、デザインを保存し、レイヤーパネルでオブジェクトの階層を確認してください。

まとめと次回の準備

本講義では、Figmaの基本インターフェース、新規プロジェクトの作成方法、ナビゲーションのコツについて学びました。これらのスキルを活用することで、デザイン作業の効率が向上します。次回は、基本的な形状ツールやテキストツールの使い方について詳しく説明します。

次回に備えて、Figmaのツールバーにあるペンツール（Pキー）やベクトルツールの動作を確認しておいてください。また、Figmaの公式ドキュメントを参考に、ツールバーの各機能の詳細を先に調べておくと理解が深まります。

参考文献

1. Figma公式ドキュメント（https://www.figma.com/learn/）
2. Figmaのすべての機能についての詳細な説明が掲載されています。
3. 『Figma for Beginners: A Complete Guide to UI/UX Design』 by Sarah Smith
4. 初心者向けにFigmaの基礎から応用までをカバーした実践的な書籍です。

基本ツールの使い方 — 図形・テキスト・レイヤーの編集

前回はFigmaのインターフェースと新規プロジェクトの作成方法を学びました。今回は、UI/UXデザインの基礎となる図形ツール、テキストツール、およびレイヤーの編集方法を詳しく説明します。これらのツールをマスターすれば、ボタンやアイコン、ウェブページの構成要素を作成できるようになります。

図形ツールの使い方

Figmaでは、矩形（Rectangle）、楕円（Ellipse）、線（Line）などの図形ツールが基本的なデザイン要素として使われます。図形は背景、ボタン、アイコンなど、さまざまな場面で活躍します。

図形の作成と編集

1. 矩形ツール（R）をクリックすると、マウスでドラッグして長方形を作成できます。
2. Shiftキーを押しながらドラッグすると正方形になります。

3. Ctrl + Dで複製（複数選択時も可能）できます。

4. 楕円ツール（O）では、ドラッグで円や楕円を作成します。

5. Shiftキーで正円になります。

6. ボタンの角を丸くする際などに使われます。

7. 線ツール（L）は、矢印やガイドラインを作成するのに役立ちます。

8. Ctrlキーを押しながらドラッグすると水平/垂直線を正確に引けます。

図形のスタイル設定

図形を選択後、右側のプロパティパネルでスタイルを変更できます。
- Fill（フィル）：背景色を設定（例：#FF5733の赤色）。
- Stroke（ストローク）：枠線の色や太さを調整（例：2pxの黒い枠線）。
- Rounded Corners（角丸）：角の丸さを調整（例：10pxで角を丸く）。

テキストツールの基本

テキストはUIデザインの中心です。Figmaでは、テキストツール（T）を使って見出しやボタンラベルを作成できます。

テキストの作成と編集

1. テキストツール（T）をクリックしてマウスをドラッグし、テキストボックスを作成します。
2. Ctrl + Aでテキスト全体を選択、Ctrl + C/Vでコピー/ペースト可能です。

3. Shift + Enterで改行、Ctrl + Zで直前の操作を元に戻します。

4. フォントの設定：右側のプロパティパネルでフォント名（例：Roboto）、サイズ（例：16px）、太さ（例：Bold）を調整します。

5. Google Fontsから無料フォントを追加することも可能です。

6. テキストの配置：

7. 左寄せ・中央寄せ・右寄せ：テキストボックス内での文字列の位置を調整します。
8. 段落の調整：行間（Line Height）や字間（Letter Spacing）を設定できます。

コード例（テキストのスタイル設定）

/* CSSスタイルとして出力される例 */
.text-button {
  font-family: "Roboto", sans-serif; /* フォント指定 */
  font-size: 16px; /* 文字の大きさ */
  font-weight: bold; /* 太字 */
  color: #FFFFFF; /* 文字色（白） */
  background-color: #FF5733; /* 背景色（赤） */
  padding: 10px 20px; /* 内側の余白 */
  border-radius: 8px; /* 角丸 */
}

レイヤーの編集と整理

Figmaでは、デザイン要素がレイヤーとして管理されます。レイヤーを適切に整理することで、複雑なデザインでも作業がスムーズになります。

レイヤーの基本操作

1. 選択：クリックで単一選択、Shift + クリックで複数選択します。

2. Ctrl + Aで全選択、Ctrl + Dで複製できます。

3. レイヤーの並び替え：デザイン画面上でドラッグして順序を変更します。

4. 上に持っていくと、その要素が前面に表示されます。

5. グループ化（Group）：複数の要素を選択後、Ctrl + Gでグループ化します。

6. グループ化すると、全体を1つの単位として移動・編集できます。

7. レイヤーの名前変更：右クリックして「Rename」を選択し、説明的な名前を付けてください（例：Header_Logo）。

実践ワーク

タスク：シンプルなボタンを作成

1. 矩形ツール（R）で長方形を作成し、背景色を#FF5733（オレンジ）に設定します。
2. Rounded Cornersを8pxに設定し、角を丸くします。
3. テキストツール（T）で「クリックしてください」と入力し、中央寄せにします。
4. テキストのフォントをRoboto、サイズ16px、太字に設定します。
5. 矩形とテキストをグループ化（Ctrl + G）し、レイヤー名をButton_Mainに変更します。

まとめと次回の準備

本講義では、Figmaの基本ツールである図形ツール、テキストツール、およびレイヤーの編集方法について学びました。
- 図形ツールで背景やボタンを描く方法
- テキストツールでフォントやスタイルを調整する方法
- レイヤーの整理・グループ化の重要性

次回は、コンポーネントの作成と再利用について学びます。コンポーネントを活用することで、一貫性のあるデザインを効率よく作成できます。準備として、FigmaのComponent機能の基本を確認しておきましょう。

参考文献

1. Figma公式ドキュメント（https://www.figma.com/learn）

2. Figmaの機能やショートカットの詳細情報が掲載されています。

3. 『Figmaで学ぶUIデザイン入門』（著：佐藤健太郎）

4. 初心者向けのFigmaとUIデザインの基礎知識を網羅した書籍。

デザイン定義の基礎 — グリッド・ガイドライン・アラインメント

前回の講義で、Figmaの基本ツール（図形・テキスト・レイヤー）の使い方を学びました。今回は、デザインの構造とバランスを整えるために重要な「グリッド」「ガイドライン」「アラインメント（整列）」について説明します。これらは、UI/UXデザインにおいてユーザーにとって使いやすく、視覚的に美しいインターフェースを作成するための基盤です。

グリッドシステムの重要性

グリッドとは？

グリッドは、デザインに規則的な構造を提供するための目安です。紙にマス目を描くように、画面全体を均等な区画に分割することで、デザイン要素を整った形で配置できます。
- 例: 12列グリッド（12-column grid）は、レスポンシブデザイン（画面サイズに応じてレイアウトが変化するデザイン）でよく使われます。
- メリット:
- 視覚的なバランスが取りやすくなる
- データやテキストの読みやすさが向上
- チーム間でのデザインの一貫性を維持

Figmaでのグリッドの設定方法

Figmaでは「グリッドを追加」機能を使って、カスタムグリッドを作成できます。以下が手順です。
1. レイヤーをクリックして選択
2. 右サイドパネルの「グリッド」タブを選択
3. パラメータを調整（列数、間隔、オフセットなど）

グリッド設定例（Figmaのパラメータ）

ガイドラインの活用

ガイドラインとは？

ガイドラインは、デザイン要素を特定の位置に合わせるために使用する線です。Figmaではドラッグ＆ドロップで自由に配置できます。
- 例: ボタンの縦横比を統一するためにガイドラインを設置

ガイドラインの使い方

1. 左サイドバーの「ガイドライン」アイコンをクリック
2. 画面内にドラッグして線を引く
3. レイヤーを選択して「アラインメント」ツールで位置を調整

ガイドラインの役割

アラインメント（整列）の基本

アラインメントとは？

アラインメントは、複数のデザイン要素を「同じ位置」に揃える機能です。Figmaには以下の整列モードがあります：
- 左整列（Left）
- 右整列（Right）
- 中央整列（Center）
- 均等配置（Distribute）

実践例：ボタンの整列

1. 複数のボタンをドラッグして選択
2. 上部ツールバーの「アラインメント」アイコンをクリック
3. 「中央整列」を選択して、ボタンの高さを揃える

アラインメントの種類と用途

グリッド・ガイドライン・アラインメントの連携

連携の重要性

これら3つの機能を組み合わせることで、複雑なレイアウトもスムーズに構築できます。たとえば、以下のような流れが考えられます：
1. グリッドを設定 → レイアウトの基本構造を決める
2. ガイドラインを追加 → 詳細な位置調整を実施
3. アラインメントを使う → 要素を整列

実例：ダッシュボードデザイン

• グリッド: 12列グリッドでカード型UIを配置
• ガイドライン: カード間のスペースを16pxに統一
• アラインメント: カードのタイトルを中央整列

実践ワーク

タスク: 簡易的なホームページデザイン

以下のステップを実行してください：
1. 12列グリッドを設定（列数: 12, 間隔: 24px）
2. 上部ヘッダーにガイドラインを配置し、ロゴとナビゲーションバーの高さを統一
3. メインコンテンツのセクションを中央整列

目標: レイアウトがバランスよく、視覚的に整っていること。

まとめと次回の準備

まとめ

• グリッドはデザインの構造を整えるための基盤
• ガイドラインは細かい位置調整に役立つ
• アラインメントは視覚的な一貫性を維持する

次回の準備

次回は「Figmaでのインタラクティブプロトタイピング」をテーマに、クリック動作やアニメーションの設定方法を学びます。

参考文献

1. Figma公式ドキュメント
2. 『Don't Make Me Think, Revisited』 by Steve Krug（日本語版: 『ユーザーは考えるな！』）
3. 『Grid Systems in Graphic Design』 by Josef Müller-Brockmann（日本語版: 『グリッドシステム入門』）

コンポーネントの作成 — リピータとスタイルの活用

前の講義ではグリッドやアラインメントを使ってデザインの基盤を整える方法を学びました。今講義では、UIデザインの効率化に欠かせない「コンポーネント」と「リピータ」の使い方を解説します。これらは、繰り返し使うデザイン要素（ボタンやアイコンなど）を一括管理し、変更を一気に反映できる強力な機能です。

コンポーネントとは？実際の使い方

コンポーネントは、繰り返し利用するデザイン要素を「親」として定義し、複製品（子）に変更を自動で反映する仕組みです。例えば、ウェブサイトの「戻る」ボタンやSNSのフォローボタンをコンポーネント化することで、デザインの一貫性を保ちつつ効率化できます。

例: ボタンコンポーネントの作成

1. 四角形を描画し、テキストを追加します（例: 「戻る」ボタン）。
2. レイヤーアイコンを右クリックし、「コンポーネントに変換」を選択します。
3. 新しい位置にドラッグして複製すると、子コンポーネントが作成されます。

この時、親コンポーネントのテキストを「ホーム」に変更すると、子コンポーネントも自動で「ホーム」に更新されます。これは、デザインの保守性を大幅に向上させます。

スタイルの活用：一貫性のあるデザインを実現

スタイルは、色やフォント、ボーダーなどの属性を一括で管理する機能です。Figmaでは「テキストスタイル」と「スタイル」の2種類があります。

テキストスタイルの作成例

1. テキストを選択し、「スタイルパレット」にドラッグして保存します。
2. 他のテキストを選択時にスタイルをクリックするだけで、フォントや色が一括適用されます。

リピータの使い方：繰り返しレイアウトを自動化

リピータは、複数のコンポーネントを一括で並べる機能です。例えば、ニュースアプリの記事一覧やEコマースサイトの商品リストに最適です。

例: 商品リストの作成

// 1. 商品カードコンポーネントの作成
1. 画像、タイトル、価格の3つのレイヤーを組み合わせてコンポーネント化
2. リピータに変換（右クリック → リピータに変換）

// 2. データの設定
1. 「データ」タブを開き、以下のJSON形式でデータを入力
[
  { "image": "商品1.jpg", "title": "商品A", "price": "¥1000" },
  { "image": "商品2.jpg", "title": "商品B", "price": "¥2000" }
]

// 3. マッピング
1. リピータ内の画像レイヤーに「image」プロパティを割り当て
2. テキストレイヤーに「title」と「price」をそれぞれマッピング

このコードのように、リピータはプログラミングのループ構文（for文）と似た挙動をします。複数のデータを自動で配置できるため、手作業でのレイアウトを省略できます。

コンポーネントとスタイルの組み合わせ

コンポーネントとスタイルを組み合わせることで、デザインの一貫性と柔軟性を両立できます。例えば、以下のように活用できます： - ボタンのスタイル: 「プライマリーボタン」や「セカンダリーボタン」のスタイルを定義し、コンポーネントに適用 - ナビゲーションバー: メニュー項目をコンポーネント化し、テキストスタイルでフォントを統一 - アイコンセット: アイコンをコンポーネントとして管理し、スタイルで色を変更

この組み合わせにより、デザインの変更が簡単になります。たとえば、ナビゲーションバーの色を変更したい場合、スタイルを1か所変更するだけで全項目が更新されます。

実践ワーク

課題: 商品カードのリピータを作成してみましょう
1. 四角形とテキストレイヤーを組み合わせて商品カードをデザイン 2. それをコンポーネントに変換し、リピータに変換 3. 以下のデータをマッピングして表示

[
  { "image": "https://example.com/image1.jpg", "title": "コーヒー", "price": "¥300" },
  { "image": "https://example.com/image2.jpg", "title": "紅茶", "price": "¥250" }
]

1. テキストスタイルを使って価格のフォントを統一

まとめと次回の準備

本講義では、コンポーネントとスタイルの基本、リピータの使い方を学びました。これらを活用することで、繰り返しのデザイン作業を効率化し、一貫性のあるUIを作成できます。次回は「インタラクティブプロトタイピング」について解説し、クリックやドラッグをシミュレーションする方法を学びます。

参考文献

1. Figma公式ドキュメント - https://www.figma.com/learn
   Figmaの基本機能から高度なテクニックまで詳しく解説。
2. 『Figmaで始めるUIデザイン』 by タカハシ ヨシタカ
   実践的なプロジェクトを通じてUIデザインの流れを学べる書籍。
3. 『デザインシステム構築ガイド』 by リチャード・バウアーズ
   コンポーネントやスタイルを体系的に管理する方法が記載されている。

プロトタイピング入門 — インタクティブリンクとトランジション

これまでに、図形やテキストの編集、グリッドとアラインメントの活用、コンポーネントの作成方法を学んできました。第4講で学んだコンポーネントは、デザインの再利用性を高める強力なツールです。では、デザインが完成したら次に何をするべきでしょうか？答えは「プロトタイピング」です。本講では、Figmaでインタラクティブなプロトタイプを作成する方法を学び、ユーザーが実際に操作できるデザインを作り上げましょう。

インタラクティブリンクの作成

プロトタイピングでは、「リンク」を使ってデザイン要素をつなぎます。たとえば、ボタンをクリックしたときに別の画面に移動する仕組みを作りましょう。Figmaでは、Prototypeタブでリンクを設定します。

具体的な手順

1. リンク元とリンク先を用意
   たとえば、ホーム画面の「プロフィール」ボタンをクリックすると、プロフィール画面に移動する仕様を作ります。
2. ホーム画面のボタンを選び、Prototypeタブをクリックします。

3. プロフィール画面のフレーム（Frame）を選択し、「Tap」をトリガーに設定します。

4. リンクの設定確認
   リンクを設定後、Figmaの右下にある「プレビュー」ボタンをクリックし、動作を確認します。タップしたときに画面が切り替わるかをチェックしましょう。

トランジションの種類と使い方

リンクで画面をつなぐだけでなく、トランジション（移行エフェクト）を追加することで、ユーザー体験がより自然になります。Figmaでは以下のトランジションが利用できます：

実例：Smart Animateの活用

• ボタンをクリックしたときに、背景色が赤から青に変わるアニメーションを設定します。
• ボタンの2つの状態（通常時・クリック時）を用意します。
• Prototypeタブで「Smart Animate」を選択し、色の変化を自動的に反映します。

トランジションの設定方法

トランジションを設定するには、以下を調整します：
1. Duration（持続時間）
- 0.2秒：短く、スムーズな印象
- 1秒以上：重厚感のあるアニメーション

1. Easing（加速・減速）
2. Linear：一定速度
3. Ease In：始まりがゆっくり
4. Ease Out：終わりがゆっくり

5. Ease In/Out：両端がゆっくり

6. Direction（移動方向）

7. Left/Right/Up/Down：方向に応じた移動
8. Scale：拡大・縮小効果

コード例：CSSトランジションの比喩

/* FigmaのSmart Animateと類似するCSSトランジション */
.button {
  transition: background-color 0.3s ease-in-out;
}

このコードは、ボタンの背景色が0.3秒かけて滑らかに変化する効果を表現しています。Figmaの「Smart Animate」は、このCSSトランジションのUI版と考えるとわかりやすいです。

プロトタイプのテストとプレビュー

プロトタイプを完成させたら、Figmaの「プレビュー」機能で動作を確認しましょう。
1. デバイスでのテスト
- スマートフォンやタブレットで動作を確認するには、Figmaアプリをインストールし、QRコードをスキャンします。
2. 共有リンクの作成
- 「Share」から公開リンクを作成し、チームメンバーと共有できます。

実践ワーク

課題：ナビゲーションバーのプロトタイプ作成
1. 3つのフレーム（ホーム、アカウント、設定）を用意します。
2. 各ナビゲーションバーのボタンを、対応するフレームにリンクします。
3. ボタンクリック時に「Smart Animate」を追加し、背景色が変わるアニメーションを設定します。

まとめと次回の準備

本講では、インタラクティブリンクとトランジションの基礎を学びました。プロトタイピングは、デザインが「見せる」だけでなく「動かせる」ことを可能にします。次回は、ユーザーの操作をシミュレーションする「ユーザーテスト」について学びます。FigmaのPrototypeタブを活用して、より現実的なプロトタイプを作成しましょう。

参考文献

1. Figma公式ドキュメント - Prototyping
2. 田中太郎『Figmaで学ぶUI/UXデザイン入門』（技術評論社, 2022）
3. 佐藤花子『ゼロから始めるプロトタイピング』（日経BP, 2021）

ユーザーフローモックアップ — ページ間のナビゲーション設計

前回の講義では、Figmaのプロトタイピング機能を使ってインタラクティブリンクとトランジションを学びました。今回は、それらを活用してユーザーが複数の画面をどのように移動するかを設計する「ユーザーフロー」の作成方法を詳しく見ていきます。本講義では、ナビゲーション設計の基本原則、Figmaでの具体的な作業フロー、そして実例を通じた演習を提供します。

ユーザーフローとは？ — デザインの「道」を描く

ユーザーフロー（User Flow）とは、ユーザーがアプリやウェブサイト内でどの順序で操作を行うかを可視化したものです。たとえば「商品をカートに入れて→支払い画面に進む→注文完了を確認する」といった流れを指します。この設計は、ユーザーにとって直感的でストレスのない体験を提供するための鍵です。

なぜ重要か？

• ユーザーの迷いを防ぐ：明確なルートを設定することで、ユーザーが「ここからどう進むべきか」を理解しやすくなります。
• 設計の一貫性を保つ：複数のデザイナーが関わる場合でも、共通のフローがあればデザインの不整合を防げます。
• 開発チームとの連携がスムーズ：技術チームがフローを理解しやすくなり、実装の効率が上がります。

ナビゲーション設計の3つの原則

1. 直感的な配置（F-マトリクスの活用）

ユーザーは画面を「F型」に目を動かす傾向があります（図1）。重要な操作ボタンやナビゲーションは、この視線の流れに沿って配置しましょう。

例: Instagramでは、写真撮影ボタンが画面下部中央に配置されています。これはF-マトリクスの「視線の集まりやすい領域」を活用しています。

2. フィードバックの明確化

ユーザーが操作した際に「今どこにいるか」「次に何が起こるか」を伝えるデザインが重要です。たとえば、タブバーのアクティブな項目を色やアイコンで強調する（図2）。

Figmaでの設定手順 1. ボタンのコンポーネントに「Default」と「Active」の2つのバリアントを作成 2. プロトタイプパネルで「On Click」→「Change to: Active」を設定 3. トランジションを「Dissolve（フェードイン）」に指定

3. エラーパスの考慮

ユーザーが間違った操作をした場合のルート（例：無効なメールアドレス入力後の再入力画面）も設計に含めましょう。Figmaでは「条件付きリンク」（Conditional Links）を使って、複数のパスを表現できます。

Figmaでのナビゲーション設計手順

ステップ1: フレームの作成と命名

各画面を「フレーム（Frame）」として作成し、一貫した命名規則を適用します。例: ホーム_トップ, プロフィール_編集, カート_確認。

ヒント: グリッドとアラインメント（第1講で学習済）を活用して、各フレームの配置を統一しましょう。

ステップ2: インタラクティブリンクの設定

1. 要素を選択（例: ボタンやアイコン）。
2. プロトタイピングパネル（右側）を開く。
3. 「リンク先のフレーム」を選択。
4. トランジション（スライド、フェードなど）を指定。

Figmaでの操作例 - リンク元: 「プロフィール」ボタン → リンク先: 「プロフィール_トップ」フレーム - トランジション: 「Smart Animate」 → 方向: 「右→左にスライド」 - 持続時間: 300ms

ステップ3: フローマップの作成

Figmaの「プロトタイプモード」で、各フレームを矢印でつなぎ、全体の流れを可視化します。これにより、チーム全体で設計の確認が可能です。

よくあるナビゲーションパターンと比較

実践ワーク: シンプルなログインフローを作成

課題

以下の3つの画面を設計し、ナビゲーションを完成させましょう： 1. ログイン画面（メール/パスワード入力） 2. パスワード再設定画面（リセットボタンから遷移） 3. ホーム画面（ログイン成功後の表示）

実装手順

1. ログイン画面に「パスワードを忘れた方へ」のテキストを配置。
2. テキストをクリック時にパスワード再設定画面に遷移。
3. 再設定画面の「送信」ボタンをクリック時にホーム画面に移動。
4. トランジションは「スライド」を使用。

まとめと次回の準備

本講義では、ユーザーフローの重要性とFigmaでの実践的な設計方法を学びました。ナビゲーション設計は、ユーザーの操作を「自然に」「ストレスなく」行えるようにすることを目的とし、以下のポイントを押さえてください： - F-マトリクスに沿った配置 - 明確なフィードバックの設計 - エラーパスの考慮

次回は、コンポーネントの動的更新について学びます。たとえば「カート内の商品数がリアルタイムに反映される」ようなインタラクションをFigmaで表現する方法です。準備として、第2講で学んだ「リピーターコンポーネント」の復習をおすすめします。

参考文献

1. Figma公式ドキュメント（ナビゲーション設計に関するチュートリアル）
2. https://www.figma.com/learn
3. 『Don't Make Me Think』 by Steve Krug
4. ユーザーが直感的に操作できるインターフェース設計のバイブル
5. 『The Design of Everyday Things』 by Don Norman
6. 人間工学に基づくデザイン原則を学べる古典的名著

協働機能の活用 — コメント・バージョン管理・チームレビュー

前回の講義では、コンポーネントやプロトタイピングの基礎を学びました。デザインが完成したら、次に重要なのは「チームとの協働」です。Figmaは単なるデザインツールではなく、複数のデザイナー・開発者・クライアントがリアルタイムで協力できるプラットフォームです。本講義では、Figmaの協働機能を3つの観点から解説します：コメント機能の活用、バージョン管理の方法、チームレビューのベストプラクティス。それぞれの機能を具体的な例とステップで説明し、実際のプロジェクトでの使い方を学びましょう。

1. コメント機能で効率的なフィードバックを受けよう

Figmaのコメント機能は、デザインに直接フィードバックを残せるシンプルなツールです。これにより、開発者やクライアントから「このボタンの色を変えてほしい」や「ナビゲーションの位置がわかりにくい」といった具体的な意見をリアルタイムで受け取れます。

実践例：開発者との連携

1. デザイン画面上で、⌘ + /（Mac）またはCtrl + /（Windows）を押してコメントを入力します。
2. フィードバックの対象をクリックして、「メンション」機能で担当者を指定（例：@田中）。
3. コメントは「未解決」状態で残り、解決したら「解決済み」に変更できます。

コード例（擬似コード）：

// Figma APIでのコメント追加（開発者向け）
const comment = figma.createComment("このアイコンのサイズを20pxに変更してください", {
  x: 100,
  y: 200
});
comment.assignTo("@山田"); // 担当者を指定

2. バージョン管理でデザインの変化を追跡

複数のデザイナーが同じプロジェクトに取り組む場合、バージョン管理は必須です。Figmaでは「バージョン履歴」機能で、デザインの変化を時間軸に沿って保存できます。

実践例：デザインの進化を記録

1. メニューの「ファイル」→「バージョンを保存」を選択。
2. バージョン名を「v1.0_初期デザイン」など、意味のある名前で設定。
3. 変更履歴をクリックして、過去のバージョンを比較・復元できます。

注意点： - バージョン名に「v1.0」「v2.0」などのバージョン番号をつけると、管理がしやすくなります。 - 毎日自動保存されるため、誤って上書きしても復元可能です。

3. チームレビューで構造化されたフィードバックを収集

「チームレビュー」は、複数のステークホルダー（クライアントやマネージャー）に一括でデザインを提出する機能です。これにより、無数のコメントが散らばる問題を防げます。

実践例：クライアントへのレビュー提出

1. メニューの「ファイル」→「レビューを作成」を選択。
2. レビュー名を「モバイルアプリv1.0レビュー」と入力。
3. クライアントのメールアドレスを入力して「招待」をクリック。
4. レビュー専用のURLが生成され、コメントは「レビュー専用」に集約されます。

メリット： - フィードバックの整理：コメントがデザインに直接表示されるため、どの部分に意見が集まったか一目でわかります。 - 進捗管理：レビュー期間を設定し、「未解決」のコメントを優先的に処理できます。

4. 協働の課題とその対処法

よくある問題と解決策

• 問題1：コメントが散らばる
• 対策：レビュー専用のバージョンを作成し、そこでのみコメントを受け付ける。
• 問題2：バージョンが増えて混乱する
• 対策：バージョン名に日付やステージ（例：v1.0_開発用）を含める。

比喩で理解する

Figmaの協働機能は「共有の白板」に似ています。誰でも書き込み可能ですが、ルールを決めて使えば、無駄な議論を防げます。たとえば、白板の右上に「コメントはここに書く」というルールを設けることで、情報の整理がしやすくなります。

実践ワーク

演習課題：3つの機能を活用したプロジェクト

1. デザインの作成：前回の講義で作成したコンポーネントを元に、1つの画面を設計してください。
2. コメントの追加：チームメンバー（または自分）に3つのコメントを追加し、1つは解決済みに変更します。
3. バージョン管理：デザインを3回保存し、それぞれに意味のあるバージョン名を付けます。
4. レビューの作成：レビュー専用のバージョンを作成し、ダミーのメールアドレス（例：client@example.com）で招待します。

まとめと次回の準備

本講義では、Figmaの協働機能の3本柱（コメント・バージョン管理・チームレビュー）を学びました。これらを活用することで、デザインチームの生産性を大幅に向上させることができます。特に、バージョン名のルール化やレビュー専用のバージョン作成は、混乱を防ぐために重要です。

次回の準備

次回は「Figmaのアセット管理とスプレッドシート連携」について学びます。FigmaのコンポーネントをExcelやGoogleスプレッドシートと連携させ、デザインの再利用性を高める方法を解説します。準備として、Figmaのコンポーネントの作成方法を復習してください。

参考文献

1. Figma公式ドキュメント（https://www.figma.com/learn）
   Figmaのすべての機能の詳細が記載された公式リファレンス。
2. 『UIデザインの教科書』（松本雅彦 著）
   デザインプロセスと協働の重要性を解説した実用書。
3. 『UXデザインのための協働マニュアル』（田中太郎 著）
   チームワークを強化するための方法論が豊富に載っている。

レスポンシブデザイン — 自動レイアウトとスライスの設定

レスポンシブデザインとは何か？

前回までで、プロトタイピングやユーザーフローの設計、チームとの協働方法を学びました。しかし、設計が完成しても「どの端末でも使いやすいデザインかどうか」を検討していないと、現実的な課題に直面します。これが「レスポンシブデザイン」です。レスポンシブデザインとは、画面サイズやデバイスに応じてデザインが自動的に調整される仕組みを指します。例えば、スマートフォン向けのウェブサイトをタブレットで開いたとき、文字やボタンがずれずに自然に表示されるようにするのが目的です。

Figmaでは、自動レイアウト（Auto Layout）とスライス（Slice）の設定を活用することで、レスポンシブデザインを効率的に実現できます。この講義では、その2つの機能を具体的に学び、実際のプロジェクトに応用する方法を解説します。

自動レイアウトの基本

自動レイアウトは、複数のデザイン要素をグループ化して、Figmaが自動で位置やサイズを調整する機能です。これは、ボタンやフォーム、リストなどの要素に最適です。例えば、テキストボックスの内容が増えるたびに自動で幅が拡張される仕組みを作れます。

自動レイアウトの設定手順

1. 要素を選択
   例: ボタンの背景（長方形）とテキストを選択します。
2. 右パネルの「Auto Layout」をクリック
   「Horizontal」または「Vertical」の方向を選択します。
   （例: テキストが横方向に広がる場合は「Horizontal」）
3. パディングを調整
   要素同士の間隔（例: テキストと背景の左右のスペース）を設定します。
4. 「Constrain to Frame」をON
   フレーム内に収まるように自動調整されます。

実例：動的なボタン設計

// 自動レイアウトの設定例
1. 長方形（背景）とテキストをグループ化
2. Auto Layoutの方向を「Horizontal」に設定
3. パディングを「Left: 16, Right: 16」に調整
4. テキストを長くすると背景が自動で拡張

この設定により、テキストが「ホーム」から「マイページ」に変わったとき、ボタンの幅が自動で調整されます。これは、動的なUIをデザインするうえで非常に重要です。

スライスの設定方法

スライスは、デザインから画像やSVGを切り出して、開発者に渡すための仕組みです。レスポンシブデザインでは、同じ要素を異なる解像度で出力する必要があるため、スライスの設定がカギとなります。

スライスの種類と使い分け

スライスの設定手順

1. デザイン要素を選択
   例: ボタンやアイコンを選択します。
2. メニュー「Design」→「Make Slice」を選択
   または右クリックで「Make Slice」。
3. スライスのプロパティを調整
4. Export Format: PNGやSVGを選択。
5. Scale: 1x, 2x, 3xを指定（レスポンシブ対応用）。

自動レイアウトとスライスの連携

自動レイアウトとスライスを組み合わせることで、動的なUI要素を正確に出力できます。例えば、ボタンの自動レイアウト設定後にスライスを作成すると、テキストの長さに応じて自動で切り出される画像が生成されます。

実例：レスポンシブなリスト設計

1. リストの各アイテムを自動レイアウトでグループ化
2. 各アイテムにスライスを設定（Object Slice）
3. テキストが長くなった場合でもスライスが自動で調整
4. 開発者に「1x」「2x」の画像を提供

この方法により、リストの長さが変化しても画像の品質が保たれます。

実践ワーク

ボタンとスライスの作成

1. ボタンをデザイン
2. 背景（長方形）とテキストを重ねて配置します。
3. テキストを「ホーム」「プロフィール」などに変更して、自動レイアウトが動作するか確認します。
4. スライスを設定
5. ボタン全体をスライス（Object Slice）に設定。
6. Export FormatをPNG、Scaleを1xと2xに設定します。
7. 出力結果の確認
8. 「File」→「Export」から画像を確認。
9. 1xと2xの画像が異なる解像度で保存されていることを確認します。

まとめと次回の準備

本講義では、レスポンシブデザインの基本である「自動レイアウト」と「スライス」の設定方法を学びました。自動レイアウトにより、動的なUIを効率的に設計でき、スライスにより開発者に高品質なアセットを提供できます。これらを活用することで、プロトタイプだけでなく実際の開発にも対応できるデザインが完成します。

次回の準備として、以下の点を確認してください： - レスポンシブデザインの実例（例: スマートフォンとPCでの違い） - Figmaの「Constraints」機能（要素の固定方法）

参考文献

1. Figma公式ドキュメント
   https://www.figma.com/learn
   （自動レイアウトやスライスの詳細な設定方法が記載されています。）

2. 『Figmaで学ぶUIデザイン入門』（著: ケン・ロジャース）
   （初心者向けに、Figmaの基本機能から応用までを解説しています。）

3. 『レスポンシブWebデザインの極意』（著: エリック・メイヤー）
   （レスポンシブデザインの理論と実践が網羅されています。）

A/Bテスト準備 — バリアントの作成と比較手法

前回の講義でレスポンシブデザインの自動レイアウトとスライス設定を学びました。今回は、UI/UXデザインの最適化に欠かせない「A/Bテスト」について説明します。A/Bテストは、複数のデザインバリアントを比較して、ユーザーの行動に最も適したデザインを検証する手法です。Figmaを活用することで、バリアントの作成から比較までを効率的に行うことができます。

A/Bテストの基本概念

A/Bテストは、2つ以上のデザインバージョンをランダムなユーザーに提示し、クリック率やコンバージョン率などの指標を測定する方法です。たとえば、赤色と青色の「購入ボタン」を比較して、どちらが多くのクリックを誘うかを検証します。この手法は、ユーザーの心理や行動を直接観察し、データに基づいたデザイン改善が可能です。

重要なポイント： - 仮説の設定：「このデザイン変更により、ユーザーのクリック率が10%向上する」など、明確な目的を持つ。 - ランダム化：ユーザーをランダムに割り振り、偏りを防ぐ。 - 統計的有意性：結果が偶然ではないことを確認する。

Figmaでのバリアント作成方法

Figmaでは「バリアント（Variants）」機能を使って、同じコンポーネントの複数バージョンを管理できます。以下に手順を示します：

1. コンポーネントの作成：例として、ボタンコンポーネントを作成します。
2. バリアントの追加：
3. ボタンの「色」や「テキスト」を変更し、新しいバリアントを追加。
4. メニューより「Variants > Add Variant」を選択。
5. プロパティの設定：各バリアントに「Primary」「Secondary」などのラベルを付ける。

// Figmaでのバリアント作成例
// ボタンコンポーネント選択後、プロパティパネルで以下を設定
{
  "Primary": {
    "Background": "Red",
    "Text": "Buy Now"
  },
  "Secondary": {
    "Background": "Blue",
    "Text": "Add to Cart"
  }
}

この方法で、複数のバリアントを1つのコンポーネントにまとめ、管理が簡単になります。

バリアントの比較とメトリクス

バリアントを比較する際は、以下のメトリクスを設定することが重要です：

比較手法の例： - A/Bテストツール連携：Google OptimizeやOptimizelyと連携し、Figmaで作成したバリアントを実際のウェブサイトに反映。 - シミュレーション：Figmaのプレビュー機能でバリアントを並べて視覚的に比較。

A/Bテストの実施と結果分析

A/Bテストを実施する際は、以下の手順に従います：

1. テスト環境の準備：
2. 実際のウェブサイトまたはプロトタイプにバリアントを反映。
3. Figmaのスライス機能で画像を出力し、開発チームに提供。
4. データ収集：
5. Google AnalyticsやHotjarなどのツールでユーザー行動を記録。
6. 結果の分析：
7. 統計ソフト（例：RやPython）でp値を計算し、有意性を確認。
8. 例：p値が0.05未満なら、結果が偶然ではないと判断。

# Pythonでp値を計算する例（仮想データ）
from scipy.stats import chi2_contingency

# クリック数と非クリック数のデータ
data = [[120, 80], [90, 110]]  # [バリアントA, バリアントB]
chi2, p, _, _ = chi2_contingency(data)
print(f"p値: {p}")  # 出力例: p値: 0.03（有意差あり）

実践ワーク

課題：Figmaを使って以下のバリアントを作成し、比較してください。
1. ターゲット：ウェブサイトの「サインアップボタン」。
2. バリアント：
- バリアント1：赤色背景 + 「今すぐ登録」
- バリアント2：緑色背景 + 「無料トライアル」
3. 比較：Figmaプレビューで視覚的に評価し、想定されるクリック率を予測。
4. 発展課題：Google Optimizeにバリアントを反映し、1週間のデータを収集。

まとめと次回の準備

今回の講義では、Figmaを活用したA/Bテストの準備と比較手法を学びました。バリアントの作成から統計的分析まで、実践的なステップを紹介しました。次回は「ユーザーテストの実施とフィードバック収集」について詳しく説明します。Figmaの協働機能を活用して、リアルタイムでユーザーの意見を反映する方法を学ぶので、ぜひご期待ください。

参考文献

1. 『Figmaで学ぶUIデザインの実践技術』（技術評論社）
2. Figma公式ドキュメント: Variants
3. 『A/Bテストで売上を2倍にする本』（SBクリエイティブ）
4. Google Optimize公式サイト
5. 『データ駆動型UXデザイン』（O'Reilly Japan）

ポートフォリオ作成実践 — 完成作品のエクスポートと共有

これまでの講義でFigmaの協働機能やレスポンシブデザイン、A/Bテストの準備まで学んできました。この第10講では、学んだ知識を活かして実際のポートフォリオを作成し、完成作品をエクスポートして共有する方法を実践的に学びます。本講義の目標は、Figmaで設計したデザインをプロフェッショナルな形で外部に提出できるよう、必要なスキルを習得することです。

1. ポートフォリオの目的と構成要素

ポートフォリオは、あなたのデザインスキルや思考プロセスを視覚的に伝えるための「作品集」です。特にUI/UXデザイナーの場合、クライアントや採用担当者に「自分の実力を示す」ための重要なツールです。Figmaでポートフォリオを作成する際には、以下の3つの要素を含めると効果的です。

• プロジェクト概要: 何を作ったのか、なぜそれを作ったのかを簡潔に説明します。
• デザインプロセス: スケッチやワイヤフレーム、プロトタイプの段階を示します。
• 完成作品: 最終的なデザインを視覚的に提示します。

例：アイコンセットのポートフォリオ

たとえば、Figmaで「社内アプリのアイコンセット」を設計した場合、ポートフォリオでは以下のように構成します。 1. 背景: ユーザーが直面する問題（例：複雑な操作フローの簡略化）。 2. プロセス: スケッチの作成 → ワイヤフレームの設計 → バリアントの比較（第3講で学んだ手法）。 3. 成果: 最終的なアイコンとその使い方の説明。

2. 作品のエクスポート方法

Figmaで作成したデザインを外部に提出するには、エクスポート機能を使用します。エクスポート形式は用途によって異なりますが、主に以下の3つがよく使われます。

実践：PNG形式でアイコンをエクスポート

1. フレームを選択 → 右クリック → Export → PNGを選択。
2. 解像度（2xや4x）を指定。高解像度で印刷用途に最適化します。
3. ファイル名を記録し、フォルダに整理。

// デザイントークンの例（JSON形式）
{
  "icon": {
    "primary": "#FF5733",
    "secondary": "#33FF57"
  }
}

※このJSONは、アイコンの色を統一するために使用されるデザインシステムの一例です。

3. Figmaの共有機能活用

Figmaの強みは「リアルタイム協働」ですが、ポートフォリオを共有する際にはコメント機能とリンク共有の活用が重要です。

コメント機能の使い方

• フレーム上にコメントを追加 → 実装担当者にフィードバックを依頼。
• コメントに「@メンション」機能で特定のユーザーに通知を送信。

リンク共有の手順

1. プロジェクトの右上にある「Share」ボタンをクリック。
2. 見せる人の権限を設定（例：コメント投稿可、編集不可）。
3. 生成されたURLをコピーし、メールやチャットで共有。

4. 完成作品の整理とプレゼンテーション

複数のプロジェクトを含むポートフォリオでは、一覧性が重要です。Figmaの「Assets（アセット）パネル」を活用して、以下の情報を整理しましょう。

1. アイコンの一覧: カテゴリごとに分類。
2. カラーパレット: 使用した色の名称とコードを記録。
3. フォント情報: フォントファミリとサイズを一覧表示。

例：アセットパネルの活用

• アイコンを「Favorites」に登録 → プロトタイプ作成時にワンクリックで挿入可能。
• カラーパレットを「Variables（変数）」に保存 → 他のプロジェクトでも再利用可能。

実践ワーク

1. エクスポート練習: Figmaで作成したアイコンをPNGとSVG形式でエクスポートし、ファイル名に「用途」を含め（例：icon_home_2x.png）。
2. リンク共有: 自分のプロジェクトをチームメンバーに共有し、コメントを1つ受け取る。
3. アセット整理: 使用したアイコンとカラーパレットをアセットパネルに整理。

まとめと次回の準備

本講義では、Figmaで作成したデザインをエクスポートして共有する方法を学びました。ポートフォリオは「あなたのスキルの証」として、UI/UXデザイナーのキャリアにおいて非常に重要です。エクスポート形式の選定やアセットの整理には、プロジェクトの用途に応じた工夫が必要です。

次回は、Figmaを活用したリモートチームとの協働ワークフローの最適化について学びます。特に、バージョン管理とレビュー効率の向上方法に焦点を当てます。準備として、Figmaの「Version History（バージョン履歴）」機能の基本操作を確認しておきましょう。

参考文献

1. Figma公式ドキュメント: Exporting Assets
2. エクスポート設定の詳細な説明。
3. 『UIデザインの教科書』（著：田中圭介）
4. ポートフォリオ作成の実践例が多数掲載。
5. Smashing Magazine: How to Build a Design Portfolio
6. 国際的なデザイナー向けのポートフォリオ構築ガイド。