Webページトレース

制作時間　：約25時間
使用ツール：Photoshop

トレースのみではなく、要件定義を考えることやスタイルガイドやPCとSPのデザインの分析を行いました。

|　トレースしたLP

　株式会社スマートバンクが提供する「家計簿プリカ」B/43のLPトレースを行いました。

　実際のサイトはこちらです。

|　要件

・ターゲット
　20代30代の社会人（何にお金を使っているかお金の流れを正確に管理したい人）
　20代30代の同棲しているカップルや夫婦（家計を一緒に管理したい人）
　小学校5年生〜高校3年生のお子様をお持ちの保護者
 （お小遣いとして利用。子供が何にお金を使っているか明確に把握したい人）
　→それぞれのカードの特徴から上記のターゲットを考えました。

・目的
　アプリをダウンロードしてもらう
　カードの申し込みをしてもらう
　サービス内容と商品の魅力を載せ、顕在ニーズの人にアプリダウンロードを促す
　→アプリのダウンロード後にカードの申し込みに進めるため一番の目的はアプリダウンロード
　　だと思いました。また、サービス内容と商品の魅力が細かく載っているため不安に思って
　　始められていないが始めたいと思っている顕在ニーズの人に不安を解消させて
　　アプリダウンロードを促していると考えました。

|　スタイルガイド

相手が読みやすいように資料の制作を行いました。

|　PCとSPのデザイン分析

PCとSPのデザインの違いをまとめました。

|　工夫したこと

トレースについては、ガイド線を引いたり、カーニングで見本と忠実に再現できるように、
頑張りました。フォントが同じでも、フォントの太さで見本と違くならないように
見本と交互に観察しながら進めていきました。
スタイルガイドと分析について、なぜそのカラーやフォントが使われているのか、
PCとSPの違いは何かなどターゲットや目的と照らし合わせて言語化できるように
努力しました。

|　制作を通して学んだこと

Webサイトにもきちんと情報設計を考慮した上でサイトのデザインがされていることを
学びました。また、ターゲットやサイトの目的に合わせ、フォントや写真、文章、
アプリダウンロードの画面が置かれており、ユーザーがページ離脱をしないような工夫が
されていることが分かりました。
余白を全てのコンテンツ統一するのではなく、読んでほしいコンテンツを余白をたくさんとる
などユーザーが見やすいよう意識されていることに気づきました。