ウォーキングを目的としたエンドユーザー向けアプリのランディングページです。
(レスポンシブ対応、CSSアニメーション、一部JQuery使用)
楽しく健康を目指すというコンセプトに合わせ、アニメーションを多用してにぎやかで動きのある演出をつけました。
情報設計、ワイヤーフレーム、デザイン、実装をすべて担当。
思い描いた動きを表現するためにどういった方法でアニメーションを作成するか検証するとことから始まり、いくつか作って実際の動きのタイミングを見ながら要素を少しずつ調整、を繰り返し試行錯誤。
アニメーションは奥深いので今後も勉強していきたいです。
【担当業務】
情報設計、ワイヤーフレーム、デザイン、マークアップ、コーディング
- ライティング、情報設計。
- HTML、CSSでのコーディング。
- ビジュアルエディタを用いたデザイン業務。
【工数】
- 競合調査:1日
- ワイヤーフレーム、ライティング:1日
- デザイン:2日
- コーディング(アニメーション実装含む):3日
- 検証・修正:1日
【チーム】
企画2名、デザイン、構築1名
【URL】
https://static.cld.navitime.jp/walkingapp-storage/common/html/service_lp/index.html
【制作環境】
Win,Adobe Illustrator,Adobe Photoshop,Adobe Dreamweaver,HTML,CSS,JQuery
