レトロ甘味処 クローム(2024.9)

About the Work

制作時間

48h

使用技術

Figma / Photoshop / HTML / CSS / jQuery

対応デバイス

PC(1920×1080)

リンク

クリックしてページを開きます

Target

京都観光に行く人。老若男女問わないが、若年層にも興味を持ってもらいたい。

Concept

「レトロスイーツを楽しみながら、ぶらり京都めぐり」
京都の街をめぐりながら楽しめる、クリームソーダをはじめとする食べ歩き商品に特化した専門店を題材にしました。近年流行りのレトロと京都の和を融合させました。

Design

フォントや背景パターンの質感でレトロっぽさを出しました。加えて少し深みのある色やタイトルを縦書きにすることで和の雰囲気を出しています。MVなどの写真類はおいしそうに且つフォトジェニックになるように加工しました。 看板メニューのクリームソーダ3種は、大きく写真を配置して同系色の背景エリアを作ることでより印象に残るようにしました。スイーツ部分は小ぶりながら丸く切り抜かれた写真のホバーアニメーションで思わずクリックしたくなるようにしました。

Color

#210c0c

#f3e6b4

#2d6e5d

#6d2d2d

#2d5e6d

Font

annabelle, ab-kirigirisu, yu-gothic-pr6n

Structure

若者に興味を持ってもらいたいということで右下のSNSアイコンを追従するようにしました。
jQueryを使用しています。ハンバーガーメニュー、スムーススクロール、フェードインを実装しています。 ヘッダーは下スクロール時はサイト内容に集中していただくため表示されないようにし、上スクロール時に表示されるようにしました。