No.018「マクドナルド」のからくり

No.018 マクドナルド ファーストフード
No.018 マクドナルド-ワンピースの楽譜 | Webサイト100選

No.018 マクドナルド- ワンピースの楽譜 | Webサイト100選

サイト概要
マクドナルドの公式ウェブサイトです。
期間限定商品など「旬」な情報の他に、原料から製品に至るまでの品質管理や衛生管理、また食育や社会貢献活動に対する取り組みなどお役立ち情報が満載です。

No.018 マクドナルド

No.018 マクドナルド-ワンピースの楽譜 | Webサイト100選

ここが魅力!
・子どもを中心に、ファミリーをターゲットにした「ファミリー」ページがある!工作やぬりえなどの楽しいコンテンツだけでなく、アレルギー検索や栄養バランスチェックといった健康に関するコンテンツなど、親子に役立つ幅広いコンテンツが、会員登録なしで利用できる!

No.018 マクドナルド-ファミリーページ

No.018 マクドナルド-ファミリーページ-ワンピースの楽譜 | Webサイト100選

No.018 マクドナルド-ファミリーページ

No.018 マクドナルド-ファミリーページ-ワンピースの楽譜 | Webサイト100選

・商品の詳細ページの「アレルギー情報」の原材料(揚げ油を除く)として使用している品目の背景色をが変えてあり、確認しやすい!

No.018 マクドナルド-アレルギー情報

No.018 マクドナルド-アレルギー情報-ワンピースの楽譜 | Webサイト100選

構成
FV

No.018 マクドナルド-FV

No.018 マクドナルド-FV-ワンピースの楽譜 | Webサイト100選

→自分が本サイトを初めて見るときに期待する内容として、新商品、限定商品をすぐに探せるかがあると考えた。
その上でサイトを開いてみると、カルーセルパネルデザインで使われている画像の中に含まれているため、すぐに分かった。また、画像に「期間限定」、「新!」、「〇/✕~(いつからか)」の記載があることで、より分かりやすい。

header、nav

No.018 マクドナルド-header(1024px以上)

No.018 マクドナルド-header(1024px以上)-ワンピースの楽譜 | Webサイト100選

→ブランドロゴはグローバルナビゲーションの左側に配置されている。
グローバルナビゲーションのカテゴリ名の上にマウスをかざすと、文字色が赤くなり、文字下に赤ラインが表示される。
「検索」を押すと検索窓がグローバルナビゲーションの下、メインビジュアル(MV)の上に重なって出現する(背景は半透明)。

No.018 マクドナルド-検索窓

No.018 マクドナルド-検索窓-ワンピースの楽譜 | Webサイト100選

画面サイズ幅が1023px以下になるとグローバルナビゲーションが消え、ハンバーガーメニューが左側に出現する。
幅1023px以下

No.018 マクドナルド-header(1023px以下)

No.018 マクドナルド-header(1023px以下)-ワンピースの楽譜 | Webサイト100選

ハンバーガーメニューを開くと、「メニュー」カテゴリのみアコーディオンメニュー(+)になる。

No.018 マクドナルド-ハンバーガーメニュー内

No.018 マクドナルド-ハンバーガーメニュー内-ワンピースの楽譜 | Webサイト100選

footer

No.018 マクドナルド-footer(768px以上)

No.018 マクドナルド-footer(768px以上)-ワンピースの楽譜 | Webサイト100選

→カテゴリ名の上にマウスをかざすと、グローバルナビゲーションのときと同じように、文字が赤くなる。
左下に言語設定(日本語かEnglish)がある。グループ事業会社である「日本マクドナルドホールディングス株式会社(※投資家、株主向け)」のリンクが貼ってある。

No.018 マクドナルド-footer(767px以下)

No.018 マクドナルド-footer(767px以下)-ワンピースの楽譜 | Webサイト100選

使用パーツ・アイコン

バナー

※「YouTube」、「Twitter」、「Facebook」のアイコン部分のみにリンクが貼られている。

分析・考察
■ターゲット:全世代
[理由]子ども向けコンテンツにも力を入れていることや、「社会とのつながり」、「SDGs」といった幅広い範囲の活動についてのページがあるから。

■特徴:
・「キャンペーン」からテレビCMが作られている商品の詳細ページへいくと、CM動画がモーダルウィンドウ(※1)で表示される。

※1 モーダルウィンドウ=元のウィンドウの上に別枠で表示されるウィンドウ。指定された操作を完了、もしくはキャンセルするまでずっと表示され続け、他のウィンドウに移ることができない。

・サイトの背景色は白だが、ポイント部分にシンボルカラーである赤(#BE1C10)と黄色(#FFBC0D)を使うことで、どのページのどの部分を見ていても本ブランドのページであるということが分かりやすくなっている。

No.018 マクドナルド-シンボルカラー

No.018 マクドナルド-シンボルカラー-ワンピースの楽譜 | Webサイト100選

・画面サイズ幅が767px以下になると、画面下に「モバイルオーダー」ページへいけるパーツ、ボタンが固定表示される。

・文字サイズ:トップページの見出し(「おすすめ」、「新着情報」)は28px。商品詳細ページの商品名は36px、説明文は18px。注意書きは13px
footer内は14px(電話番号を除く)。
「新着情報」は日付は18px、タイトルは24px

・フォントの種類は、メインは「Noto Sans JP」。游ゴシックより少し丸みを帯びた、親しみやすく優しいデザイン。
「ファミリー」ページでは、親子向けだからか、より丸み、柔らかさを感じられる、太めの丸ゴシック体が特徴の「Rounded Mplus 1c」が使われている。

No.018 マクドナルド-Rounded Mplus 1c

No.018 マクドナルド-Rounded Mplus 1c-ワンピースの楽譜 | Webサイト100選

意識して見る前からマクドナルドに対して、毛筆のタッチである飾りを取り入れた明朝体のようなイメージ(「大人っぽい」「真面目」「優雅」「上品」)はなかったが、実際にフォントを意識してサイトを見てみても、やはりそういったフォントは使われていなかった。
同時に、普段商品などをなんとなく見ていただけでも人々の脳内にはブランドイメージがしっかりと出来上がっており、そのため、例えばもしフォントのみがブランドイメージと異なるだけでも、違和感を与えやすいと考える。

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

コメント

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