gioiello
- 架空のマカロン専門店のWebサイト -
制作期間 |
2023年9月〜(1ヶ月半) |
担当範囲 |
企画・デザイン・コーディング |
使用技術 |
Photoshop・Dreamweaver(HTML/CSS/JavaScript) |
URL |
gioiello.sub.jp |
概要
- discription -
架空のマカロン専門店gioielloのWebサイトです。
スクールの修了課題として制作しました。
レスポンシブデザインになっています。
コンセプト
- concept -
ちょっとしたトキメキを感じる、
ロマンがあるサイト。
ターゲットは20~40代の男女です。
大人っぽいシックなデザインに挑戦しました。
カラフルなマカロンがより映えるように
サイト全体は敢えてシンプルに。
JavaScriptとCSSを使って、
初めて見た人がグッとくるような
細かいアニメーションを入れて、
シンプルながらに印象に残るようにしました。
商品に合わせた"世界観"に思考を凝らして
商品の魅力を引き出し、
カラフルな見た目でも毒々しさを感じさせず、
どんな味なんだろう？と興味が持てるような
写真の使い方を意識して制作しました。
-
point.01
サイトを見てまず最初に「美味しそう」「なんか気になる」と思ってもらえるように、一番美味しそうに見えるマカロンの画像を画面いっぱいに表示させて印象的になるようにしました。
-
point.02
ブランド名にある"宝石"が並ぶ様子と、ショップの印象と文章のイメージに一番合う写真選びを意識しました。
-
point.03
見た人の興味をグッと惹くような一言と、文字が光りながら現れる動きを入れることでサイトの世界観を楽しんでもらえるようにしました。
-
point.04
サイト以上に商品に興味を持ってもらうことが大切なので、一番力を入れた部分です。商品の写真を宝石を連想させるような形にして、流れるような動きを入れることでちょっとしたトキメキをプラスしました。商品名に敢えて味の説明を入れずに情報を減らすことで、ミステリアスな印象を持たせて、世界観と「この宝石はどんな味なのか」と興味が湧くような印象を感じてもらえるようにしました。
-
point.05
サイト内でも注目度や優先度の低いNEWSのページは敢えてシンプルなデザインにして、目立たないけどわかりやすいようにまとめました。