20．YOGA-EVENT.jp｜#1日1サイトレビュー
【概要】
YOGA-EVENT.jp公式サイト内のランディングページ。オンラインヨガ（月額制オンラインサービス）についての紹介ページ。
ピンクグレープフルーツの様な赤オレンジ色がテーマカラー。元気が出るイメージ。テキストや図表によく使われている。
スクロール後、画面下に出てくるリンクボタンは水色（反対色）で目立つようになっている。
【ファーストインプレッション】
元気、健康、明るい、ポップ、女性的、楽しい。
【メインビジュアル】
・背景画像：ループ再生の画像スライドショー。PCを見ながらヨガをする女性たちや、ヨガの映像が映っているタブレットの画像が流れる。画像はそれぞれズームアウトして表示。
・背景画像の最上部にサイトロゴ、Ｇナビ
…Ｇナビの内容：特徴 お客様の声 お申込み・料金について お問い合わせ
・背景画像の中央：ページ見出し「おうち時間応援キャンペーン！初月無料ではじめる業界最安級のオンラインヨガ」
・画像の左下：Gナビ（SPではハンバーガーメニュー）
【フォント】
Poppins
Kiwi Maru
【配色】
#F24646（メインカラー、一部背景色）
#0FA7CC（リンクボタン等、ポイントカラー）
#F7F7F7（背景色、白）
【構成】
ファーストビュー
サイトロゴ、Gナビ
ページ見出し
リンクボタン（初月無料ではじめる）
サービスの特徴（YOGA EVENT.jpオンラインヨガの特徴）
・ポイント３つ。dt,ddでテキスト文を構成。画像（テキストに横並び）やスライドショーでイメージしやすく。
お客様の声：吹き出し画像の上にテキスト文。テキストの左にシルエット画像（ヨガポーズする女性）を添える。
お申込み・料金について：バナー画像、月額お支払いイメージの図、継続課金・退会規定について
Q＆A（よくある質問）：質問部分の背景をメインカラーにし、分かりやすく。
お問合せ：ライン友達追加用QRコード
運営会社：背景画像の上にテキストや運営会社ロゴを表示。
フッター：リンク（公式サイトロゴ、SNSアイコン、特定商取引法に基づく表示）、コピーライト表示
申し込みリンクボタン「初月無料ではじめる」：楕円の水色背景のボタンリンクが、画面下に固定表示される仕様。ボタンから上下プラス10pxほどの領域は、透かし模様のような背景になっている。まるでトレーシングペーパーに白い線でパターン模様を描いたようなデザイン。
【レスポンシブ】
・Gナビ：SPでは無くなる。
・ファーストビュー背景画像：高さの変化なし、幅のみ変化。
・PCでの横ならびのコンテンツは、SPでは縦並びになっている。
【あくまでも私見】
▶メインカラーの反対色（水色）を、ボタンリンクや見出しテキスト等に使用している。
（考察）申し込みボタンやサービスの特徴・メリットなど、お客様に注目してほしい部分を強調するためには、反対色にすると効果的。実際にメインカラー（赤いオレンジ色）と反対色の部分には、自然と目が行ってしまった。
▶内容によって、背景色をメインカラーと白で使い分けている。メリハリが付き、内容の違いが視覚的に分かりやすい。
（補足）まず、背景色にメインカラー（赤いオレンジ色）を仕様している部分は、サービスの特徴を説明する部分。次にお客様の声を載せている部分は、背景色が白。最後にフッターの背景色はメインカラー、となっている。
▶背景カラーや文字色などにメインカラーを取りいれ、統一感を持たせている。ビタミンカラーで元気なイメージがサービス内容と合っていると思う。
▶ところどころに使われているパターン模様が、エキゾチックさ、アジアンな雰囲気を出している。
（補足）パターン模様の見た目は、ハートのような渦巻のような線模様。サイトをあしらう画像として、さり気なく使われている。パターン模様が使われている場所は①見出し「オンラインヨガの特徴」の背景、②その特徴3つの説明を区切るためのライン、③申し込みボタンリンクの背景。この3か所にパターン模様がさりげなく使われている。
【ひとつだけ自分のデザインに取り入れるとしたら】
▶メインカラーで統一感を出すだけでなく、目立たせたい部分・重要な内容や見出しには反対色を使う。
この記事が気に入ったらサポートをしてみませんか？