84.【公式】大阪北堀江の薬膳・養生ごはん 天然食堂かふぅ #1日1サイトレビュー
【印象】
・優しい、あたたかい、可愛い印象
【ファーストビュー】
・上下左右に余白を開け、画面右側に動画を表示。料理をする様子や食事を楽しむ様子などを流している
・動画の右上前面に縦書きでキャッチコピーを配置。白背景のレイヤーを重ねることで可読性を上げている
・動画左下前面には円を表示し、写真を配置。周りにテキストが回転するアニメーションを使用。写真はランダムでお酒を表示し、クリックするとメニューページへと飛ぶ
・動画の下にSNSへのテキストリンクを配置。ホバーで吹き出しと共にそれぞれのSNSアイコンが表示されるようになっている。可愛らしい印象になっている
・画面左側にメニューを表示。上部にロゴ、下部にテキストリンクを並べている。メニューは日本語表記の下に小文字で英語表記を載せている。追従は無し
・キャッチコピーとメニューのテキストは画像で表示している
【コンテンツ】
・メインビジュアルのすぐ下にコロナウィルスについてのお知らせを記載。フッターの上にももう1度同じお知らせを載せている。飲食店のため非常に重要な情報なので目に入りやすい位置に表示していると思われる
・サイト全体でベージュや茶色を使用し、写真は赤みがかったものを使用。優しい、あたたかい印象を演出している
・同様の理由で円や角丸の写真、ボタンを使用している
・背景にざらついたテクスチャを敷いている
・セクションごとにあしらいとして手書き風のフォントでセクションタイトルを背面に表示している
・セクションタイトルは画像で表示している
・下層ページへのリンクは「詳しく見る」「すべて見る」の文字の背面に円を表示。ホバーで円の中に一回り小さい白い円が表示され、二重丸になる
【カラー】
・ベージュ、白、茶色、赤に近いピンク
・テキストカラーは茶色#573001
【フォント】
・Noto Sans JP
・YakuHanJP_Notoを使用
【レスポンシブ】
・上部にロゴ、SNSへのテキストリンク（ページ下部の「今日の日替わり配信中」セクションに飛ぶ）、ハンバーガーメニュー（2本線でMENU表記あり）を配置
・メニューは画面いっぱいに広がるようになっている。テキストリンクのメニューの下に、SNSへのリンクアイコンを配置している
・キャッチコピーはメインビジュアルの前面のままだが縦書きから横書きに変更し、白背景のレイヤーは無くなっている。視認性は下がってしまったが、レイヤーを配置すると動画の表示サイズが狭まってしまうためと思われる
・画像や動画を大きく表示するため、左右どちらかまたは両側の余白無しで配置している