52.OR THIS ONE® サイトレビュー
生活を改善したい方のためのサプリメントOR THIS ONE®のWEBサイト。健康的でおしゃれなメインビジュアルが目に入り、今回レビューしたいと思いました。LPページで文章量が多いのですが、綺麗にコンテンツの中にまとめられています。今回は文章にも注目して見ていきたいと思います^^
目的
OR THIS ONE®の商品購買促進
ターゲット
・サプリメントを買いたい人
・健康的を気にする人
・仕事が忙しい人
・20代〜の女性
印象
おしゃれ、可愛い、清潔感、健康
キャッチコピー
〇〇のかわり
特徴
余白
背景が白で、仕切りが少ないので、左右の余白は広くとられています。上下のコンテンツの余白は狭い。その分スクロールが少なく、コンテンツが多くても見やすいように感じます。
配色
ポップで明るいカラーが使われています。並べてみると、黄色と水色はぴんくと比べて少し濃い色が使われています。ピンクは印象に残りやすい色なので、少し薄めの色を使った方がバランスが上手にとれるのではと感じました。
フォント
kozuka-gothic-pr6n 日本語ゴシック体
'Montserrat' 英語サンセリフ体 GoogleFontsから使用可
'Montserrat'
他のWEBサイトでも頻繁に見かけるフォント。オードソックスですが、横に少し潰れているので、可愛らしい印象があります。コロコロっとしていて好きな書体です。
レタースペーシング
レタースペーシングは少し狭めです。文章量が多いので、少し狭い方が一つのコンテンツとしてまとまって見えるのでよいのかなと思いました。2〜3文でひと段落にして改行されているので、読みやすく感じられます。
メインビジュアル
メインビジュアルがすごくおしゃれで素敵です。真ん中の写真のわかりやすさはもちろんですが、背景全体をそのスライドが切り替わる目安として表示しているアイデアがユニークで面白いと思いました。ITEMとJOURNALのnavがスクロールすると上部に来るのも実用的で、色々なサイトで取り入れたいアイデアです。
商品名が大きく左上に配置されていて、覚えやすいところもいいなあと感じました。アカウントを人のアイコンで表すのは少しイメージしにくいかもと思ったのですが、ログインと表示されるよりおしゃれで省スペースになるなどたくさんのメリットがあるので、どんどん使われて普及して欲しいアイデアだなと思いました。
学んだポイント
・なぜ長文でも圧迫感がなく読みやすいのか？
左右の装飾がないため圧迫感が少なくなっていて、文章自体に集中しやすい。また適度に段落分けがあり、小タイトルとの余白も大きいので、読んでいてもあまりストレスを感じないのではないか。
・英語タイトルが縦書きになっているのはなぜ？
その後の日本語タイトルがあり、日本語タイトルは横書きなので、縦書きにして少し崩して装飾のような扱いにした方がバランスがとれる。
・水色の背景塗りを使ったのはなぜ？
塗りの部分は特に目立つから。写真の使い方がいつも同じ四角フレームに入っているだけだと単調に見えるから。
また商品の白いパッケージでも目立つようにメインビジュアルよりトーンを落とした水色が使われている。
・アイテムごとに左右の幅が異なるのはなぜ？
単調な配置だと、見る人も飽きてしまい楽しめないので、左右で重心を変えるような配置にしている。
感想
今回はOR THIS ONE®のサイトレビューを行いました。サイトを細かく見ていく中でやはり文字数が多いサイトだと思ったのですが、文字の改行や大きさ、文字周りの余白感がとても上手なサイトだったので、ストレスなく読み進められるのではないかと感じました。
WEBサイトで文字はすごく重要な要素だと思うので、私ももっとフォントや文字周りの余白感について勉強していこうと思いました。
今回のレビューはここで終わります。ご覧いただきありがとうございました!!