スマホ特化型の構成

今回は昨今増えてきたスマホに特化した構成で制作いたしました。中央のみスクロールできる構成で、LPのように1ページでスクロールして全ての情報が把握てきる様になっております。くるくるとまわる"SCROLL DOWN"のアニメーションでスクロールを促す様にいたしました。

左側には常時表示させたい店舗情報を配置し、手軽にアクセスできる様にしております。スマホ版では中央のみの表示になるため、店舗情報は、下部へ移動する構成になります。このような組み換えがしやすいように、CSSではGridレイアウトを使用いたしました。

右側にはQRコードを配置しております。仕事の合間や自宅でサイトを閲覧し、QRコードを読み取りスマホを持ってカフェへ訪れてもらえるようにいたしました。これにより、リテラシーの有無問わずスマホへサイトが送ることができます。

また左右は大きなスペースとなるので、工芸茶の写真を背景に使用し、サイトの世界観に引き込める様にいたしました。

カフェの雰囲気を伝える

今回制作したカフェは、落ち着いた日常を忘れて中国茶を楽しめるカフェです。空間や茶器、茶葉にこだわったカフェであるため、Webサイト上でもその雰囲気が伝えられるようデザインいたしました。

ファーストビューからフッターまでを入店から退店までをイメージしデザインいたしました。ファーストビューでは店外のドアの外から中を見ている様に上部にアーチをつけたメインビジュアル、そこから店舗前でどのようなお店か？を知ってもらうために茶葉へのこだわりを配置。入店後はメニューを開き、茶葉を選び、目の前にお茶が運ばれてくる。その後はお支払い、そして引きのテーブルに並ぶ茶器の写真を使用し振り返っているような雰囲気をイメージいたしました。

このような流れにすることで少しでも店舗の雰囲気に引き込み、実際に行きたいと思っていただける様にデザインしております。