FD4B: プロトタイピングの基本 – Figma Learn - ヘルプセンター

レッスン概要

このレッスンでは、静的なポートフォリオデザインを、実際のウェブサイトのように感じるインタラクティブなプロトタイプに変える方法を学びます。途中で、プロトタイプをプレビューしてインタラクションをテストします。

ウェブサイトやアプリをデザインする際には、デザインしているエクスペリエンスにも配慮することが重要です。プロトタイピングは、静的な画面を生き生きとし、エンドユーザーの視点に立つことを可能にします。

プロトタイピングはデザインプロセスのどの段階でも行うことができます。アイデアをテストし、フィードバックを得るために早めに作成しましょう。または、デザインがより洗練されるまで待って、実際のもののように感じるアニメーションやインタラクションを追加します。

どんな時でもプロトタイプを作ると、自分でテストするか、他の人に共有してフィードバックをもらうことで必ず何かを学ぶことができます。

Figma Designには多くのプロトタイピング機能があり、それらを表示・テストする方法も複数あります。デバイス上で直接プロトタイプと操作できるFigmaモバイルアプリもその一つです。すべてのプロトタイピング機能を網羅するわけではありませんが、開始するために十分な内容を学ぶことができます。

Figma Designでは、プロトタイピングとは、ユーザーがデザインとやり取りしたときに各部分がどのように動作するかを定義する一連の機能、設定、およびプロパティのことを指します。いくつかの基本を分解してみましょう。

注: すべてのプロトタイピング用語の用語集については、プロトタイピングガイドをチェックしてください。

プロトタイプはフローで構成されています。これらのフローは、ユーザーがデザイン内でたどる経路を示します。通常は複数の画面にわたるもので、例えばサインアップフローやチェックアウトフローなどが該当します。

それぞれのフローを個別に考えることもできます(たとえばこの2つのフローのように)、あるいはデザイン全体を1つのフローとしてまとめることも可能です。

すべてのフローには開始点があり、フロー名が表示された青いプレビューアイコンで示されています。また、このプレビューアイコンを使ってインラインプレビューでフローを開くこともできます。

開始点は上位フレームにアタッチされており、ラベルをクリックしてドラッグすることで別のフレームに移動することができます。プロトタイプフローについて詳しく学ぶ。

フレームから別のフレームにコネクションが作成される様子を示すアニメーション。フローの開始点が最初のフレームに追加されている。

すべてのプロトタイプはインタラクションで構成されています。インタラクションとは、プロトタイプがユーザーの操作にどのように反応するかを設定するルールのことです。インタラクションについて詳しく学ぶ。

それはいくつかの小さな要素で構成されています。トリガー、アクション、およびアニメーション。

トリガーとは、インタラクションを開始させるきっかけのことです。例えば以下のようなものがあります:

次は、アクションです。アクションはトリガーの結果であり、例えば以下のようなものがあります:

ブラウザで外部リンクを開く
オーバーレイを開くこと。オーバーレイとは、現在のフレームの上に表示されるフレームのこと。
ページのあるエリアまでスクロール
デザインの要素を表示または非表示にする
コンポーネントを新しい状態に変更する
指定された時間が経過した後に何かを実行する
または最も一般的には、あるフレームや画面から別のフレームや画面へ移動することです。このようなナビゲーションをコネクションと呼びます。詳しくはこの後で説明します。

3つ目はアニメーションで、異なるプロパティやオブジェクトが時間経過に沿ってどのように動くかを定義します。これには、次のようなものが含まれます:

コネクションは、フレームやアセットを論理的なナビゲーションフローとしてつなげるために使います。キャンバス上の青い矢印でコネクションを確認でき、これを「ヌードル」と呼ぶこともあります。

2つのオブジェクト間で最初のコネクションを作成すると、フローの開始点も設定されます。

コネクションはホットスポットから始まります。これは、ユーザーがマウスクリックなどのトリガーを行う場所です。そして宛先で終わります。宛先は通常、トップレベルのフレームで、ほとんどのコネクションはデザインの画面間を移動するために使用されます。