サイト分析のトレーニング
初めまして！
大阪でUI/UXデザイナーとして働いているミヤザワです。
未経験から独学でwebデザイナーを目指し、
昨年5月にWEBディレクターに社内異動、そして今年1月からUI/UXデザイナーに異動しました。
まだまだ新人ですが、自分なりに発信していければと思います✨
初めての記事は、最近良いなと思ったWebサイトのデザイン分析してみようと思います。
今回のサイト：BOTANISTキャンペーンサイト
キャンペーンサイトとは
"新商品や新サービス紹介のために、期間などを設定した上で購買意欲をかきたてることを目的としたサイト"
サイトの目的
春の季節に合わせた新商品の紹介・魅力を伝え購買意欲を促進すること。
商品説明と関連商品も多く掲載されており、CTAボタンの遷移先が購入ページになっているため。プレゼントキャンペーンに参加させ、BOTANISTの認知を広げる。
キャンペーンを参加するためにはSNSのフォロー・投稿が必要なので、より多くの人に認知してもらうことができる。
想定ターゲット
成分や香りにこだわっていることから、美意識が高い20~40代女性。
コンセプト
春なので全体的にサクラをイメージしている（配色やイラスト、写真など）
商品の成分や香りにもこだわりを持っていることが伝えられている
植物や自然を押し出したデザイン
フォント
日本語：游ゴシック
英数字：New Atten
配色
ベースカラー：＃FEFBFC、＃FFEDF1
メインカラー：＃F4C7DE、＃DD7994
アクセントカラー：＃4B114B
（ベースカラーとメインカラーが合わさってグラデーションなどにも使用されている）
コンテンツ分析
ファーストビュー：
KVに商品の写真が使用されているので何のサイトなのかが分かりやすい
全体的に淡いピンクの配色なのでサクラをイメージしていることが分かる（キャッチコピーにも入っている）
写真を重ねたようなデザイン
メニューが上ではなく横に追従として設置されている
メインコンテンツ：
構成
・BOTANISTの特徴
・シャンプーリンスー（商品概要）
・アウトバス（商品概要）
・ボディーソープ（商品概要）
・商品一覧
・キャンペーン情報
商品のパッケージとあった配色でデザインされており全体的に柔らかいイメージ
テキストは読みやすいシンプルなフォントを使用されている
所々サクラや植物のイラスト・写真が活用されており、コンセプトをしっかり押し出したデザイン
商品概要のセクションでは、左下で商品が見れるようにスクロールできる
商品を選択すると関連するアイテムも表示してくれる
フッター：
メニューが追従しているので、フッターはSNSアイコンとコピーライトのみでシンプルだった
フッターの淡いグラデーションが綺麗
まとめ
コンセプトにも商品にもあった自然で柔らかいデザイン
全体的に淡いピンクでまとめられており、所々のグラデーションも綺麗
商品説明がしっかりあり、商品の魅力が伝わるサイト
何のサイトかすぐに分かるところがいいなと感じた