87.TAKANOME #1日1サイトレビュー
【印象】
・上品、高級感、繊細な印象
【ファーストビュー】
・メインビジュアルは商品を中央に置いた写真を使用。写真のトーンは暗め。マウスポインターを動かすとその位置に合わせてスポットライトのように明るさが変わる
・写真前面の左下に商品の成分について英語で記載している
・ヘッダーは上部にLINE@のリンク、下部にメニューの2段構成になっている。左側にサイト名、中央にメニューのテキストリンク、右側にログイン画面やカート画面へのリンクを載せている。追従する仕様になっている
【コンテンツ】
・ヘッダーはメインビジュアルでは背景色は無かったが、スクロールするとベージュの背景色がつく
・詳細ページへのリンクはテキストと矢印を円で囲ったアイコンを使用しておりシンプルな印象
・「BACKGROUND」セクションはスクロールで3つのコンテンツが順番に出てくる。3つ目に辿り着くまでセクションが固定になり、上下のセクションにはいけない仕様になっている。セクション左側に写真を載せており、上下左右に大きく余白を設けている。スクロールで写真が下から上へと表示される
・全体的に写真のコントラストが強めになっている
・商品は日本酒だが、サイトでは英字を多く使い和風ではなく洋風に見せている。メニューやセクションタイトルは英語表記のみになっている
・「NEWS」セクションはサイト下部に設置。優先順位が低いセクションなためと思われる
・本文にゴシック体とサンセリフ体、セクションタイトルにセリフ体と組み合わせて使っている
・フッター部分は高さを広めにとり、画面右側に写真を載せている。前面にメニューを配置。視認性を上げるために黒の半透明のフィルターをかけている
・サイト全体で余白を多め、フォントサイズを小さめにすることで高級感や繊細さを演出している。同様の理由で配色も黒やベージュと色味を抑えている
【カラー】
・黒、ベージュ
・テキストカラーは黒#333333
【フォント】
・dnp-shuei-gothic-gin-std
・英字はVerdana Pro
・英字見出しはGeorgia Pro
【レスポンシブ】
・ヘッダーメニューが左からサイト名、ログインとカート画面へのリンク、ハンバーガーメニュー（2本線。メニュー表記無し）に変更。アイコンをタップすると画面いっぱいに背景色が黒、文字色が白のメニューが開く。ヘッダー部分が小さい印象を持った
・「BACKGROUND」セクションの固定が無くなっている。右側に矢印アイコンを縦に表示し、タップすることで次のコンテンツに進む仕様になっている。アイコンが小さいため気が付きにくいと思った
・「MAGAZINE」セクションはカードを横1列に表示。スクロールを促すため、次のカードを画面からはみだして表示している