架空のコスメブランドのサイトを作成しました。

URL

https://adjustacademy.com/0653/d241210-080653/site02/index.html

担当

デザイン・コーディング

サイトの目的

コスメブランドの認知

ターゲット

コスメブランドに興味を持った人、プレゼント用にコスメ購入を検討している人

企画段階について

初めに実在するコスメブランド30社分のサイトを調査しました。調べた内容をまとめたのち、会社概要やペルソナを作成して、サイト全体の構成を考えています。また今回は全体の実際にかかった工数を確認するために工数管理表を作成・使用しています。

画像クリックで拡大します。

実在企業のサイト調査 30社分 会社概要、ペルソナ、ディレクトリマップの作成資料 作成した工数管理表

デザインについて

パララックスを取り入れて、サイトを訪れたターゲットの目を引くようなデザインにしています。 商品画像のモックアップはBlenderで3Dモデルを制作し、画像をレンダリングして使用しています。画像の切り抜きや色補正はPhotoshopで行っています。

コーディングについて

jQueryを活用し、動きを取り入れることを重点にコーディングしました。複数のjQueryプラグインを使用したため、プログラムが競合したりデザインが崩れたりしないようテストを繰り返して動作確認を行いました。

※画像クリックで拡大します。

モックアップ製作紹介 サイトの動きサンプル

制作時間

総作業時間：約62時間

調査：1.0時間
競合コスメブランドの分析や、ターゲット層に向けた世界観の検討を行いました。
構成案：2.5時間
ユーザー導線を意識したワイヤーフレーム作成や、ページ構成の設計を行いました。
デザイン：21.5時間
ブランドイメージに合わせ、ビジュアルのトーンと余白バランスを工夫しています。また、今回は架空のコスメブランドサイトの制作のため、商品画像のモックアップを3Dで作成し作成しています。
コーディング：30.6時間
HTML・SCSS・jQueryを用いて実装。アニメーションも取り入れ、ブランドの世界観に合った動きと構造を意識しました。
動作時間・調整：6.5時間
ブラウザチェックを行い、表示崩れの調整を行いました。