見出し画像

93.SUNNY DAYS COFFEE #1日1サイトレビュー

【印象】
・可愛い、上品、柔らかく優しい印象
【ファーストビュー】
・画面左側と上部に余白をあけてメインビジュアルを配置。写真は白がかった淡いトーンで少しかすれている。レコードなどを写していることもあり、レトロで可愛らしい印象。左から右にめくれるようなアニメーションで写真が切り替わる
・写真の前面左側に円で次に表示される。円の周りを白い枠線が動き、切り替わりまでの時間をあらわしている
・左側にロゴと時刻、天気を表示している
・ヘッダーにはメニューを左側に表示している
【コンテンツ】
・ヘッダーのメニューを右側に移動し、ロゴを左側に表示。左上に円の白く透過したレイヤーを重ねることで柔らかく日が差すようなイメージを表している。追従する仕様になっている
・画面右下に天気と時刻を表示し、追従するようになっている
・店名が「SUNNY DAYS COFFEE」なのでFVに現在の天気を表示したり、ヘッダーに太陽を表示していたり、空の写真を使用していたりと天気をテーマにしたデザインになっている
・サイト内で使用している写真が淡いトーンなこと、配色がパステルカラー中心なことから柔らかく優しい印象
・文章量少なめ、余白を多めにすることで上品さを演出している
・コンセプト文内に手書きの文字を入れることで可愛い、優しいイメージを作っている
・ボタンの枠線や、セクションタイトルの区切りの線など一部の直線の配色を黄色から灰色がかった青のグラデーションにしている
・サイト下部寄りの位置で縦長の写真を3枚並べ、半透明の青のフィルターを重ねて白字で「About」「Photo Studio」「Online Shop」と表示し下層ページへのリンクを貼っている
・サイト全体に合わせてグーグルマップは青に色変更している
・「about」「event & news」「instagram」とセクションの背景にぼかした字を配置している。木漏れ日をイメージしていると思われる
【カラー】
・ベージュ、灰色がかった青、白
・テキストカラーは灰色がかった青#5f799c、黒#000000
【フォント】
・YuGothic
・英字見出しにHelvetica Neue
・一部の英字にnew-spiritを使用
【レスポンシブ】
・メインビジュアルを横長から縦長に変更し、上下左右に余白をあけている
・ヘッダーの左側にロゴを表示し、右側に天気と時刻、ハンバーガーメニュー(2本線、メニュー表記無し)を配置。タップするとメニューが画面いっぱいに開く。背景色はベージュ、メニューリストは中央揃えになっている