4作目として、ヘアケア商品を扱う架空のECサイトを制作しました。自然の美しさと調和を追求するヘアケアブランドを4つ展開しています。職業訓練校の年末年始休暇を利用し、約2週間という短期間で制作しました。CSSはクラス名を多用し、行数を極力抑えることで効率的なコーディングを心掛けています。
URL
https://adjustacademy.com/0335/d240913-040335/site04/index.html
担当
企画・情報収集・ペルソナ設定（5時間）
ワイヤーフレーム作成（12時間）
画像収集（4時間）
デザインカンプ作成（10時間）
ロゴ作成（0.5時間）
コーディング・jQuery（40時間）
使用ソフト
Googleスプレッドシート
Gemini
Figma
Adobe Firefly
Photoshop
Illustrator
Visual Studio Code
制作期間
2024年12月23日～1月5日
作成ページ
サイトの目的
サービスの認知と新規クライアントの獲得
ターゲット
自然由来の成分を重視し、自分自身の髪と頭皮の健康に関心が高い男女と設定
年齢層: 20代後半～40代
性別: 女性が中心だが、男性も一定数いる
使用カラー
#464646
#87A77D
#806C68
制作過程
サイトマップを作成し、サイトの構成を整理して進めました。また、共通するデザインをあらかじめ定めてコーディングを進めました。（Figma使用）
ECサイト「Verdena」とフェスサイト「SHASHICA ROCK 2025」を同時進行で制作したので、簡単な進行管理表をスプレッドシートで作成し作業を整理しました。上図は2025年1月7日時点のものです。1日ごとの作業に使える時間を先に3週間分書き出し、目標の完成日から逆算して作業予定を割り振りました。予定通りに作業が終われば緑色で完了を示し、遅れているところはピンク色で示し、その他の作業を早めに進めるようにしています。
デザインについて
自然由来成分とサステナビリティを重視し、アースカラーを基調とした温かみのある色合いで統一しました。女性だけでなく、幅広い層に受け入れられるよう、シンプルかつ洗練されたデザインを心がけ、余白を多く取りすっきりとした印象に仕上げました。
特に、自然な美しさを求める女性をターゲットに、自然素材を連想させる素材感を背景に採用しましたが、同時に、男性の求めるシンプルで機能的なデザインも意識し、無駄な装飾を省いたミニマルなデザインに仕上げています。
シンプルで飽きのこないデザインは、長く愛用したいというお客様のニーズに応えます。商品ページでは、各商品の成分や特徴を分かりやすく説明し、安心感を与えることで、購入へのハードルを下げています。
ユーザーが各ブランドのコンセプトページや特集記事へスムーズに遷移できるよう、Photoshopで視覚的に訴求力のあるリンク画像とバナー画像を計8点デザインしました。
コーディングについて
jQueryプラグイン「slick」を利用し、トップビジュアル、ランキング、商品詳細ページのサムネイル画像のスライドショーを実装しました。各セクションで異なる動きを実現するため、slickの初期設定をカスタマイズしています。特に、トップページのランキングリストは、商品数の変動に柔軟に対応できるよう、カウンターを自動で更新する仕組みをCSSで導入しました。
また、Flexboxレイアウトを採用し、PCだけでなくスマートフォンでも快適に閲覧できるよう、メディアクエリを用いてレスポンシブデザインに対応しています。
商品一覧のレイアウトには、CSSのFlexboxを用い、align-itemsプロパティでアイテムの高さを揃えています。これにより、文章量に関わらず、すべてのアイテムが同一の高さで表示されます。
また、マウスオーバー時に背景色を変化させることで、ユーザーの視線をアイテムに集め、クリックを促すデザインにしています。
