2022/09/22 Webサイト分析 Shiro
久々の更新。Webサイト製作で忙しかった分勉強の備忘録としてちょこちょこアップしていこうと思います。
京都にあるアロマヘアサロンのWebサイトのTOPページから勉強させていた
だきました。
FV
・背景：白
・写真：
★フェードインするアニメーションの使い方が綺麗。（CSSのみ。transition-property:opacity,transition-duration:.6s）
文字
・英語見出し：Marcellus 34px→22px→22px
・日本語見出し：Noto Sans Serif 24px→20px→20px
・本文：Helvetica Neue 13px
・ボタン：Marcellus 15px
・文字色は#505A5F（青みがかった濃い灰色）
★線が細めでセリフがゆるやかなフォントを使うと、しなやかで大人っぽく見える。
★灰色でも色味でニュアンスを持たせると可読性を保ちつつ印象をコントロールできる。
メニュー
・高さ120px
・FVの店名ロゴが見えなくなるところでふわっと出現する。（CSSのみ。transition-property:opacity,transition-duration:.6s）
→（1080px）ハンバーガーメニューに変化。
・高さ80px
・ハンバーガーの線は30px×1の三本線。
・FVの画像が見切れる手前で表示される。
・メニューは全画面表示。中央・縦一列に並んで表示される。
→（900px）高さが切り替わる。
・高さ60px
・フォント：英語見出しと同じMarcellus 14px
余白や要素の幅など
・各セクションごとに180px。
・写真とテキストのエリアで二分割するような構成。
テキストと写真の配置を左右交互に並べることで視線に動きが出る。
・縦長の写真を並べて上下にずらして配置。
・テキストエリアの余白の取り方
英語見出し→60px余白→日本語見出し→40px余白→本文→60px余白→ボタン
ニュースエリア
・全体の最大幅：1080px
・区切り線：#F0F0F0 1px
・見出し：Noto Sans Serif 18px→（1080px以下）16pxに切り替わる。
・二行になったときの行間：line-height1.8。
・日付：Marcellus 12px
・見出しと日付の余白：20px
・区切り線とコンテンツの余白：上下30px、左右20px
★このぐらいの薄い線だとコンテンツの邪魔にならず、区切り線の役割が果たせている感じがする。
予約ページへのリンク
・フッターの一部として実装されている。
・黒い色味の写真の上に白抜きでリンクが書かれている。
★他のセクションとのコントラストで際立って見える。
フッター
・フッターメニューとコピーライト部分と分離してある。
・余白：上下100px、左右80px
・左に店名ロゴ・住所・電話番号、右にメニューが横並び
→（1080px）全ての要素が中央揃えになっており、左の要素が上・右のメニューがそれぞれ横並びのまま下に並んでいる。
メニューの並び方
・ABOUT
★どんな場所なんだろうというページを訪れた初期の興味に応えるページ
・SALON
★どこにあるんだろう
・MENU
★どんなメニューがあるのか、いくらするのか
・ONE DAY
★さらにお店の雰囲気を感じてもらうための動画ページ
・DIARY
★お店の最新情報
・RESERVATION（※ヘッダーのみ）
・Instagram、Facebookのリンク
★初めてサイトに来た人が気になるポイントである「どんなお店なのか」「どこにあるのか」「どんなメニューがあって、いくらするのか」という興味に応え、施術中の様子やお店の雰囲気を動画で見せることでイメージさせ予約を後押し、お店の最新の情報を確認しつつ予約フォームへ進めるという動線になっていると思う。