【サイトレビュー】株式会社heart relation
No.2
形容詞で表すなら
大人っぽい・色っぽい・大人かわいい・オシャレ・柔らかい・優雅
いいなと思ったポイント
二つのハートがくっついて小嶋陽菜さんのチャームポイントである唇の形になる、マウスポインターがハート型になっているなど、ハートの使い方が大人っぽい。ハート自体もくびれがあって、オシャレでしなやかな印象でキュンとした。
フォント
日本語：游明朝体36ポかな M（Shippori Mincho、serif）
英数字：Montserrat（sans-serif）
アクセント：LeGrandRegular-Regular（serif）
配色
背景：rgba(181,76,85,.1)（メインカラーの透明度10%）
メイン：#b54c55（濃いピンク寄りのワインレッド）
アクセントカラー：#EAE6E2（繊細なグレージュ）
フォントカラー：#333（限りなく黒に近いダークグレー）
フォントカラーの黒とメインカラーのボルドーの２色使いで、濃淡を組み合わせてシックな印象に。グラデーションの使い方がとっても繊細。
ファーストビューのデザイン
ヘッダー
ロゴ、他言語ボタン、contact（メールアプリが起動）
スクロールすると一度ふわっと消えて、ロゴはややサイズ縮小し右上に、メニューはハンバーガーになり左上に固定される
ハンバーガーメニュー
メガメニュー（背景フェードイン、上から順にテキストが下からフェードイン）
ボタン押すとくるっと回転しながら二→×に変わる
メインビジュアル
キャッチコピーを英語で大きく配置、日本語版とうまく馴染むよう配置にこだわりを感じる。両端のアーチ型オブジェでキャッチコピーを挟むことで、真ん中感が出て、messageにある「まん中」というキーワードが表現されている。
インフォメーション
スライド方式でNewsのタイトルもなしにして、あえて目立たせないことで、FVに抜け感を感じる。
スクロールダウン
アーチ型オブジェのグラデーションと、スクロールバーが流れ消えていく動きがリンクしていて、「消えていったその先が気になる」という気持ちが生まれ、スクロールが促されている。
パーツのデザイン
見出しのデザイン
MVのキャッチコピーと同じフォントとカラーで大きく配置。messageやnewsはフォントサイズを一回り小さくカラーも他テキストと同色にすることで、メリハリと奥行きが出ている。
ボタンのデザイン
クリックするとマウスポインターのハートが弾けて、ときめきを感じる。ホバーアニメーションには大きな変化をつけないことで、この弾けるアニメーションがより強調されるバランスが絶妙で素晴らしい。
遷移時のアニメーション
全体を大きく使った大胆なアニメーション。サイトの印象が繊細で優雅なのでとてもインパクトがあってメリハリを感じる。ハートの鼓動のように強弱があって、見てるだけで心が躍りワクワクする。
全体のデザインポイント
色の濃淡の繊細さと文字の強弱の大胆さによって、大人っぽい雰囲気の中にもしっかり芯のある強さを感じた。慣性スクロールとパララックス、スクロールアニメーションの組み合わせで、落ち着いた印象がプツッとキレることが一切なく、見てるだけで癒されるサイトだと感じた。
この記事が気に入ったらサポートをしてみませんか？