No.011「EX GARDEN CAFE」のからくり

No.011 EX GARDEN CAFE 飲食
No.011 EX GARDEN CAFE-ワンピースの楽譜 | Webサイト100選

No.011 EX GARDEN CAFE- ワンピースの楽譜 | Webサイト100選

サイト概要
EX GARDEN CAFE(イーエックスガーデンカフェ)のWebサイトです。六本木ヒルズのテレビ朝日1階アトリウム内にあるこだわりのコーヒーが飲めるガーデンカフェです。全面ガラス張りの開放的な緑あふれる空間でゆったりとした時間を過ごせます。ドリンクメニューには山梨県鳴沢村の天然水を使用しており、サンドイッチやサラダなどフードメニューも豊富に取り揃えています。

No.011 EX GARDEN CAFE

No.011 EX GARDEN CAFE-ワンピースの楽譜 | Webサイト100選

ここが魅力!
・お店のメニューの食べ物、飲み物がアップで映された画像が各カテゴリのリンク画像に使われていて、もっと商品を見たくなる工夫がされている。
※ただ、どの商品カテゴリ画像をクリックしても、同じPDFの1ページめが表示される。
(それぞれの画像をクリックできるようにしている必要性があるのかが懸念点?)

・店頭の紙のメニューと同じ形式のメニュー表がPDFファイル(デジタル形式)で見られる!
・Twitterのタイムラインが埋め込まれており、最新の商品情報や営業状況が分かる!

オンラインショップのページにとぶことができる!

No.011 EX GARDEN CAFE-online shop

No.011 EX GARDEN CAFE-online shop-ワンピースの楽譜 | Webサイト100選

構成
FV

No.011 EX GARDEN CAFE-FV

No.011 EX GARDEN CAFE-FV-ワンピースの楽譜 | Webサイト100選

→URLフラグメント(※1)が用いられ、ページ内リンクで構成されている。headerにあるグローバルナビゲーションの各カテゴリ名をクリックすると指定位置(要素)に移動する。

※1 Webページなど情報リソース内の特定情報の場所を指定するために用いられる識別子

header、nav
→画面サイズ幅768px以下になるとハンバーガーメニューがメインビジュアル(MV)に重なる形で出現する。
幅768px以下

No.011 EX GARDEN CAFE-header(768px以下)

No.011 EX GARDEN CAFE-header(768px以下)-ワンピースの楽譜 | Webサイト100選

footer

No.011 EX GARDEN CAFE-footer

No.011 EX GARDEN CAFE-footer-ワンピースの楽譜 | Webサイト100選

→SNSアイコンと、運営会社である「株式会社テレビ朝日サービス」のサイトリンクが貼られている。「著作権情報の表示」はない。

使用パーツ・アイコン

バナー

分析・考察
■ターゲット:若年層(特に女性?)
[理由]食べ放題があることや、商品内容にテレビ朝日マスコットキャラクターをモチーフにしたものがあることから。

■特徴:
・画像や文字サイズが大きく、全体的に賑やかな印象のデザイン。
・メインビジュアルの左側にあるカフェ名のロゴマークのサイズが大きく、存在感がある。
・店舗デザインにも使用されている手書き風イラストはすべて白。

・トップページの見出し(「Menu List」、「Access」)の文字サイズは52px

・フォントの種類:見出しやグローバルナビゲーションのカテゴリ名は「Noto Serif JP」。
Japaneseを優先的に表示する明朝体フォントであり、少し丸みのある優しい字形で、可読性も優れている。

No.011 EX GARDEN CAFE-見出しフォント(Noto Serif JP)

No.011 EX GARDEN CAFE-見出しフォント(Noto Serif JP)-ワンピースの楽譜 | Webサイト100選

No.011 EX GARDEN CAFE-見出しフォント(Noto Serif JP)

No.011 EX GARDEN CAFE-見出しフォント(Noto Serif JP)-ワンピースの楽譜 | Webサイト100選

お店の住所や電話番号などの基本情報は「メイリオ」。視認性がよく、読みやすいデザイン。

No.011 EX GARDEN CAFE-フォント(メイリオ)

No.011 EX GARDEN CAFE-フォント(メイリオ)-ワンピースの楽譜 | Webサイト100選

Webサイト100選No.011-ワンピースの楽譜 | Webサイト100選

コメント

タイトルとURLをコピーしました