プロトタイピングは、製品開発のあらゆる段階で強力なツールです。プロトタイピングにはさまざまな形式があります。ご紹介するリソースは、プロトタイピングが初心者の人でも、さらに応用してみたい人でも、プロトタイピングプロセスをレベルアップするうえで役立ちます。
プレゼンテーションの向上から、ユーザー調査の実施、ステークホルダーからのフィードバックの促進に至るまで、プロトタイピングはチームがビジョンを共有するうえで重要な役割を果たします。プロトタイピングを通して学んだことは、反復に役立ち、最終的にはより良い製品を生み出すことにつながります。
一連のプロトタイピングの機能強化に伴い、Figmaプロトタイピングを開始するための、有益なライブストリームや、実践的なコミュニティファイルから、簡潔なビデオやソーシャルポストまで、包括的なリソースをご用意しました。学習スタイルを問わず、スキルアップを図ることができるリソースがたくさん見つかります。
基本を学ぶ
まず、以下の入門書で、プロトタイピングを使用した製品開発プロセスの調整と、迅速化の方法を学習しましょう。
アニメーションやテスターからのフィードバックの取り入れ方など、インタラクティブなプロトタイプの構築の概要をご覧ください。
曲線、トランジション、スマートアニメート、スクロール、デバイスフレームなどについて説明する、気軽に学習できるYouTubeのプレイリストをご覧ください。
プロトタイプの基本的なフレーム間の操作方法や、インタラクティブコンポーネントなどで活用できる高度な機能について紹介します。
動画: 製品担当者としてFigmaを学ぶ(パート1) (7分)
デザイナー以外の人物が製品担当者として、軽量プロトタイプを作成する方法をご覧ください。また、以下のコミュニティファイルの内容をご確認ください。
動画: 製品担当者としてFigmaを学ぶ(パート2) (17分)
シリーズのパート2では、トランジション、スマートアニメート、スクロールの動きなど、プロトタイプに命を吹き込むためのヒントについて紹介します。
コミュニティファイル: Figmaでのアクセシブルなプロトタイプ
プロトタイプのためのFigmaのアクセシビリティモードについて説明します。このモードでは、VoiceOver (Mac)やJAWS (Windows)などのスクリーンリーダーが、プロトタイピングモードでデザインを表示する際に、デザインに関する情報を読み取ることができます。
プレゼンテーションをレベルアップする
プロトタイピングは、製品のモックアップを作成するだけではありません。役員室や教室で行うプレゼンテーションでメッセージを伝えるうえでも役立ちます。
プロトタイピングを活用して、オーディエンスを惹きつけるダイナミックなスライドプレゼンテーションを作成します。
スライド内にプロトタイプをネストすることで、実際にスクロールするモバイル画面などのインタラクティブな要素をプレゼンテーションに取り入れます。
動画: Figmaアプリを使用したプレゼンテーション(2分)
Figmaモバイルアプリを使用して、複数のスライドをクリックして表示する方法をご覧ください。
動画、モーション、フローについて学ぶ
動画をキャンバスに取り込み、プロトタイプをアニメーション化し、ダイナミックなトランジションを作成するヒントとチュートリアルをご覧ください。
フレーム間の状態管理と連続性を処理しながら動画を追加することで、より洗練されたリアルなプロトタイプを実現します。
このスターターファイルでワークショップを始めましょう。
プロトタイプのセクションを活用して、フロー内のユーザーの位置を保持することで、プロトタイプを終了して再入力し、中断したところから続行することができます。
プリセットオプションを使用して、プロトタイプのトランジションにスプリングアニメーションを追加します。
このコミュニティファイルで始めましょう。
クリックすると小刻みに動くハートアイコンを作成して、マイクロアニメーションの複雑さについて学びます。
インタラクティブコンポーネントを使用して、サムネイルのオーバーレイトランジションのプロトタイプを作成します。
プロトタイプ内の永続的なバナーやその他の要素にスティッキースクロールを設定します。
花が咲き乱れるエフェクト
Figmaキャンバスで咲き乱れる花畑を作成します。
バリアブルでより高度なプロトタイピングを行う
バリアブルを使用して、高度なプロトタイピングを行いましょう。バリアブルを使用することで、ビジョンを実現するために必要なフレーム数と複雑度が削減されます。
初めてバリアブルに取り組む場合は、ここから始めましょう。バリアブルの設定(任意のバリアブルの値を変更)と条件設定(if/elseロジックの導入)という2つの新しいプロトタイピングのアクションを可能にします。
eコマースエクスペリエンスを構築することで、バリアブルやその他の高度なプロトタイピング機能の詳細を把握できます。
この作業ファイルで、バリアブル、条件ロジック、式のコツがわかります。
現在利用可能なすべてのバリアブルタイプ(ブーリアン、数値、テキスト文字列、色)を紹介し、文字列バリアブルをインタラクティブコンポーネントにバインドする方法を紹介します。
バリアブルモードと条件ロジックを使用して、実際の数学を使用する、より実践的なショッピングカートのプロトタイプを作成する方法を紹介します。
当社開催のライブセッションの紹介
当社は、新機能のデモンストレーション、社外のエキスパートの招聘、問題のトラブルシューティングのために、ライブセッションを頻繁に開催しています。ここではその一部を紹介します。
動画: プロトタイピングとユーザーテストのAMA (52分)
プロトタイピングでリモートユーザーテストセッションを成功させるヒントを紹介します。
動画: インタラクティブコンポーネントの作成を開始する(52分)
再利用可能で共有可能なインタラクティブコンポーネントを使用して、プロトタイプをレベルアップする方法を紹介します。
動画: prototyperプラグインを使用したゲームUIのプロトタイピング(57分)
Epic Games社のUXデザイナーであるAashrey Sharma氏が、prototyperプラグインを活用してゲームデザイナーのプロトタイプを作成する方法を紹介します。
ご紹介したリソースをご覧いただくと、プロトタイピングでデザインやプレゼンテーションをレベルアップさせることができます。他に必要なリソースはありますか?ご提案がありましたら、Xでご連絡ください!
関連記事
