TOBIRADesign notes

DESIGN STUDY · Aave

Aave製品画面を並べて、利用後の状態を見せる

白い背景と淡い紫、中央の見出し、その下の複数のスマートフォン画面。サービスの説明と製品イメージの距離を近づける構成を考えます。

Aave:製品画面を並べて、利用後の状態を見せる
Aaveの保存済み画面。現在のサイトと異なる場合があります。

製品の画面を説明のすぐ下に置く

保存画面では見出しとボタンの下に複数のスマートフォン画面が並び、数値やグラフが見えます。抽象的なビジュアルではなく、利用する画面の形を先に見せることで、サービスを具体的に想像する手がかりを作っています。

淡い色でまとまりを作る

白い背景を基本に、紫系の色がボタンや製品画面の周辺に使われています。画面の中にある細かな情報を邪魔しにくい背景と、行動の入口を見分けるための色を分けて考えられる事例です。見出しから画面へ進む縦の並びも比較ポイントになります。

制作に取り入れるなら

アプリや管理画面のあるサービスを紹介するとき、説明文だけでは伝わらない利用後の状態を見せる方法として参考になります。自分の画面を掲載する際は、小さな文字を読む前提にせず、周囲の本文でも要点を説明します。実データではなく公開用のサンプルを使い、個人情報が写らないようにします。

確認しておきたいこと

このページはデザインの解説であり、金融サービスの利用や表示数値を推奨するものではありません。保存画面にある金額や条件を現行の情報として引用せず、必要な場合は公式サイトで確認してください。

ライブラリーでも探す

解説を読んだら、収録作品と関連するデザインを見比べてみてください。プレビューやコードの利用範囲は、作品の対応状況とプランによって異なります。

ライブラリーでAaveを見る →