Web3 UIUXデザイン：dApp、ウォレット、取引所のインターフェースを、ひとつの状態から丁寧に設計

Web3 UIUXデザインの対象範囲

クイックテスト： 新人にあなたのプロトタイプを使ってテストトランザクションを送ってもらいましょう。彼らがためらう瞬間をすべて記録してください。

Web3 UIUXデザインは、dApp、ウォレット、取引所、ランディングフローを通る経路を、より理解しやすく、完了しやすくします。リサーチとインタラクション計画をビジュアルデザインと組み合わせることで、インターフェースがユーザーに何ができるか、次に何が起こるかを説明します。

このサービスは、新製品を準備している場合、混乱を招くジャーニーを再構築している場合、または開発前に既存のインターフェースを調整している場合に適しています。特に、仮想通貨に不慣れで、ウォレット接続、トランザクション確認、ガス代をまだ理解していない可能性のあるユーザーが対象となる場合に有効です。

作業範囲は以下の通りです：

• ユーザーリサーチと関連する競合体験のレビュー。
• エントリーポイントからタスク完了までの動きを示すユーザーフロー。
• ビジュアルの仕上げ前に構造と優先順位を合意するためのワイヤーフレーム。
• 一貫性のある画面のためのビジュアルデザインシステムとコンポーネントライブラリ。
• Figmaでのクリッカブルプロトタイプ、ユーザビリティテスト、開発者向けハンドオフ。

プロジェクトに一貫したビジュアルアイデンティティも必要な場合は、インターフェース作業をデザインとビジュアルまたは仮想通貨ブランディングと組み合わせてください。適切な出発点は、最も重要なプロダクトタスクです。すべての画面を一度に描き直すよう依頼することではありません。

Web3ユーザージャーニーはどのようにマッピングしますか？

優れたWeb3インターフェースは、ユーザーの目標、彼らが下さなければならない決定、各ステップで必要な情報を明確に説明することから始まります。画面レイアウトに着手する前にジャーニーをマッピングすることで、変更が容易なうちにチームが混乱を招くロジックを解決できます。

お客様のプロダクト、既存の画面、オーディエンス、競合体験をレビューし、コアタスクと質問を特定します。ウォレットやdAppの場合、これはオンボーディング、ウォレット接続、トランザクションアクション、確認または復旧パスをトレースすることを意味します。シーケンスをフローとして文書化し、決定ポイント、不足情報、ユーザーが安心感を必要とする箇所を明らかにします。

詳細なデザインに進む前に、以下を準備してください：

• プロダクトの主要なユーザータスクと対象オーディエンス。
• 既存の画面、プロダクトノート、または利用可能な場合は動作するビルド。
• 接続されたウォレットまたはユーザー確認を必要とするアクション。
• 既知のトランザクション状態、エラーケース、サポートガイダンス。
• 開発チームがすでに把握している技術的制約。

これらの資料を使用して、どのジャーニーを計画に含めるか、プロトタイプで何をデモする必要があるかを合意します。これらのステップを平易な言葉で説明する必要があるプロダクトメッセージについては、デザインをWeb3コンテンツ制作と連携させることができます。

インターフェースはどのウォレットとトランザクション状態を表示すべきですか？

Web3インターフェースは、ウォレットとトランザクションの状態を可視化し、ユーザーにアクションが成功したかどうかを推測させないようにする必要があります。これらの状態をメイン画面と一緒に設計することで、プロダクトチームはレビューと構築のためのより完全な体験を得られます。

関連するアクションごとに、ユーザーがその前、最中、後に何を見るかを検討します。これには、ウォレット接続、保留中のトランザクション、確認、明確な成功状態、有用なエラーメッセージが含まれます。ガス代やその他の決定がアクションに影響する場合、インターフェースは対象オーディエンスに適した言葉で選択肢を説明する必要があります。仮想通貨に不慣れなユーザー向けのオンボーディングでは、馴染みのないステップを、それが関連するタイミングで紹介し、事前知識を前提としないようにします。

フローの実用的なレビューでは、以下を確認します：

• ユーザーはウォレットを接続する必要があるタイミングを判断できますか？
• どのアクションを確認しているか明確ですか？
• 画面は何が保留中で、次に何をすべきかを説明していますか？
• ユーザーはエラーから復旧し、位置を失わずに済みますか？
• ラベルとメッセージは接続された画面間で一貫していますか？

これらの質問は、ワイヤーフレーム、ビジュアルデザイン、プロトタイプの動作を形成します。また、実装すべき状態について開発者に共通のリファレンスを提供します。トランザクションメッセージ、オンボーディングプロンプト、説明テキストに専用のライティングが必要な場合は、インターフェースをWeb3コピーライティングと連携させることができます。

チームがFigmaで受け取るもの

経験則： トランザクションごとに5つの状態（準備完了、待機中、成功、失敗、キャンセル）を表示します。

お客様のチームは、接続されたデザインパッケージ（文書化されたジャーニー、画面デザイン、再利用可能なインターフェース要素、主要なインタラクションの連携を示すプロトタイプ）を受け取ります。正確な画面セットは合意された計画に従うため、誰もが何が設計され、レビューされているかを把握できます。

リサーチと競合レビューはユーザーフローに反映され、フローはワイヤーフレームに反映され、承認された構造はビジュアルデザインシステムとコンポーネントライブラリに移行します。その後、関連する画面をクリッカブルプロトタイプで接続し、ユーザビリティテストを使用して明確化が必要な箇所を特定します。最終的なFigmaハンドオフは、設計された画面と状態の整理されたリファレンスを開発者に提供します。

パッケージには以下が含まれます：

• プロダクトに関連するリサーチノートと競合レビューの結果。
• 選択されたジャーニーのユーザーフローとワイヤーフレーム。
• ビジュアルインターフェースデザインと再利用可能なコンポーネントライブラリ。
• レビューとユーザビリティテストのためのクリッカブルプロトタイプパス。
• Figmaでの開発者向けハンドオフ（画面と状態が整理され、リファレンスとして利用可能）。

これにより、プロダクト、デザイン、開発チームは実装前に議論するための共通の成果物を得られます。プロジェクトにインターフェースリリースに関するより広範なコミュニケーション計画が必要な場合は、作業をソーシャルメディアとコンテンツと連携させてください。開始時にお客様が受け取るものを定義するため、プロトタイプの深さと画面範囲がチームの次の決定に合致します。

デザインがブリーフからハンドオフに進む方法

作業は、プロダクトコンテキストからテスト済みプロトタイプ、開発者向けハンドオフまで、合意されたレビューポイントを経て進みます。MarketingExtraでは、最初のレビューで、ブリーフ、既存の資料、チームの制約が適切なユーザージャーニーをマッピングするのに十分なコンテキストを提供しているかを確認します。

キックオフ後、オーディエンス、主要タスク、ソース資料、作業をレビューする意思決定者を確認します。インターフェースを洗練する前にフローとワイヤーフレームをマッピングするため、チームはビジュアルの詳細が確定する前に構造に対応できます。ビジュアルの方向性とコンポーネントアプローチが承認されたら、選択した画面をプロトタイプに接続し、関連タスクをテストします。最終ハンドオフは開発チーム向けにFigmaで準備されます。

スケジュールは、計画を理解した後に合意します。ジャーニーの数と複雑さ、プロダクトの決定とソース資料の入手可能性、意思決定者がデザインチェックポイントをレビューする速さによって決まります。意思決定者を1名指名し、既存のプロダクトドキュメントを早期に共有し、各レビューでフィードバックを1つの回答にまとめることで、作業をスムーズに進めることができます。

プロダクト概要、現在の画面またはビルド、ターゲットユーザー、最も改善が必要なジャーニーをお送りください。それらの資料をレビューし、計画を明確にし、開発者対応のプロトタイプに到達するために必要なデザイン作業の概要をお伝えします。

Web3インターフェースの6つのチェックポイント

開発者が開始する前に、これら6つのポイントを確認してください。これらは、待機中、失敗、署名など、Web3ユーザーが信頼を失う瞬間をカバーし、デザインの構築とテストを容易にします。チェックが難しい項目があれば、それは有用な情報です。つまり、費用や時間を費やす前に解決すべき点を示しています。

1. トランザクションの5つの状態すべてを設計する。
2. ユーザーが署名する前に手数料とネットワークを表示する。
3. エラーメッセージを平易な言葉で書く。
4. フローを新人1名でテストする。
5. 小型のスマートフォンでレイアウトを確認する。
6. 名前付きコンポーネントを含むFigmaファイルをハンドオフする。

用語の一言説明

トランザクション状態とは、支払いやアクションの段階（待機中や失敗など）を指します。

ワイヤーフレーム：ビジュアルデザイン前のレイアウトを示すシンプルな画面スケッチ。

デザインプロセスで確立できること

デザインは、プロダクトがウォレットアクションやトランザクション状態をどのように伝えるかを示すことはできますが、外部のウォレット、チェーン、コントラクトがあらゆる状況でどのように動作するかを決定することはできません。これらのシステムは、プロダクトチームが処理しなければならない状態やメッセージを返す可能性があるため、設計された状態を明確にし、チームが提供できる技術情報と整合させます。プロトタイプとユーザビリティテストは、ユーザーが意図されたジャーニーを理解しているかどうかを評価するのに役立ちますが、採用やトランザクションの成功を保証するものではありません。ハンドオフでは、接続不可、ユーザー拒否、保留中の確認、返されたエラーなど、チームが確認した期待される状態を記録し、開発者が設計された応答と、プロダクトまたは技術的な決定を必要とする条件を区別できるようにします。

3つのものをお送りください：プロダクト要件、現在の画面、注目している3つの競合。これらをもとに、リサーチとフローを計画し、デザイン開始前に費用を書面で確認します。

仕組み

1. プロダクトコンテキストを共有プロダクト概要、オーディエンスの説明、現在の画面またはビルド、改善したい主要なユーザータスクをお送りください。
2. ジャーニーと計画を合意資料を一緒にレビューし、優先フローを特定し、エンゲージメントの画面、状態、プロトタイプの深さを定義します。
3. フローとワイヤーフレームをレビュージャーニーをマッピングし、その構造をレイアウトして、チームがビジュアルの洗練前にプロダクトの質問を解決できるようにします。
4. インターフェースをデザインしテストビジュアルシステムとコンポーネントを作成し、合意された画面をプロトタイプに接続し、ユーザビリティテストを使用して明確化が必要な箇所を特定します。
5. Figmaハンドオフを受け取る承認されたデザインと関連状態をFigmaで整理し、開発チームが明確な実装リファレンスを利用できるようにします。