webサイト分析16｜丸亀製麺

ここのうどんは、生きている。丸亀製麺

まとめ

縦書きの和風テイストが目立つ。
情報の優先度をつけた配置と、縦書き横書きの使い分けをしている（特にレスポンシブ）。

---

カテゴリー

飲食

概要

讃岐釜揚げうどん　丸亀製麺公式サイト

コンセプト

ここのうどんは、生きている。

ターゲット

丸亀製麺へ行くことを検討している人
CMでみた新商品が気になる人
持ち帰り注文をしたい人

目的

店舗への来店

コンバージョンまでの動線

おすすめ・限定メニューがメインビジュアルの次のコンテンツに設置。最新のメニュー、今しか注文できないメニューがわかる。
左側に「お店を探す」「お持ち帰り」メニューが常に固定

---

メインビジュアル

右に大きく動画が再生。丸亀製麺の制服を着た職人が麺を作り、茹でるところを見ることができる。
小麦の粉っぽさ、湧き立つ湯気、艶を感じる麺などシズル感が演出されている。
ボタンと言語切り替え以外は縦文字で書かれている。

グローバルナビ

メニュー
こだわり
お店を探す
お持ち帰り
公式アプリ

ナビは常に右側に固定される。縦文字でお品書きっぽい。

ホバーすると、ロゴと同じく赤色に。

コンテンツ

メニュー
トピックス・お得な情報

・メニュー

まず、「おすすめ・限定メニュー」の紹介。店舗のれんのようなあしらい。

「新発売」で、新商品の案内。
上述の「おすすめ・限定メニュー」にも登場したが、ここでもピックアップ。

最後に「定番メニュー」の紹介。
カテゴリーごとに写真つきで掲載。
メインのうどんの写真が一番大きく、下に細分化される。最後の新商品は、うどんと同じサイズの写真。全ての四角形が大枠の中に整列されている。

・トピックス・お得な情報

バナーで表示されている。ここは文章だからか、コンテンツ名以外は横文字。

・こだわり/麺職人

麺の作り方、それをこだわる職人について記載。

毎日異なる麺職人が紹介されるよう。
それだけ店舗に職人がいるということがわかる。

・サービス・店舗のご利用について
・CMギャラリー

利用方法について、タイトルは縦字、補足は横文字で記載。
CMギャラリーでは、有名女優も出演するCMが掲載。CMを見て来店する人も多そう。

・重要なお知らせ

一般のお客様へ対する、重要な案内がピックアップ。

・お知らせ/店舗情報/サステナビリティ

ここでは店舗だけでなく、会社としての案内も掲載。

・フッター

フッターは詳細に情報が書かれている。
右側の会社情報とは縦線で区切られているのが印象的。
左側は店舗に関する情報なので「丸亀製麺」のサイトとしてはこちらがメインになりそう。

レスポンシブ

1280pxより、ハンバーガーメニューと下にメニューボタンが出現
ハンバーガーメニュー、縦の３本線！

ハンバーガーメニュー
開くと、縦線に赤い斜線が入った。
文字も縦で、横方向に並ぶ。お品書きっぽい。

フッターの項目は、会社に関する情報がメインになった。
店舗については、下にメニューボタンが設置されたから省略された？

640px以下サイズでは、
左側にあった見出しが、中央揃えでコンテンツの最初に出てくるように。

定番メニューは縦並びになり、未発売の製品が一番下になった。
より優先度を考えた配置になってそう。

フッターの情報はさらに省略。

配色

主に使用される左２色は、小麦や麺に近い配色。

フォント

Shuei ShogoMincho
Yu Mincho Pr6N M　本文
Yu Mincho Pr6N D　白背景のボタンの文字

白黒トレース

発見と感想

・縦書きで和風のテイストを大事にしている。常に右側に縦書きメニューがあった特にレスポンシブページのハンバーガーメニューなどこだわりがある。
・情報の優先度がついている（あくまで丸亀製麺の店舗情報を重視。会社情報はそれほど重視していない、レスポンシブでは特に顕著。）
・ロゴの赤いハンコマークのように、赤色はワンポイントでの使用が多かった。
・背景色は２色を交代で使うあしらいが多い。