80.Chevron Coffee Roasters #1日1サイトレビュー
【印象】
・上品、高級感、かっこいい印象
【ファーストビュー】
・FVは画面いっぱいにネイビーの背景色を表示。写真を右側に表示。アニメーションで写真が切り替わる。枚数は4枚
・右下に「Scroll Down」とテキストを表示し、アニメーションでゆっくりと点滅させて目立たせている
・左側にキャッチコピーを英字で表示。日本語表記は無し
・ヘッダーは左側に店舗名、右側にテキストリンクでメニューを表示。追従は無し
【コンテンツ】
・「About Us」セクションでは最初に見出し文を表示し、スクロールで見出し文が消え本文が表示されるようになっている。本文は英語と日本語両方が載っている。本文が長めなので写真も合わせて縦長になっている
・背景色がベージュ、ボタンが茶色でコーヒーに合った配色になっている。FV以外の背景色は全て同じになっている
・コンテンツ幅は大きめ、左右の余白が少なめになっている
・リンク箇所はホバーで半透明になる。ゆっくり変化するので上品さが出ている
・全体的に英語表記が多め、文字が小さめなのでかっこよさや高級感が出ている
・「Shop」セクションとフッターの間は画面幅いっぱいの写真で区切られている
・フッターの境界線の写真以外はFV含めサイト全体の写真位置が右側になっている
・コントラストが強い写真や影が印象的な暗めの写真を使用しており、かっこいい印象を持った
【カラー】
・ネイビー、ベージュ、茶色
・テキストカラーは黒#000000
【フォント】
・dnp-shuei-gothic-kin-std
・英字はangie-sans
【レスポンシブ】
・PC版では横長だったFVの写真がSP版では縦長になっている。縦長にすることで右側寄せで左側に余白があるPC版と位置が変わっていない。メインビジュアルとしては写真が小さいが、位置を変えないために意図的なものと思われる
・ヘッダーには左側に店舗名を表示。右側に「MENU」と表記したリンクを配置。ハンバーガーメニューのアイコンはなくテキストリンクのみ。追従する仕様に変更
・メニューは背景色がベージュ、左寄せのテキストリンクが並んでおり画面いっぱいに開く。下部にはメールアドレスを載せている。左上に「CLOSE」とテキストリンクを配置しており、閉じるボタンになっている。アイコンを使わないのはポップさや可愛らしさを無くしてかっこよさのみを演出するためと思われる
・「About Us」セクションはPC版だとテキストのみスクロールで切り替わっていたが、SP版ではスクロールで写真も消え本文のみが表示されるように変更になっている