Kaoru Tanizaki's Portfolio

Website

「Fee blanche」

URL:http://9713.web-seito.com/feeblanche/
ユーザー名 :
webseito
パスワード :
seito
制作期間
企画・デザイン
約2日(Figma・Photoshop・Illustrator)
コーディング(PCサイズのみ)
約2日(HTML・CSS・Javascript)
画像引用

ADOBE STOCK

架空ケーキショップ「Fee blanche」Webサイト

CONCEPT

制作概要

授業にて「架空のケーキショップ」Webサイト制作の課題があり、作成しました。

ターゲット設定

クラスメイト(20代半ばの女性)をターゲットとして制作するという課題でした。
女性らしい柔らかさと上品さ、かわいらしさの両立を目指しました。

DESIGN

Webサイトデザイン

Webサイトデザイン1 Webサイトデザイン2

デザインのポイント

ポイント①

自作ロゴと動画を用いたトップページデザイン

ターゲット層に響く「上品さ」と「親しみやすさ」を両立させるため、Illustratorを用いてオリジナルのロゴを制作しました。

また、サイトの顔となるファーストビューには複数素材を編集した動画を大胆に配置しました。 テキストや静止画だけでは伝わらない店舗の空気感を直感的に伝えることで、 ショップへの没入感を高めるデザインを目指しました。

トップページデザイン

ポイント②

プロダクトカラーに連動したUI設計によるブランド体験の向上

商品の持つ色彩を軸に、ページ全体の配色を展開するUI設計を行いました。 商品パッケージのテーマカラー(オレンジやブラウンなど)と、サイトの背景のトーン&マナーを連動させることで、 サイト全体に高い統一感を持たせています。

ユーザーが「現在どの商品を見ているか」を直感的に認識できるようにすることで、 単なる情報伝達にとどまらず、商品の世界観に自然と入り込める没流感を目指しています。

商品とページカラーの統一