UniswapのWebサイトを読み解く
役立つウェブサイト研究は、画像の枚数ではなく体験から始まります。プロダクト全体を見てから、その仕組みを伝える場面を選びます。
今回デスクトップで調査した Uniswap Web Appでは、ホーム、Explore、Launches、Pool、Portfolio を見て、代表的な九つの画面を選びました。ページごとの役割を分けながら、全体の一貫性を保つ方法が見えてきます。
説明する前にプロダクトを使ってもらう
ホームはスワップ UI から始まります。背景の柔らかく浮遊するトークン画像が動きを加えつつ、フォームを主役に保ちます。その下に統計とプロダクトカードが続き、まず操作、次に規模と機能を伝える構成です。
統計はデザイン上の信頼を支える要素です。収録された数値は調査時点のもので、現在の市場データではありません。
ページごとに明確な役割を持たせる
Launches は、注目のカード、横に流れるアクティビティ、情報密度の高いランキング表を組み合わせています。 Pool は、ポジション作成、ウォレット未接続の状態、マーケット表をつないでいます。 Portfolio は、グラフと明確な操作の入口を備えたデモウォレットを提供しています。
この訪問では Explore の読み込みが完了しなかったため、選んだ画面には含めませんでした。参照資料には実際に確認できたものを載せるべきだと考えています。
スクリーンショットだけでなく動きを見る
初回の収録は動きが速く、停止時間が長すぎました。そこでスクロールを長くし、緩やかな加減速と短い読書時間に調整しました。ブラウザーを直接収録することで、サイト自身のアニメーションも残せました。
参照ライブラリーでは各セクションに静止画を使い、ホバーすると動画を再生します。落ち着いてレイアウトを比較し、必要なときに動きを確認できます。
