サイトレビュー③

こんばんは！Akiです。
今回は　美容家電ブランド【SALONIA】のサイトレビューをしました。
サイトのURLはこちら

ヘアアイロン・美顔器も取り扱っている会社のサイト。
商品の説明分やサイト内のメッセージを見るとBtoC向けかな。
アイロン買いたいけどどこのメーカーがいいかな？とかこういうヘアセットしたいけどどのアイロンを買ったらいいのかな？って人におすすめのサイト。

シンプルな構成で文章も短くまとめられていて、情報が入ってきやすい。
商品の良さが引き立てられている。

使用可能時間の短縮や操作方法をシンプルにすることで誰でも簡単にキレイになれることが訴求ポイントになっているかなと思います。
朝髪をセットする時間がない、もっと簡単にヘアアレンジができるようになりたいという方をターゲットにしているのかなと思いました。

【使用カラー】
・main color　 #fff
・accent color #f5f5f5
・font color　  #333
→無機質の配色（白・黒・グレー）

【フォント】
・本文　 A-OTF Gothic BBB Pr6N
・見出し/数字　Renner　
・Font-weight : 300
・line-height    : 1.6

【サイト構成】
TOPICS　お知らせ
↓
PRODUCT　製品紹介
↓
CONCEPT
↓
SALONIA COLUMN
→紙の巻き方を紹介
髪の毛を巻く前の準備から、セットのコツまで記載されていて
髪のアレンジなどに困っている人は助かるかなと思った。
↓
SELECT　商品選択
→髪の長さや、その日の気分から似合うヘアセットや
おすすめヘアアイロン紹介ページに遷移する。
アイロン選びに迷っている人は買いやすいかもしれないですね✨
↓
SUPPORT　よくある質問

【First view】
・大きさ非対称の画像が左右に配置されている
日常生活のアイテムの１つということをイメージしたのかな？
・キャッチコピーはなし。ブランド名を真ん中に配置
→左上に配置するよりは真ん中に配置することで、ロゴに視線を集めることができている

【その他】
・見出しはspanタグで制作されている。字間を調整することで文字間隔が等しく見えますね。見やすい。
・コンテンツ間も余白も広めにつくられていて、すっきりとした印象。
・商品紹介ページではスペックの説明がされているので、温度調整やどれ位で使用可能な状態になるのか気になる人は、ここで購入可否の判断がしやすいと思います。

この行間は読みやすいなと思います。デベロッパーツールで調べると
line-height: 3em; となっており、font-sizeに対して広めに行間が取られていました。

商品は切り抜きで影があるので、浮いているようなイメージ。

スマートフォン版のデザインはこちら

サイトレビューは以上です！
シンプルなデザインを制作する時に参考になるサイトですね✨
視認性・可読性を高めるために余白の作り方、字間・行間の調整はとても参考になると思いました！

おしまい