見出し画像

78.幸福湯 #1日1サイトレビュー

【印象】
・可愛い、にぎやか、優しい印象
【ファーストビュー】
・施設内の写真を明るめのトーンで表示。位置を左側に寄せている
・右側にキャッチコピーを配置し、追従する仕様にしている
・メインビジュアルの下には電話番号と営業時間、最新情報へのボタンリンクを1行にまとめて表示している。背景にざらついた砂のようなテクスチャを敷いている
【コンテンツ】
・FVからスクロールすると左側にメニューが表示されるようになる。上部にロゴ、その下に日本語表記のテキストリンクが並んでいる
・サイト全体に鳥獣戯画風のイラストを散りばめている。銭湯を利用する様子が描かれており、可愛らしさや親しみやすさを演出している
・銭湯ということでお湯を意識して水色の波線が複数箇所に配置されている。ざらついたテクスチャにして上部から下部にグラデーションをかけている
・背景色はべた塗りではなく波線やFVと同じくざらついたテクスチャを敷くことでサイト全体に統一感を出している
・背景色を変えてセクションを区切るだけでなく、写真を画面の横幅いっぱいに広げることで境界線を作って区切っている
・サイト全体で使用している写真は少し黄色がかっており、レトロな質感になっている
・テキストの強調部分に下線を引いている。線は手書き風にかすれている
・コンテンツの背景をざらついた質感にしているが、ボタンはべた塗りでかすれていないので浮いてしまっている印象。また角の部分も丸ではなく四角のままなのでかっちりしすぎている印象を持った。全体的に手書き感があるサイトなので同じようにテクスチャを敷いたり角丸にしたりと、もっと優しいイメージのボタンでも良いと思った
・見出しを明朝体で和風に、本文は読みやすくするためにゴシック体でと使い分けている
【カラー】
・白、灰色、水色、赤、黄色、青
・テキストカラーは黒#111111
【フォント】
・見出しは游明朝体
・本文は游ゴシック体
・英字はVolkhov
【レスポンシブ】
・PC版では左側に配置していたキャッチコピーをSP版ではFV上部に表示。下部に写真を載せている
・丸い円の中にハンバーガーメニュー(2本線)を表示。位置は右側上部。アイコンの下に「メニュー」と表記している。開くと波線を上部に配置したメニュー画面が下から上に表示される。お湯が溜まっていく様子を表現していると思われる
・画面右側下部にページトップへと戻るアイコンを配置し、追従する仕様にしている。カエルが湯船につかっている様子のイラストになっている。スクロールするとだんだんとカエルが赤くなり、のぼせる様子へと変わっていく