見出し画像

82.TOSACO #1日1サイトレビュー

【印象】
・可愛い、にぎやか、優しい印象
【ファーストビュー】
・上下左右に余白を開けて横長の写真を表示。商品が中央に写っている。屋外で撮影しており、背景に緑が写っているので自然や地元を連想させる写真になっている
・写真前面の右側にキャッチコピーを縦書きで表示している
・写真前面に被るようにイラストを左右に表示。植物や看板、鳥と自然を思わせるイラストになっている。鳥はアニメーションで上下左右に少し動く
・ヘッダーは中央にロゴ、左右にテキストリンクでメニューを表示。上段にSNSへのリンクやログイン画面へのリンクを配置している。右端にカート画面へのボタンリンクを表示。アイコンと日本語表記を使用し、背景色はネイビーで追従する仕様になっている
【コンテンツ】
・一部の写真やセクションの境界線が鉛筆風にかすれた線で切り取られている。手書き風になっており、このことから可愛らしさや優しそうなイメージ、自然を取り入れている印象を受ける
・イラストは絵具やクレヨンで塗ったような可愛らしい質感のものを使用。サイト全体に散りばめることでにぎやかさを演出している
・セクションの境界線を波線にしたり、カードや写真を角丸や円で切り取ったりと曲線を全体的に使っている印象
・イラストや写真がカラフルなのでサイトの背景色や文字色は色数を抑えている
・セクションタイトルは全て日本語表記になっている
・「ラインナップ」セクションは横スクロールでカードを複数表示。スクロール可能なことを表すために左右に画面からはみだしてカードを表示している。矢印をクリックする以外にも、自動的にスクロールする仕様になっている
・フッターのメニューやコピーライトの下に波線で切り取った写真を大きく載せ、キャッチコピーを配置している
【カラー】
・ベージュ、ネイビー、白、黒
・テキストカラーはネイビー#1a2d51
【フォント】
・本文に中ゴシックBBB
・見出しに秀英にじみ丸ゴシック B
【レスポンシブ】
・FVの看板イラストが画面下部に移動し、2段だったがSP版では1段になり横並びへと変更されている
・ヘッダーは中央にロゴ、左側にカートへのリンク、右側にハンバーガーメニュー(3本線でメニュー表記あり)を配置。カートとハンバーガーメニューは追従する。PC版ではカートはネイビーの背景色のボタンだったが、背景色がベージュへと変更になっている。スクロールすると背景色がなくなる
・「TOSACOのnote」セクションではカードを1枚ずつ縦に並べて表示している(カード1枚ごとの文章量が多いためと思われる)