ガブリ!モスチャレンジ | モスバーガー公式サイト

サイトイメージ

フォーマル

カジュアル

オーソドックス

斬新

落ち着いた

にぎやかな

ガブリ!モスチャレンジ | モスバーガー公式サイト
ガブリ!モスチャレンジ | モスバーガー公式サイト

ちょうどいいポイント

にぎやかな新聞的レイアウトのトップページ

赤・緑で補色の組み合わせ、太いウェイトの文字、要素が埋め尽くす画面レイアウトから、作り手の高い熱量が感じられます。その中でも、使用する色数を絞り、文字サイズのジャンプ率や明暗コントラストに配慮することで、視線が迷いにくくなっています。読み込み時のアニメーションも、スクロール操作の中で目をとめるべき箇所を教えてくれます。

スタッフの写真が常にアニメーションしているので、粗いモノトーン調でも人物感がしっかりと伝わるとともに、ワクワク楽しげな印象が感じられます。

丁寧な作りで最後まで読ませる記事ページ

膨大な情報の記事が、画像と文字で丁寧にレイアウトされています。画像は、モチーフを切り抜く、フチやシャドウをつける、シズル感を強める、などの処理をした上で、文字組みにフィットする形で配置。文字も、吹き出しの中に入れる、写真のシェイプの外周に回り込ませる、斜めに傾ける、手書き風書体を使う、などTPOに応じてスタイルを変え、目を飽きさせず流し読みしやすい画面をつくりあげています。

また、記事に対するいいね!アクションを「ガブリ」という独自単位でカウントしているのが、純度の高い世界観づくりに一役買っています。

こだわりのハンバーガーメニュー

ナビゲーションとして広く普及したハンバーガーメニューですが、本物のハンバーガーショップだからこそできる、具象的に作り込まれたオリジナリティの高いデザインになっています。機能的にはありふれたUIパーツであっても、ユーザーの期待値を踏まえた上で、表層への取り組みによって印象的に仕上げられる好例だと感じました。

yuya

黒と白で統一されたクールなデザイン

Tsuki

ぽんっとポップな表現×清潔感