【制作実績紹介 #01】三瓶バーガー・トーキョー

今回から不定期に弊社（株式会社スピカデザイン）で制作したWEBサイトの実績を紹介していきます！
スピカデザインのサイト内にも実績を紹介するページはあるのですが、そこでは載せきれない制作のこだわりポイントなどをお伝えしていきたいと思います。

紹介サイト「三瓶バーガー・トーキョー」

記念すべき第1回目に紹介するのは「三瓶バーガー・トーキョー」です！

▼URL
https://sanbe-tokyo.com/

▼制作実績掲載ページ
https://spiqa.design/works/sanbeburgertokyo/

制作はディレクター1人、デザイナー1人、コーダー2人で担当しました。
またサイト制作だけでなく、メインとなるハンバーガーの商品写真撮影、内装の一部も弊社でおこなました。

こだわりポイント

①絵本やスケッチブックのような温かみのあるデザイン

背景に画用紙のようなテクスチャを敷いたり、イラストのカットをフェルト風の加工したりして全体的に絵本のような温かみのあるデザインにしました。
女性やファミリー層にも親しみを持ってもらえるような、アットホームな雰囲気を目指しました。

また、三瓶バーガーは島根県発祥のご当地バーガーなので、随所に島根県に関係する観光地等のイラストを使用しています。

ABOUTページの「生産者の皆様」ではスケッチブック風にデザインし、ハンバーガーにはどのような野菜を使用しているのか興味を持ってもらえることを目指し…

「島根の名所・名産品」では地図上のイラストをクリックすると説明文がポップアップで出るようにしています。絵本のような優しい雰囲気にして楽しく島根県について知ってもらえるように工夫しました。

②インパクトのあるFV（ファーストビュー）に

ロゴに使われている赤をメインカラーにし、トップページのFVや下層ページでも赤いベタ背景を使いました。
FVではハンバーガーとキャッチコピーを大きく配置することでインパクトを強くしています。

③動きやアニメーション

ちょっとした部分でもホバーのアニメーションを色々な部分に設定したりするなどして動きのあるデザインを心掛けました。

1.トップページの「三瓶バーガーの3つのこだわり」
3つのこだわりを敢えて隠し、ホバーすることでコンテンツが広がって中身を読むことができます。

2.沈むボタン
「もっと見る」ボタンや、画面下部のマスコットキャラクターを使った「上にもどる」ボタンはホバーすることでグッと沈むような動きを付けています。

3.揺れるボタン
ABOUTページの「島根の名所・名産品」の地図上のイラストはホバーで傾くように設定をしています。

④更新可能なメニュー

このサイトはWPで作っているので、色々なところは更新可能にしています。NEWSはもちろん、MENUもクライアントが更新できる作りにしています。

Advanced Custom Fieldsの繰り返しフィールドを使うことによって実現しています。

ハンバーガーのメニューは単純に数を増やすことができます。

サイドメニューとドリンクメニューのページはその中でもジャンル分けをし、メニューだけでなくジャンル自体も増やすことができます。

例えばドリンクメニューページの場合、「ソフトドリンク」というジャンルの中に
①見出し
②説明文
③メニュー名（英語・日本語）＋値段
があります。
その次に同じように「オリジナルアルコールドリンク」というジャンルがあり、①～③があります。

繰り返しフィールドを二重に設定することで③の数を自由に増やすだけでなく、「ソフトドリンク」「オリジナルアルコールドリンク」といったジャンル自体も増やせるようにしています。

方法は下記の記事でご紹介しているので是非ご覧ください！

コーディング

2020.11.18

ACFの拡張機能、繰り返しフィールドの使い方【WordPress】

WPのカスタマイズでとっても役に立つカスタムフィールドですが、Advanced Custom Fields（以下ACF） というプラグインに繰り返しフィールド（…

WEBサイトだけでなく店内の黒板アートも

実は制作したのは三瓶バーガー・トーキョーのWEBサイトだけでなく、店内の黒板アートもデザイナーが作りました！

弊社にはイラストが得意なデザイナーがいるのでWEBやDTPのデザインだけでなく、こういった販促物も対応可能です！

制作のご依頼は…

スピカデザインではWEBサイトだけでなくパンフレットやチラシといったDTPデザインも承ります！
是非お気軽にご相談ください。