見出し画像

WEBサイトトレース #03

とまとと模写

第三回目のサイトは"とまとと"さん(https://tomatoto.jp/)のサイトトレースに挑戦

アビルキャンプリゾート
■なんのサイト?
→トマトを中心とした食事や観光、宿泊ができるサイト
■ターゲット層
→トマト好きな20代~30代
■配色
メインカラー #FFFBF6
ベースカラー #CB2E27
アクセントカラー 特になし?
■書体
Yu Gothic
■レイアウト
2カラムレイアウト

気付いた事
長い文章
size 11~15px
最大フォントsize
22px

・navボタンが綺麗な丸ではなく少し歪な丸になっている(トマトをイメージしている?)
・もっとサイトのサイズを大きくしてみると、ナビゲーションの部分は上ではなく2カラムの右側に細く配置されている。
・ファーストビュー の画像は右上と左下が空いており、そこに本日の天気や文章が入っている
・またサイト全体は文字も赤文字で太めのフォントが多い。
・四角い枠線も角丸が多く点線も多いので可愛らしいサイトになっている。女性をターゲットにしていそう・・・
・画像も角丸の四角型か丸型で切り抜かれているものが多い。
・2カラムレイアウトでそれぞれのカテゴリがわかりやすく分かれており、XDで再現ができなかったが、"〜"で境界線が分かれていた。
・footerはページトップに戻るボタンよりも下に店舗の案内MAPがあり、マップに関しては大きく配置している。

この記事が気に入ったらサポートをしてみませんか?