見出し画像

SITE2-pc

イメージ

レトロポップ、ぬくもりのある、動きのある

ターゲット、目的

蔵王温泉に観光で訪れた女子高校生・大学生。
写真を撮りたくなるようなビジュアルで購買を促す。

文字

フォント:"IBM Plex Sans JP", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
見出し:40px
小見出し:32px
本文:15、16px

配色

ベース1:#D3E4DE
ベース2:#EAD9C6
アクセント:#052A31
文字:#052A31

トップページ構成

  1. TAKAYU♨️温泉パーラーとは

  2. メニュー

  3. 隣のお部屋

  4. 店舗情報

デザイン

  • レトロロゴを大胆に配置していて印象がわかりやすい

  • 温泉らしいあしらい

  • 左右マージンは140px

  • Aboutで見出しと本文を斜め配置にすることで差別化

  • 見出しの背景にうっすら大きめの英語を入れるとより見出しらしくなる

  • メニューで商品ごとにそれぞれ白いボックスでまとめている

  • ボタンとボックスはドロップシャドウで統一

  • MENUとSNSは左右に固定

  • MENUはデスクトップ幅でもハンバーガーでコンパクト

  • 見出しと小見出しの上に英語を目立ちすぎないように入れている

実装

  • トップ写真はカーソルに合わせて動く

  • 温泉らしいゆったりとした動き

  • のれんをくぐるような演出

  • 横スクロールやフッターのイラストで和の雰囲気

  • 写真は引きで元写真からぼかし変化

  • ホバー後の色は文字色と一緒


この記事が気に入ったらサポートをしてみませんか?