白桃明星株式会社様(仮想サイト)

白桃明星株式会社様
(仮想サイト)

制作期間 画像、素材準備 3時間
デザイン構想 6時間
コーディング 25時間
使用ソフト等 HTML CSS CANVA
ペルソナ 20〜30代の女性
サブターゲット 化粧品に興味がある男性
キーメッセージ 美しさをすべての人へ
サイトのこだわり オーガニックコスメのブランド。
メインターゲットは、20代〜30代ですが、他の年代、
男性にも「美しさ」を届けるといった想いを持つ企業。
サイト全体の雰囲気は「落ち着いた」「大人っぽい」を、
キーワードに配色や配置を決定。

各ページの紹介

Toppage 制作のポイント

  • ・メインカラーと白を交互に配色することでメリハリをつける。
  • ・各セクションが画面全体に収まるように高さを調整。
  • ・伝えたいメッセージのフォントは大きく。
  • ・メッセージと共に会社概要のリンク先を配置。
  • ・アイテムリストをグリッドで配置することで、全アイテムの把握が容易に。
    →画像ホバー時にスケールを導入し、リンクの紐付けを表現。

About usの「Care for skin」の抜粋

制作のポイント

忘れがちなコスメの期間を表でわかりやすく表示。
ページの切り替えをわかりやすくするため、asideにナビを配置。

club

Club Memberページの抜粋

制作のポイント

イベント概要のチラシを挿入することでイベント開催を分かりやすく。

チラシはCANVAで作成。

制作を終えて

コメント

初めて1から作ったサイトです。
授業で学習したCANVAを使うことでデザインの幅を広げました。
ロゴもCANVAで作成しました。
大人っぽい雰囲気を出すため、落ち着いた色を使い、写真選定にこだわりました。
jQuery学習前のサイトですので、動きはホバーのみです。
Classを使い分け、細かなレイアウトにこだわったため、制作時間が少しかかりました。
講師の方に、落ち着いた雰囲気で分かりやすいとフィードバックいただきました。

ご覧いただきありがとうございました。