◎視点
お洒落なサイトはすごいけど、実際ユーザーが目にするサイトは、何か申し込みや入会する時ではないかと思い
ユーザーにより情報を的確に伝える目的のあるLPを見ることに。
特に料金案内などの見せ方を学びたく、イラストを豊富に用いたこちらのLPをレビュー。
イラストにアニメーションをつけることで更に印象がUP
料金やシステムなど、複雑な内容を扱うという中で、明確に的確に情報が伝わる工夫が多く見られるサイト。

・ファーストビュー
草の背景がラグジュアリー感を出したデザインに。
FVに動画を載せるサイトは多いが、全画面や白背景のことが多いので、背景に画像を用いることで
フレームのような役割を果たしており印象的なでざいんに。

・Rooms
各部屋の写真を羅列するのではなく、敢えて文字のみのメニューを縦に並べクリックすることで
左のサムネイルが変化するという仕組みでスッキリしたデザインに。

・施設紹介
サムネイルが動画に。最近のサイトでよく見るデザイン。
→データの軽量化

下のコンテンツは文字のみのデザインだが、背景の特徴が濃いのでバランスが取れている。

・Instagram
画像を幅100%中2.5個ぶんと、大きめに設けることで、ビジュアルでの施設雰囲気がよく伝わる。

・メニュー
全画面表示。
2/3の背景がイラストになっているところが特徴的。

◾️余白の多さ
全体的に多く取られ、ゆとりのあるデザイン。
各コンテンツ間は224pxもの間隔をとっている!

◾️視点を誘導させる工夫
各コンテンツのサムネイルが動画になっている

◾️配色
メイン:ダークグリーン アクセントカラー:サーモンピンク(メニューhover時)
白とダークグリーンを掛け合わせることで、ラグジュアリーかつパキっとした印象に

◾️文字組
font: Recoleta Regular
45px > 32px > 23px > 18px (ベース)
見出しとテキストのジャンプ率は高め

◾️UX / UI
・右下の審査申し込みの大きめボタン
・右上にお問い合わせと資料請求ボタン
※2つともメインカラーとは別の目立つ色
・メニューバーに電話番号固定表示

・Q&Aは内容量が増えてしまうので、アコーディオンパネル形式でAを表示するようにしている

ページキャプチャ

コメントを残す