サイトはこちら

作成時期

2022年3月中旬～2022年4月上旬

作成時間

合計時間：約67時間（内、コーディング部分34.5時間）
□企画・記事作成 ：8時間
・企画：1時間
・業界を調べる：3時間
・コンセプト・記事作成：4時間
□デザイン部分：22.5時間
・スタイルガイド：2.25時間
・ワイヤーフレーム：3.5時間
・デザイン作成PC（ロゴ含む）：12.5時間、デザイン作成SP：2時間
・ハンドクリームデザイン：2時間、スライス：2時間
□コーディング部分34.5時間
・スタイルガイド(CSS)：3.5時間
・HTML：4時間
・SCSS（PC）：7時間、(SP)：10時間
・JavaScript＋@keyframeアニメーション：7.5時間
・修正＋テスト：2.5時間

作成期間

約2週間

使用アプリケーション

VSCode、Illustrator(デザインカンプ)、XD（ワイヤーフレーム、デザインスタイルガイド）

使用言語

HTML、CSS、JavaScript

CSSアニメーションをふんだんに盛り込み、桜の動きがダイナミックな印象をつけるLPサイトのサンプルを作成いたしました。
「北海道の冬の長さによる手荒れ」＋「春が手元だけにも早く訪れてほしいと願う気持ち」がこのサイトのコンセプトになっております。もちろん北海道感を出すために「北海道を代表する桜エキス（オオヤマザクラ、ソメイヨシノ）を使用」、「オンラインでも販売しているものの、店舗販売は北海道限定」という設定にしております。

メインビジュアルはCSSのキーフレームを細かく制御することによって、フェードイン・アウトの動きを実現いたしました。JavaScript面では「InterSectionObServer」APIを使用し、「トップからの高さ」ではなく「要素」の位置に差し掛かった時点で、キーフレームアニメーションが動作するようにしております。