Webサイト分析 vol.6 「SOL」（美容室）
今回分析したのは、
このデザインを制作した際に美容室のサイトを調べていて見つけた和歌山の美容室「SOL」さんのWebサイト↓です。
ターゲット
・SOLで予約をしたい人
・周辺に住んでいて美容室を探している人
サイトのねらい
・お店の情報（コンセプトや営業時間）を伝えること
・予約をしてもらうこと
サイトから受ける印象
・シンプル
・繊細
・明るい
・キレイそう
使用フォント
<html>タグへの指定
system-ui
-apple-system
BlinkMacSystemFont
Segoe UI
Roboto
Helvetica Neue
Arial
Noto Sans
sans-serif
Apple Color Emoji
Segoe UI Emoji
Segoe UI Symbol
Noto Color Emoji
基本的にはデバイスのOSやブラウザのフォントが適用されるように指定してある。そのほかも総称フォントが指定されており、さまざまなデバイスで見られることを想定して作られているのだろうと思う。
（上の4つは初めて見た・・・）
<body>タグへの指定
YakuHanJP（約物半角専用のWebフォント）
Jost（Google Fonts）
Gothic Medium BBB（モリサワフォント）
YuGothic
游ゴシック
ヒラギノ角ゴ Pro W3
Hiragino Kaku Gothic Pro
メイリオ
Meiryo
Osaka
ＭＳ Ｐゴシック
MS PGothic
sans-serif
約物半角専用フォントなんてあるんだな・・・。
h2の英字はJostで表示されているよう。ロゴやメニューもおそらくJostかと思われるがsvgで表示されている。
使用カラー
・ベースカラー #FBFBFB
・メインカラー #000
・アクセントカラー #f45800
・footerのグラデ 白→#f29a6d
ファーストビュー
お店のロゴとメニュー、メインビジュアルは店内の写真がスライドショーで表示される
余白の取り方
sectionごとの余白や見出しと本文の間の余白が広めに取られている。
conceptのテキスト部分の周囲も広く余白がとられていて面積が大きいため目に入るようになっている。
文字の組み方
・line-heightは1.8
・letter-spacingは0.15em
・conceptの文はline-heightが2.5remで他の文より広め
写真の質感
明るくクリア。すっきりとした印象を受ける。
TOPページの構成
FV
↓
concept
↓
information（営業時間と予約可能時間）
↓
contact（メールと電話のリンク）
↓
menu（詳しくメニューと値段が書かれている）
↓
access（住所とGoogle Mapのリンク）
↓
staff（スタッフの紹介、クリックするとそのスタッフのインスタへ飛ぶ）
↓
footer（コピーライトとインスタのリンク）
機能的な特長
・カーソルがオレンジの円
→お店のコンセプトと合った形状と色＋大きめなのでどこにあるか見つけやすい
・メニューが左側に縦に並んでいて、追従する
メニューは上から順にメインコンテンツと同じ順番で並んでいる
・ジャンプ率が低くボタンの線等も無いため、予約のためのメールのボタンや電話のボタンが少しわかりにくい
視線の流れ
写真と文章で左右に振られながら下に流れていく。
良いと思ったところ
お店の様子がとてもよくわかるWebサイトだなと思った。写真がキレイで多いので目を奪われる。お店が基本無彩色なので、鏡の内側のオレンジと鏡に映る外の緑が映える。
メニューも詳しく書いてあるので、ページ遷移なしで詳しく何ができるのかわかって良い。
文字が細いので繊細さ、静けさを感じる。
フォントが写真とマッチしていて統一感がある。
ロゴが傾いているところにおしゃれさを感じた。