50.buddies サイトレビュー
今回サイトレビューを行うのは、buddiesというオンラインフィットネスアプリです。アプリを通してインストラクターやユーザーとつながり、理想のボディメイクをともに目指します。こちらのサイトはユニークな動きが用いることで、アプリの良さや躍動感をユーザーに伝えています。ではさっそく細かくレビューしてきます。
目的
アプリ利用者を増やす
登録者へのログイン遷移
ターゲット
・体を鍛えたい人
・家でもできるトレーニングを探している人
・誰かと繋がりながらトレーニングしたい人
・20〜30代の男女
印象
スポーティー、スタイリッシュ、躍動感、強さ、かっこいい、クール。
キャッチコピー
Inspire Your Fire あなたの理想をともに目指す、オンラインフィットネス。
特徴
余白
余白は広い印象。余計な装飾がなく、背景の余白がスタイリッシュな雰囲気を際立たせています。
配色
ミントグリーンを活かした配色。モノクロの中にビビッとな色が入るとカッコいい印象になりやすいですよね。mint greenは可愛らしい雰囲気にもすることができる色なので、色全体でバランスを整えることが大切なんだなと思いました。
フォント
"Hiragino Kaku Gothic ProN" 日本語ゴシック体 GoogleFontsから使用可
neuzeit-grotesk 英語サンセリフ体 GoogleFontsから使用可
neuzeit-grotesk
MontserratとDINを足して2で割ったような力強くもモダンな印象を与えるフォントといわれています。(こちらの記事より)
力強い印象を持っているので、男性的なサイトにぴったりのフォントです。
レタースペーシング
字間は普通くらい。どちらかというと狭めかなという印象ですが、読みづらさを感じたりはしません。小さめの文字も多いので、適切かなと思いました。
メインビジュアル
メインビジュアルはスポーツをしている女性の縦長写真が使われていてインパクトがあります。女性の目線が遷移させたいボタンへと向いているので、自然とそちらの方に目がいきます。左側にはキャッチコピー、モックアップとゲットアップのボボタンが配置されています。このキャッチコピーは強い印象を与えるというより、情報を補完する役割が強いので、少し小さめな配置になっています。モックアップを配置することで、スマホやタブレットで使うアプリなんだと一瞬で使い方がわかるところもいいですね。WEBサービスのサイトなどではたくさん活用できそうです。
メインビジュアルの画面の中でGetAppのボタンが3箇所もでてくるので、自然とどれか一つは押してしまいそう。新規顧客獲得のためのページだなと分かりやすいです。
学んだポイント
・スクロールすると男性の写真が縮小されて、タブレットのようになるのはなぜ？
ユーザーに躍動感を感じて欲しいから。また面白い仕掛けを入れることで印象に残り、アプリを使って見たいと思う人も増えるのではないか。
・iPhoneのモックアップがスクロールすると移り変わる仕掛けにしたのはなぜなのか？
このコンテンツでは3つの特徴を示していて、その特徴を端的に表すには画面を変えて見せると想像しやすいから。またモックアップをいれるためにテキストを少し左右にずらして写真の被写体の顔からモックアップまでの距離と、テキストからモックアップまでの距離を同じくらいにしてバランスをとっている。
・黒背景に地図のイラストをつけているのはなぜ？
走っている女性と合わせてランニングしているというイメージが湧くから。
・利用料金のタイトルとコンテンツを横に並べたのはなぜ？
テキストのみなので縦書きだと余白が空きすぎてしまうから。また一つ上のコンテンツHow to useと並列的な関係にあるから。
・Join Our Shootingやオンラインショップのテキストの横にウィンドウアイコンをつけているのはなぜ？
ボタンがないので、ページ遷移できるコンテンツだと分かりにくいから。ボタンほど目立たせたくはないが、違うページに飛べることを教えたい時に、ウィンドウアイコンは有効。
感想
今回はbuddiesのサイトレビューを行いました!以前からカッコいいメインビジュアルだな〜と思っていたので、今回サイトを細かく分析することができてうれしいです!ウェブだからこその良さをすごく活かしたサイトになっていてとても勉強になりました。よろしければぜひサイトの方も覗いて見てくださいね。
今回はここで終わろうと思います!時々投稿が滞ったりしていますが、ちまちま投稿していきたいと思っているので、これからもどうぞよろしくお願いします^^
この記事が気に入ったらサポートをしてみませんか？