moonbucks-sp moonbucks-pc

「moonbucks」という店のホームページを作成する、という制作課題でした。
コンセプトから各自ですべて考えました。

制作期間
2023年4月~5月
担当範囲
企画、デザイン、コーディング
使用ツール
Visual Studio Code / Canva
ターゲット
独り身で夕食を外食で済ませることが多い、IT職サラリーマン男性。
仕事中のコーヒーが欠かせない。
目的
店内の雰囲気を伝え、新規顧客獲得。
期間限定メニューの周知。
URL
SITE VIEW
三角形

Concept

  • ”コーヒーを飲みながらレコードを楽しむ”
  • コーヒーや食事のメニューが豊富。定期的に期間限定メニューが出される。
  • 何十年も前から続く喫茶店で、木材を使った内装により店内は落ち着いた趣ある雰囲気となっている。
  • 喫茶店ではあるが夜から開店することから、「月=moon」がお店の名前に入っている。

Point

ポイント

店内を思わせるような落ち着いた背景色を全体に使用しつつ、期間限定メニューのお知らせページでは、その内容に合う色への変更も行いました。レコードが心地よく流れる店の雰囲気を、余白を多めにとることで感じることができるようにしました。

ABOUTページでは統一感のない背景画像をあえて選び、 曲が入れ替わっていくレコードのジャケットを表現しています。

#d8cfcd
#876e63
#52433d
mockup1 mockup2 mockup3
mockup4

感想

三角形

初めてのホームページの自主制作で、作っていくうちにやりたいことやイメージがどんどん出てきました。それを実現するために調べて、試して、納得のいく形に作ることができたと思います。

TOPページが少し重くなってしまったため、画像の大きさやアニメーションの実装は一つずつ根拠を持って使っていこうと思いました。