こんにちは！さえです。

今回、BAKEの抹茶チーズタルトのWebデザインをトレースしてみました。
https://cheesetart.com/lp/matcha2019/

トレースをした理由
・抹茶美味しそう
・BAKEのデザインが好き（自分のポートフォリオの配色をBAKEのサイトに似せたくらい好き）

…理由単純だな！笑

でも、好きなものをトレースするのってサクサク進むし、楽しいので良しとします。

トレースした感想

せっかくなので、「あるあるデザイン」という本に当てはめて感想を書いていきたいと思います。

メインビジュアル

だいたい2トーンでいける＋ちっちゃい文字飾り
今回の抹茶タルトでは「深緑」と「涼」という濃淡が対になっていることから、画面を2分割して2つの要素で構成されている。
コントラストがはっきりと生まれて、引き締まったデザインになっている。
文字を四方に飾ることによって情報をあしらいのようにして写真を引き立たせる役割を担っている。
PC版で見るとマウスホバーした時に写真がスッて広がるの楽しくてついやってしまう。

コンセプト

写真の余白大きめ
タルトのコンセプトを伝えるテキスト→写真にかけて余白が大胆に取っているのでコンセプトに目が止まりやすく読んでもらいやすい。
日本独自の縦読みを使っていて、「夏の入り口〜」から「チーズタルトと出会って〜」の視線がストンと落ちるようになっているのがとても自然で読みやすくなっている。
写真にもうまく余白が入っていて文字とかぶることなくコンセプトを伝えられている。
文字を読むのが終わった段階でスライダーで写真が広がるのがとにかく目を惹きつけるし、飽きさせない。

プロダクト（商品紹介）

ナナメスタイリッシュ
ナナメに細い線（1pxくらい？）が入っていて、背景がさみしくない。さらにスタイリッシュな感じを出しつつもタルトの写真を引き立てている。
よく見ると深緑側は濃い色の線・涼側は淡い色の線が引かれている。

だいたい2トーンでいける

ナナメスタイリッシュが終わったら2トーンで製品の紹介。
商品の紹介する時の写真＋説明文の2トーン多し。
商品名をど真ん中にすることによってあしらいを出している。

ショップ紹介

だいたい2トーンでいける
さりげなく祥玉園のセクションを左右の2トーンにすることによってその下の販売店舗の横読みも違和感がない。

店舗情報

周り余白最高
店舗情報しか文字が載ってなくてもはや潔い。

まとめ

まとめてみると、「だいたい2トーンでいける」と「周り余白」が多かったかな、と思いました！
とにかく大胆な余白が綺麗。余白を身に付けたい…！
そしてしっかりと抹茶タルトも買ってきました。
Webをみて購入に走らせるBAKEのデザインすごい。
最後にトレース風景を。とても良い勉強になりました。ありがとうございました。