Website
「Fee blanche」
URL:http://9713.web-seito.com/feeblanche/
- ユーザー名 :
- webseito
- パスワード :
- seito
制作期間
- 企画・デザイン
- 約2日(Figma・Photoshop・Illustrator)
- コーディング(PCサイズのみ)
- 約2日(HTML・CSS・Javascript)
画像引用
ADOBE STOCK
CONCEPT
制作概要
授業にて「架空のケーキショップ」Webサイト制作の課題があり、作成しました。
ターゲット設定
クラスメイト(20代半ばの女性)をターゲットとして制作するという課題でした。
女性らしい柔らかさと上品さ、かわいらしさの両立を目指しました。
DESIGN
Webサイトデザイン
デザインのポイント
ポイント①
自作ロゴと動画を用いたトップページデザイン
ターゲット層に響く「上品さ」と「親しみやすさ」を両立させるため、Illustratorを用いてオリジナルのロゴを制作しました。
また、サイトの顔となるファーストビューには複数素材を編集した動画を大胆に配置しました。 テキストや静止画だけでは伝わらない店舗の空気感を直感的に伝えることで、 ショップへの没入感を高めるデザインを目指しました。
ポイント②
プロダクトカラーに連動したUI設計によるブランド体験の向上
商品の持つ色彩を軸に、ページ全体の配色を展開するUI設計を行いました。 商品パッケージのテーマカラー(オレンジやブラウンなど)と、サイトの背景のトーン&マナーを連動させることで、 サイト全体に高い統一感を持たせています。
ユーザーが「現在どの商品を見ているか」を直感的に認識できるようにすることで、 単なる情報伝達にとどまらず、商品の世界観に自然と入り込める没流感を目指しています。