仮想の美容系アプリのLPを想定してデザインしました。
クライアント
30代後半〜50代女性向けの歴史ある美容系雑誌「Oshare」の出版社。メディアと連携するかたちで、スキンケアや日々のメイクをサポートするアプリをリリース予定。それに合わせプロダクトの概要がわかるLPを公開したい。
という想定にしました。
UI／UX設計
プロダクトがスマートフォンアプリであることから、スマホベースに進めていきました。
また、全体的にセクショニングを強調することで、シンプルで概要を掴みやすくすることを意識しました。具体的には、
- 各セクションを画面サイズで表示
- スクロールスナップとアニメーションを使用して遷移をはっきりと
- 見出し（明朝体）と説明文（ゴシック体）で書体を使い分け
各セクションは、下記のようにしました。
最初と最後のセクションにはDLリンクを配置することで、アプリのダウンロードにスムーズに繋げてもらうようにしました。また、中間のセクションでもDLに誘導するためのボタンを配置しました。
2番目のセクションは、長く親しまれてきた雑誌である「Oshare」のCIを提示することで、信頼感や安心感を与えることを目的としました。
3〜6番目のセクションでは、サービスをイメージしてもらうために、アプリ使用の流れを4つに分けて簡単に紹介しました。
デザイン・トンマナ
ベースのカラーでは素肌をイメージしたベージュ（#FFFCF4、#FEF4DF）でナチュラルな印象に仕上げました。高級感を出すために文字色は黒（#000000）を採用しました。
実装
スクロールスナップはCSSで実装しました。スマートフォンでの閲覧が前提となるため、ブラウザによってアドレスバー等により画面が見切れないように、JavaScript側で画面の高さを取得。変数でCSSに反映しました。各セクションのアニメーションはjQueryにより設定しました。
