見出し画像

Daily Cocoda! 2周目に取り組んでみた 022

現在、UX/UIデザイナーとして就職を目指している仲田 光佑です!

今日もDaily Cocoda!のお題に取り組んでいきたいと思います。

今日のお題はアプリ紹介画面(web)です。

022 アプリ紹介画面(web)

まずはお題の確認をしていきたいと思います!

誰向け
家計簿アプリのアプリ紹介ページ
魅せたい項目
アプリの魅力を伝える情報 / ダウンロード導線
雰囲気
カジュアル、親しみのある

今回のお題はDaily Cocoda!の017のお題である家計簿アプリのアプリ紹介ページを作成するというお題です。

その際にはMoney Forward ME(以下、マネーフォワード) をアプリをトレースし、リデザインしたものを作成しました。今回はマネーフォワードのアプリ紹介ページをトレースし、リデザインしたものを公開していきたいと思います。

なお、トレースは13インチMac Book Proの1440px×900pxサイズで行いました。

マネーフォワードのアプリ紹介画面のトレースと分析

マネーフォワードは株式会社マネーフォワードが運営する家計簿で、「お金の見える化」アプリを目指していて、アプリ一つでお金の出し入りやカードの管理をすることができる便利なアプリです。

まず、マネーフォワードのアプリをトレースしたものがこちらです。

money forward トレース

スクリーンショット 2020-04-20 17.56.51

※このトレースは2020年5月時点のものです。
※白いオブジェクトはタレントのモデル写真なので、白いオブジェクトで隠しています。
※アイコン部分は今回省略しました。

全画面

画像7

マネーフォワードのアプリ紹介画面では紹介部分をマネーフォワードカラーのオレンジで実装していて、アプリ名やアイキャッチや実績などを表示しています。

コンポーネントは中央に寄せていて、表示されている情報も少ないです。ただ、ユーザーはスクロールする前にアプリの大まかな情報を把握できるので、サービスを気に入ったら、すぐにアプリをダウンロードすることができます。

ダウンロードの導線の後はアプリの機能が詳しく紹介されています。

競合のアプリ紹介画面

競合調査として、今回はfreeeとZaimのアプリ紹介画面をスクショしました。

なお、競合のスクショも13インチMac Book Proの画面サイズを基準にスクショし、アートボードに貼り付けました。

freee

¥フリー

全画面

画像6

※人物写真は白いオブジェクトをかけています

Zaim

ザイム

全画面

画像6

3サービスとも最初の画面でコンセプトとサービスを紹介した後、機能について細かく説明する画面構成となっていました。

しかし、freeeとZaimは紹介画面の特徴が似ていて

・左側にコンセプト、右側にアイキャッチ画像を配置
・ロゴやログインボタンや新規登録ボタンはヘッダーとして配置
・ダウンロードの導線は最後までスクロールしないと表示されない

という共通点がありました。

また、freeeとZaimはWebでの使用を想定しているのか、ダウンロード導線はすべてのページをスクロールしないと表示されませんでした。一方で、マネーフォワードはアプリの使用を想定しているのかサイトを開いたらすぐにダウンロードをできる画面構成になっているのが特徴的でした。

そのため、リデザインは競合を意識するデザインよりもいかに、ダウンロードまでの導線を組み立てるかという視点が大事になります。

次にマネーフォワードのトレースと分析を終え、ターゲットに合わせたリデザインの方向性を決めました。今回はアプリ紹介部分を再整理するという視点でデザインしました。

マネーフォワードのアプリ紹介画面のリデザイン

完成したリデザインがこちらです。

022 マネフォ

トレースと比較したものがこちらです。

マネフォ redign

主に変更したのは以下の部分です。

・コンセプトを大きく
・アプリの画像配置

コンセプトを大きく

トレース時では控えめに表示されていた、マネーフォワードアプリのコンセプトである「お金の見える化」のフォントサイズを大きくしました。

コンセプトのフォントを大きくすることで、詳しくサービスを知らないユーザーにどのようなサービスなのかを認識してもらいます。

アプリの画像配置

リデザインではサービスの内容を表すイメージをイラストからアプリの画像に変更しました。

アプリの画像にすることで、ユーザーがアプリを具体的なイメージを持ち、使いやすい印象を与えるためです。

おわりに

次回は023 フィード画面のトレースとリデザインをこのnoteに書いていければと思います!

noteを読んでいただき、ありがとうございます!

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
3
Cocoda!のポートフォリオ→https://cocoda-design.com/KN619
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。