#サイトレビュー01 [O3 MIST by Bollina]

唐突ですが、サイトレビューをはじめます！

…しかしながら、サイトの構造や各名称すら危うい私…。
やらなくてはという必要性は感じていたものの、どうやって？と思っていました。

先日、ようやく購入した「Webデザイン良質見本帳［第2版］」、こちらをテキストにして進めていこうと思います。
（『良質』って、なかなかそそられるコピーですよね）

Webデザイン良質見本帳［第2版］ | SBクリエイティブ

第1回目は、P28「透明感のあるデザイン」で紹介されている、
株式会社田中金属製作所様の「O3 MIST by Bollina」です。
こちら、商品紹介のLPのようです。

O³ MIST by Bollina（ボリーナオースリーミスト）

https://www.tanakakinzoku.com/product06/#product_itemlist

ボリーナ オースリーミスト｜ボリーナ｜㈱田中金属製作所

全体の余白と文字のサイズ

ファーストビューなどまとめ

各パーツまとめ

特徴まとめと、いいな！と思ったところ

・白とグレーを基調にしている

・全体的に寒色系の配色

・トーンを揃えた同系色でまとめ、大きく差のあるアクセントカラーを設定しないことがふんわり感につながっているのかな？

・ニューモーフィズムを取り入れている

・薄めのシャドウと白い光彩

・背景からパーツを押し出しているようなボタン

・水滴の画像

・細めのフォント

・ふんわりした透明感と、ジャンプ率の高い太めのフォントでメリハリがついている

・彩度が高く、背景にインテリアグリーンを使用したフレッシュな印象のある画像が、ふんわりした全体のベースと対比しているようで目立つ。

・下に進んでいくと、セクションでメニューの表示が切り替わるのが面白い

・MV下のアニメーションも面白い。
　シンプルな構成で、アイコンみたいなのに水の動きが本物みたいに規則性が
　つかめなくて…ついつい見てしまう。

・文字装飾はせずに、細かい文字の大きさ調整と余白で優先順位をみせていて見やすい

気になるところと私だったらこんな感じにしたい！と思うところ
（個人的主観ですみません）

・WATER　ONLYの水道アイコンの位置なぜここなのか知りたい

・ギャラリーの画像切り替えはもう少しだけ早くてもよいのかな…

・写真の背景の色が気になる。
①ギャラリーの商品背景で使用されている赤いコスメのパッケージは、かなり色の印象が強いので不要
②ギャラリー内の水を入れるシーン、シンクの中も人造大理石のものなど、
商品を見せるところは写真の背景の色が揃っている方が良いのでは？
（クリーンなイメージを打ち出したい場合、ステンレスシンクの水滴の跡も気になる）

・「ミスト」って実は使い心地に好みが別れるものでは？（ミストの出具合など）と感じるので、実際の使用している動画を入れる
（STEPは平坦な印象があるので、ここで動画を入れるのもいいかも）

・全体をまとめて俯瞰してみると、３つの特徴の見出しのナンバーが一番目立っている気がするので、ナンバーをもう少し薄めの配色で配置する

・「こんなものに、シュシュッ」私だったら、点で改行したい

・手のアイコンボタン、押してからリンク先にいくまで何のリンクなのか分からなかった　（メモ・お問い合わせのアイコン調べたい）

・グラフは「漠然とある」感じがするので、どこを見せたいのか…
色を変更するなどして、分かりやすくしたい
（漠然とある感じがフラット感があっていいのかな？）

・03のグラフ、-120pxくらい下げて02のグラフとは明確に別のものと分かるようにしたい

こちらのショップにも掲載されているのですが、ガラッと雰囲気が変わるのですね。

- 田中金属製作所公式オンラインストア

…こんな感じで、サイトレビューするぞ！と思って、何度も何度も回ったり測ったりしていたらここまで来るのに１週間かかってしまいましたが😅
ゆるく続けていこうと思います。