COSTA COFFEE（コスタコーヒー）|ヨーロッパ発祥の本格派プレミアムコーヒー／017

コツコツ選んだWebサイト100選

https://c.cocacola.co.jp/costacoffee/

title：COSTA COFFEE（コスタコーヒー）｜ヨーロッパ発祥の本格派プレミアムコーヒー

description：ヨーロッパ発祥の本格派プレミアムコーヒー。コーヒーへの情熱と品質へのこだわりを通じ、世界中で愛され続けています。

配色は、白：赤（エンジ）：オレンジで暖かなイメージ。

①top
画像は２点。画面左は商品画像とキャッチコピー。
ブラック＋カフェラテ、ラテエスプレッソに切り替わります。
右側はカップを持った男性、ラテアート画像。

②コスタコーヒーについてのリンクボタン。
その下に男性がペットボトルにもたれてポーズの画像。
商品５種類。アイスとホットでパッケージとキャップの色が違っていました。

 

③YouTubeリンク画像。

 

④TOPICS
商品画像バナー×２、クイズに挑戦しようバナー×１、原宿駅店オープンバナー×１

⑤footer

少し戻ってコスタコーヒーについてのリンクボタンでリンクページへ。

コスタコーヒーの歴史
コスタコーヒーの焙煎所
ドリンクメニュー
コスタ エクスプレス

画像が４つあるので、レスポンシブデザインになっているかと思いましたが、検証してディスプレイサイズを変えても変化なし。
でもスマートフォンで見るとレイアウトは縦並びに変更されていて、スマートフォン用のレイアウトになっていました。
？？
CSSはminファイル状態で、解読不能。
<link href=”/costacoffee/styles/common.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”/costacoffee/styles/main.css”>

となっていましたが、スマートフォン用のCSSは別にしているということかと思われます。
「コスタコーヒーの歴史」は、「1971年　ロンドンから始まる物語」となっていてキャラクターもお鬚に山高帽に三つ揃えスーツの典型的なイギリス紳士ですね。トップの画像はマフラーに同色の帽子をかぶって、ホット商品用の設定になっていました。