サイトレビュー
【勝手にWEBサイトレビュー #14】イラストが可愛らしいギリシャのデ...
2021.02.28
2021.02.13
今回から不定期に弊社(株式会社スピカデザイン)で制作したWEBサイトの実績を紹介していきます!
スピカデザインのサイト内にも実績を紹介するページはあるのですが、そこでは載せきれない制作のこだわりポイントなどをお伝えしていきたいと思います。
目次
記念すべき第1回目に紹介するのは「三瓶バーガー・トーキョー」です!
▼URL
https://sanbe-tokyo.com/
▼制作実績掲載ページ
https://spiqa.design/works/sanbeburgertokyo/
制作はディレクター1人、デザイナー1人、コーダー2人で担当しました。
またサイト制作だけでなく、メインとなるハンバーガーの商品写真撮影、内装の一部も弊社でおこなました。
背景に画用紙のようなテクスチャを敷いたり、イラストのカットをフェルト風の加工したりして全体的に絵本のような温かみのあるデザインにしました。
女性やファミリー層にも親しみを持ってもらえるような、アットホームな雰囲気を目指しました。
また、三瓶バーガーは島根県発祥のご当地バーガーなので、随所に島根県に関係する観光地等のイラストを使用しています。
ABOUTページの「生産者の皆様」ではスケッチブック風にデザインし、ハンバーガーにはどのような野菜を使用しているのか興味を持ってもらえることを目指し…
「島根の名所・名産品」では地図上のイラストをクリックすると説明文がポップアップで出るようにしています。絵本のような優しい雰囲気にして楽しく島根県について知ってもらえるように工夫しました。
ロゴに使われている赤をメインカラーにし、トップページのFVや下層ページでも赤いベタ背景を使いました。
FVではハンバーガーとキャッチコピーを大きく配置することでインパクトを強くしています。
ちょっとした部分でもホバーのアニメーションを色々な部分に設定したりするなどして動きのあるデザインを心掛けました。
1.トップページの「三瓶バーガーの3つのこだわり」
3つのこだわりを敢えて隠し、ホバーすることでコンテンツが広がって中身を読むことができます。
2.沈むボタン
「もっと見る」ボタンや、画面下部のマスコットキャラクターを使った「上にもどる」ボタンはホバーすることでグッと沈むような動きを付けています。
3.揺れるボタン
ABOUTページの「島根の名所・名産品」の地図上のイラストはホバーで傾くように設定をしています。
このサイトはWPで作っているので、色々なところは更新可能にしています。NEWSはもちろん、MENUもクライアントが更新できる作りにしています。
Advanced Custom Fieldsの繰り返しフィールドを使うことによって実現しています。
ハンバーガーのメニューは単純に数を増やすことができます。
サイドメニューとドリンクメニューのページはその中でもジャンル分けをし、メニューだけでなくジャンル自体も増やすことができます。
例えばドリンクメニューページの場合、「ソフトドリンク」というジャンルの中に
①見出し
②説明文
③メニュー名(英語・日本語)+値段
があります。
その次に同じように「オリジナルアルコールドリンク」というジャンルがあり、①~③があります。
繰り返しフィールドを二重に設定することで③の数を自由に増やすだけでなく、「ソフトドリンク」「オリジナルアルコールドリンク」といったジャンル自体も増やせるようにしています。
方法は下記の記事でご紹介しているので是非ご覧ください!
実は制作したのは三瓶バーガー・トーキョーのWEBサイトだけでなく、店内の黒板アートもデザイナーが作りました!
弊社にはイラストが得意なデザイナーがいるのでWEBやDTPのデザインだけでなく、こういった販促物も対応可能です!
スピカデザインではWEBサイトだけでなくパンフレットやチラシといったDTPデザインも承ります!
是非お気軽にご相談ください。
株式会社スピカデザイン