赤ちゃんと使えるシャンプー「AngeLing」の架空Webサイト制作

要件定義

事業内容: 赤ちゃんと使えるシャンプー
目的: 製品の購入
ターゲットペルソナ: 妊娠中の女性。妊娠を期に体質が変わってしまった女性。
ターゲット背景: 浴室に個々のシャンプー容器を置くスペースに余裕が無い。購入のため、出かけるのが億劫。

サイト名: AngeLing(エンジェリング)　※由来は「angel ring」=「天使の輪っか」より

AngeLingロゴマーク

イメージカラー
母と子の温もりや暖かみを表現したかったので、ベースカラーに「#f4efec」
温もりと同時に可愛さを出したかったので、メインカラーに「#f4dfdd」
メリハリをつけるけど、どこか暖かみを感じるアクセントカラーに「#a59c95」

制作期間: 約3ヶ月間(要件定義～コーディング)

Webサイト内の構造

ファーストビュー: AngeLingの世界観がどのようであるかを一目で認識してもらう。
↓
概要(CONCEPT): AngeLingが誕生した理由とコンセプト。
↓
AngeLingとは？(ABOUT): AngeLingの特徴やこだわりについて。
↓
商品一覧(PRODUCTS): AngeLingの商品について。下のボタンで商品の詳細を見れるような構造にしました。
↓
よくある質問(FAQ): AngeLing使用にあたって、お問合せいただく質問の回答。
↓
連絡先(CONTACT US): 製品についての質問等がある場合のお問合せフォームとアクセス

ワイヤーフレーム＆デザインカンプ(左:PC、右:スマートフォン)

ワイヤーフレーム(左: PC,右: スマートフォン)

デザインカンプ(左: PC,右: スマートフォン)

使用ソフト: いずれもAdobe Photoshop2022

コーディング

使用ソフト: Atom

使用言語：HTML5,CSS,Javascript,JQuely