分散型取引所 (DEX) デザインのベストプラクティス
2018年のユニスワップの立ち上げ以来、数十の異なるチェーンで何百もの分散型取引所が立ち上げられてきました。 これらの多くは新しい要素を導入したり、独自の工夫を加えたりしましたが、インターフェースは概ね同じままです。
その理由の1つは、ヤコブの法則 (opens in a new tab)です。
ユーザーは他のサイトでほとんどの時間を過ごします。つまり、ユーザーはあなたのサイトが、彼らがすでに知っている他のすべてのサイトと同じように機能することを好むということです。
ユニスワップ、Pancakeswap、Sushiswapなどの初期のイノベーターのおかげで、分散型金融 (DeFi) のユーザーはDEXがどのようなものかについて共通の認識を持っています。 このため、現在「ベストプラクティス」のようなものが現れつつあります。サイト間で標準化されるデザインの決定事項がますます増えています。DEXの進化は、本番環境でのテストの巨大な例として見ることができます。うまくいったものは残り、そうでないものは捨てられました。個性を出す余地はまだありますが、DEXが準拠すべき特定の基準があります。
この記事は以下の要約です。
- 盛り込むべき内容
- 可能な限り使いやすくする方法
- デザインをカスタマイズする主な方法
例として挙げたワイヤーフレームはすべてこの記事のために特別に作成されたものですが、すべて実際のプロジェクトに基づいています。
Figmaキットも下部に含まれています。自由に使用して、独自のワイヤーフレームの作成をスピードアップしてください！
DEXの基本構造
UIには通常、次の3つの要素が含まれます。
- メインフォーム
- ボタン
- 詳細パネル
バリエーション
これはこの記事の共通のテーマになりますが、これらの要素を構成するにはさまざまな方法があります。「詳細パネル」は次のようになります。
- ボタンの上
- ボタンの下
- アコーディオンパネルに隠す
- および/または「プレビュー」モーダル上
注：「プレビュー」モーダルはオプションですが、メインUIに表示する詳細が非常に少ない場合は必須になります。
メインフォームの構造
これは、スワップしたいトークンを実際に選択するボックスです。このコンポーネントは、入力フィールドと小さなボタンが1行に並んだ構成になっています。
DEXは通常、上部の1行と下部の1行に追加の詳細を表示しますが、これは異なる構成にすることもできます。
バリエーション
ここでは2つのUIバリエーションを示しています。1つは境界線がなく、非常にオープンなデザインを作成しているもの、もう1つは入力行に境界線があり、その要素に焦点を当てているものです。
この基本構造により、デザイン内に4つの重要な情報を表示できます（各隅に1つずつ）。上部/下部の行が1つしかない場合は、2か所のみになります。
分散型金融 (DeFi) の進化の過程で、ここにはさまざまなものが含まれてきました。
盛り込むべき重要な情報
- ウォレットの残高
- 最大 (Max) ボタン
- 法定通貨の相当額
- 「受取」額に対するプライス・インパクト
分散型金融 (DeFi) の初期には、法定通貨の相当額が欠けていることがよくありました。何らかのWeb3プロジェクトを構築している場合、法定通貨の相当額を表示することは不可欠です。ユーザーは依然として現地通貨の観点で考えているため、現実世界のメンタルモデルに合わせるために、これを含める必要があります。
2番目のフィールド（スワップ先のトークンを選択するフィールド）では、入力額と推定出力額の差を計算することで、法定通貨の金額の横にプライス・インパクトを含めることもできます。これは含めると非常に便利な詳細です。
パーセンテージボタン（例：25%、50%、75%）は便利な機能ですが、より多くのスペースを占有し、コールトゥアクションを増やし、精神的な負荷を増やします。パーセンテージスライダーも同様です。これらのUIの決定の一部は、ブランドとユーザーのタイプによって異なります。
追加の詳細はメインフォームの下に表示できます。この種の情報は主にプロユーザー向けであるため、次のいずれかにするのが理にかなっています。
- 可能な限り最小限に抑える、または
- アコーディオンパネルに隠す
盛り込むべき追加情報
- トークン価格
- スリッページ
- 最小受取額
- 予想出力額
- プライス・インパクト
- ガス代の見積もり
- その他の手数料
- 注文ルーティング
間違いなく、これらの詳細の一部はオプションにすることができます。
注文ルーティングは興味深いですが、ほとんどのユーザーにとっては大きな違いはありません。
他のいくつかの詳細は、単に同じことを別の方法で言い換えているだけです。たとえば、「最小受取額」と「スリッページ」は表裏一体です。スリッページを1%に設定した場合、受け取ることが期待できる最小額 = 予想出力額 - 1% となります。一部のUIでは、予想額、最小額、スリッページが表示されますが、これは便利ですが、おそらくやりすぎです。
いずれにせよ、ほとんどのユーザーはデフォルトのスリッページのままにします。
「プライス・インパクト」は、「宛先 (to)」フィールドの法定通貨相当額の横に括弧で囲んで表示されることがよくあります。これは追加すべき素晴らしいUXの詳細ですが、ここに表示されている場合、本当に下部に再度表示する必要があるでしょうか？そして、プレビュー画面でさらに表示する必要があるでしょうか？
多くのユーザー（特に少額をスワップするユーザー）は、これらの詳細を気にしません。単に数字を入力してスワップを押すだけです。
正確にどの詳細を表示するかは、対象ユーザーと、アプリにどのような雰囲気を持たせたいかによって異なります。
詳細パネルにスリッページ許容度を含める場合は、ここから直接編集できるようにする必要があります。これは「アクセラレータ」の良い例です。アプリの一般的な使いやすさに影響を与えることなく、経験豊富なユーザーのフローをスピードアップできる気の利いたUXのトリックです。
1つの画面上の特定の1つの情報だけでなく、全体のフローについて慎重に考えることをお勧めします。 メインフォームに数字を入力する → 詳細をスキャンする → クリックしてプレビュー画面に移動する（プレビュー画面がある場合）。 詳細パネルは常に表示しておくべきか、それともユーザーがクリックして展開する必要があるか？ プレビュー画面を追加して摩擦を生み出すべきか？これにより、ユーザーはペースを落として取引を検討せざるを得なくなり、役立つ場合があります。しかし、ユーザーは同じ情報をすべてもう一度見たいと思うでしょうか？この時点で彼らにとって最も役立つものは何でしょうか？
デザインのオプション
前述のように、これの多くは個人のスタイルに帰結します。 ユーザーは誰ですか？ ブランドは何ですか？ すべての詳細を表示する「プロ」向けのインターフェースが必要ですか、それともミニマリストにしたいですか？ 可能な限りのすべての情報を求めるプロユーザーをターゲットにしている場合でも、アラン・クーパーの賢明な言葉を覚えておく必要があります。
インターフェースがどんなに美しくても、どんなにクールでも、それが少ない方が良い。
構造
- トークンを左に配置するか、右に配置するか
- 2行か3行か
- ボタンの上または下に詳細を配置するか
- 詳細を展開するか、最小化するか、表示しないか
コンポーネントのスタイル
- 空（枠線なし）
- アウトライン（枠線あり）
- 塗りつぶし
純粋なUXの観点から見ると、UIスタイルはあなたが思っているほど重要ではありません。視覚的なトレンドは周期的に現れたり消えたりし、多くの好みは主観的なものです。
これの感覚を掴み、さまざまな構成について考える最も簡単な方法は、いくつかの例を見てから、自分で実験してみることです。
付属のFigmaキットには、空、アウトライン、塗りつぶしのコンポーネントが含まれています。
以下の例を見て、すべてをまとめるさまざまな方法を確認してください。
しかし、トークンはどちら側に配置すべきか？
結論から言うと、おそらく使いやすさに大きな違いはありません。ただし、どちらかに傾く可能性のある、心に留めておくべきことがいくつかあります。
時間の経過とともに流行が変わるのを見るのは少し興味深いことでした。ユニスワップは当初トークンを左に配置していましたが、その後右に移動しました。Sushiswapもデザインのアップグレード中にこの変更を行いました。すべてではありませんが、ほとんどのプロトコルがこれに追随しています。
金融の慣習では伝統的に、数字の前に通貨記号を置きます（例：$50、€50、£50）が、私たちは50ドル、50ユーロ、50ポンドと言います。
一般のユーザー、特に左から右、上から下へ読む人にとっては、トークンが右にある方が自然に感じるでしょう。
トークンを左に配置し、すべての数字を右に配置すると、心地よい対称性があり、それはプラスですが、このレイアウトには別の欠点があります。
近接の法則では、互いに近いアイテムは関連していると認識されるとされています。したがって、関連するアイテムを隣り合わせに配置したいと考えます。トークンの残高はトークン自体に直接関連しており、新しいトークンが選択されるたびに変化します。したがって、トークンの残高がトークン選択ボタンの隣にある方が少し理にかなっています。トークンの下に移動することもできますが、それではレイアウトの対称性が崩れてしまいます。
最終的には、どちらのオプションにも長所と短所がありますが、トレンドがトークンを右に配置する方向に向かっているように見えるのは興味深いことです。
ボタンの動作
承認する (Approve) ための別のボタンを設けないでください。また、承認するための別のクリックも設けないでください。ユーザーはスワップしたいので、ボタンには単に「スワップ」と表示し、最初のステップとして承認を開始します。モーダルでは、ステッパーを使用して進行状況を表示したり、「トランザクション 1/2 - 承認中」という簡単な通知を表示したりできます。
コンテキストヘルプとしてのボタン
ボタンはアラートとしての役割も果たせます！
これは実際、Web3以外ではかなり珍しいデザインパターンですが、Web3内では標準になっています。これはスペースを節約し、注意を集中させ続けるため、優れたイノベーションです。
メインのアクションである「スワップ」がエラーのために利用できない場合、その理由をボタンで説明できます。例：
- ネットワークを切り替える
- ウォレットを接続する
- さまざまなエラー
ボタンは、実行する必要があるアクションにマッピングすることもできます。たとえば、ユーザーが間違ったネットワークにいるためにスワップできない場合、ボタンには「イーサリアムに切り替える」と表示し、ユーザーがボタンをクリックしたときにネットワークをイーサリアムに切り替える必要があります。これにより、ユーザーフローが大幅にスピードアップします。
このFigmaファイルを使用して独自に構築する
複数のプロトコルの懸命な努力のおかげで、DEXのデザインは大きく改善されました。ユーザーがどのような情報を必要としているか、それをどのように表示すべきか、そしてフローを可能な限りスムーズにする方法がわかっています。 この記事がUXの原則の確かな概要を提供できれば幸いです。
実験したい場合は、Figmaワイヤーフレームキットを自由に使用してください。可能な限りシンプルに保たれていますが、基本構造をさまざまな方法で構築するのに十分な柔軟性があります。
Figmaワイヤーフレームキット (opens in a new tab)
分散型金融 (DeFi) は進化し続け、常に改善の余地があります。
幸運を祈ります！
ページの最終更新: 2025年10月21日
