サイト模写（代官山青果店_ECサイト）

今回のトレースの目的

• ECサイトのデザインやUI/UXデザインを学ぶため。
• このサイトを最初に見たとき、レイアウトが非常に綺麗で見やすいサイトと感じたため、レイアウトと余白がどのようにデザインされているのか勉強するため。

デザイン概要

• フォント：Inter / DNP 秀英角ゴシック銀 Std
• カラー：#FCFBFA（白系） / #071122（黒系）

デザインについて気づいたこと・考察

• サイト全体を見て気づいたことは、ユーザーの離脱率を下げるためにTOPのページはかなり短くなっており、メインビジュアルでは商品がすぐに購入できるようにスライダー式に商品購入画面が配置されている。
• メインビジュアルでは商品画像やCTAボタンがスライダーになっており、お勧めの商品を簡単にカートに入れて購入することができるようにデザインされている。また画像の下に設置されているテキストに関しては、消費者が商品を購入する上で重要な「価格表示」と「購入ボタン」を一番上に配置し、かつフォントサイズを大きくしたりボタンのカラーを黒色にしてコントラストをつけることで、必要な情報が目に入ってきやすいようなデザインが施されている。
• セクション（Recommend）では、フォントサイズは優先順位をもとに4パターン設定されている。（20px 12px 11px 10px）数字は文字よりも小さくなってしまうため、数値上ではなく見た目の大きさを合わせるために、文字のサイズに4px分大きくしたフォントサイズを設定している。