スポンサーリンク
今回は、スターバックスさんのWebデザインをトレースさせて頂きました。
スポンサーリンク
Contents
選んだ理由
-
スターバックスが好きだから。
-
手書き風のデザインが可愛かったから。
-
ランディングページの練習をしてみたかったから。
デザインの観察
1枚の画像ではない?!手書き風のかわいいメインビジュアル
まず驚いたのは、こちらのメインビジュアルです。
手書き風でコラージュされた画像が楽しい雰囲気を演出するデザイン。
これ、一枚の画像に見えませんか？
実は画面上で複数の要素によって構成されているんです。
画像を一括DLするまでは全く気づきませんでした。
一枚の画像ではない理由、それは画面の幅を狭くするとわかりました。
レスポンシブデザインになっていて、画面幅が780px未満になるとデザインが変わります。
すごいと思ったのは、780px以上でも全然要素のバランスが崩れないところ。
こんなに要素があるのに。可愛いだけじゃなかった。おそるべし。
曜日ごとに提案されるおすすめのコーヒーとライフスタイル
こちらのコンテンツでは曜日によっておすすめのコーヒーが変わります。
例えば、月曜日は「#スイッチオン」、金曜日は「#リラックス」
今流行りのハッシュタグが使用されていて、各曜日ごとにコンセプトが設定されています。
またライフスタイルの異なる2人の主人公の動画から、男性でも女性でも、自分が商品を手にしたときのことを想像しやすくなっています。
このデザインからは商品というよりライフスタイルを売っているという印象を受けました。
グローバルナビゲーションはハンバーガーメニュー
グローバルナビゲーションは画面の幅を縮めるとハンバーガーメニューになるデザインが多い印象ですが、このデザインでは最初からこれです。
見出しは特徴ある有料フォント
見出しは「LOCAL BREWERY FOUR」という有料フォントが使用されています。
角が丸くてやわらかい雰囲気と、縦長ですっきりした印象です。
ほっこりしたリラックス感があって、ホットコーヒーと相性が良さそうです。
おうちをスターバックスにするというコンセプトにピッタリだと感じました。
テキストはカーニング調整された游ゴシック
テキストのフォントは主に游ゴシックで、このコンテンツの文字の大きさは40pxです。
見本とカーニング調整なしのテキストを重ねてみると、所々ズレが生じます。
他のコンテンツのテキストもほぼ全てカーニング調整されていました。
前回のトレースでもそうでしたが、カタカナは字間狭めに調整されていることが多いです。
カフェを連想する落ち着いた配色
配色は白やグレー、ブラウン、ベージュなど彩度の低い落ち着いた色。
コーヒーやカフェオレがイメージできる配色になっているのですが、この配色の良いところは商品のビジュアルが引き立つところ。商品のイラストの色がはっきりしていてよく映えます。マグカップや他の画像も彩度が高くなっているのでアクセントになっています。
さりげなくテクスチャが使われている
「CAMPAIGN」の方はグレーの部分にテクスチャが使われています。
「PRODUCTS」の方も中の白いところが紙のようなテクスチャ。
イラストも手書き風なのでスケッチブックに書いた、みたいに見えます。
イラストも手書き風なのでスケッチブックに書いた、みたいに見えます。
最後に
今回はスターバックスさんのランディングページをトレースさせて頂きました。
普段何気なく利用しているスタバですが、Webサイトを見てもっと好きになりました。
他のページもとてもお洒落で、全ページトレースしたいと感じるデザインでした。
普段何気なく利用しているスタバですが、Webサイトを見てもっと好きになりました。
他のページもとてもお洒落で、全ページトレースしたいと感じるデザインでした。
スポンサーリンク
スポンサーリンク
「独学の流れ」と「デザインの独学方法」について
まとめた薄い本を作りました！現在販売中です！
まとめた薄い本を作りました！現在販売中です！
