Cb69b22da6f41ab4

(架空)DINER inc.

OVERVIEW

実在する飲食店のWebサイトを架空で制作しました。 制作目的:集客の為 ターゲット:トレンドに敏感でSNS(特にInstagram)を使用する若年層 制作枚数:7ページ 制作期間:12日間

YEAR 2021


  • 全体デザイン:余白を十分に取り、シンプルなデザインになるよう意識。トレンドに敏感な若年層の集客をメインとしたWebサイトなので、実際に来店した雰囲気がサイト内で伝わるよう、店内と料理の写真をメインに写真を多用した作りに。
  • サイト構成:TOPページ→下層ページ(各店舗紹介ページ×3、MUSIC、ONLINE、CONTACT)

  • TOPページ:シンプルなデザインなのでメニューや各店舗紹介の写真などクリックできる箇所にはホバー時に動くアニメーションを使用し分かりやすく、且つ動きをつけた。下段にはJqueryのloop sliderを使用し、3店舗それぞれの写真をよりTOPページで見てもらうように。

  • 各店舗紹介ページ:トップに料理と店舗内の写真をスライドショーで挿入。各店舗のInstagramにすぐ飛べるようスライドショー下にアイコン、その下におすすめの記事を表示させ、より訴求に繋げるように。googlemapはページと馴染むようにフィルターをかけセピア調に。トップの店舗ロゴをクリックすると各店舗のイメージに合わせた動画に飛ぶちょっとした遊び心も。

  • MUSIC:BGMにもこだわっている為、いつでもどこでも店内の雰囲気を感じてもらえるよう音楽のページを制作。Apple Musicのプレイリストと、Youtubeの動画を埋め込み。各コンテンツは背景と馴染むよう、少し半透明に。

  • ONLINE:製品に興味を持ってもらう為に画像、製品名、値段のみのシンプルな作りに。サイト上下にスライドアニメーションで文字を流し動きを出した。製品画像はホバー時に画像が変わるように。

  • CONTACT:コンタクトフォームはシンプル且つ少しレトロな感じを出す為、名前などの要素と入力ボックスのみの仕様に。クリックした際のローディングアニメーションで写真を重ね、ここでも店舗のイメージ入れ込んだ。


  • レスポンシブ:各ページレスポンシブにも対応。


WEBSITE