スタバのHP模写してみた

こんにちは！ゆかっしゅ（@kaname_shimizu）です。
今回はスターバックスのホームページを模写してみたので、
学んだことをまとめたいと思います！

自己紹介

氏名：ゆかっしゅ
年齢：29歳
最終学歴：管理栄養士の専門学校卒（4年制）
職歴：2017年4月　新卒で医療業界の人事部配属（1年半）
　　　2018年11月　ITベンチャーに転職しバックオフィスを担当（3年）
　　　　　　　　　（WEBデザイナーのウの字もない。。。。）
　　　2022年1月からWEBデザイナーデビュー
　　　2023年1月-2023年11月　産休育休
　　　2023年12月　職場復帰
最近のゆかっしゅ：息子氏がずっと体調崩してて治らない件

スタバのHP模写してみた

Starbucks Coffee Japan｜スターバックス コーヒー ジャパン

なぜ、スターバックスのホームページを模写してみたのかというと
個人的にデザインがすごく好きなんですよね。
ちゃんとブランディングされて統一されてる感じが好きです。
ちなみに今回はFigmaを使用して模写しました。
Figmaの操作や機能に関しての記事はまた別途書きたいなぁと思ってます。

Figma: コラボレーションインターフェースデザインツール

構造

・見た目はシンプル。画像で華やかにしている。
・サイズは違えど部品を使い回している（画度が丸い画像、文章の段組）
・最近見た商品の履歴が最後に見れる。珍しい。

使用カラー

#FFFFFF：白　ベースカラー
#000000DE：黒　メインカラー
#d4e9e2：薄緑（背景）　アクセントカラー
#00754a：濃い緑色　アクセントカラー

使用フォント

・SoDoSans
スターバックスのオリジナルフォント
これすごく使い勝手が良さそうで個人的に好きです。

Typography | Starbucks Creative Expression

気になったこと

上下の余白や上下左右の余白が異なる。
（上78px、下80px等）

まとめ

模写をして初めて気がつくことや、なぜだろう？と疑問が浮かぶことが多かったです。
特にスタバのホームページは構造がシンプルですが、画像の派手さ、華やかさでホームページを色付けていることはとても勉強になりました。

今度はこの画像の模写とかもしてみたいなぁと思いました。