【day69】CHILL OUT（チルアウト） #1日1サイトレビュー

CHILL OUT（チルアウト）オフィシャルサイト | リラックスを味わおう リラクゼーションドリンク

【概要】
現代人に必要な “安らぎ” と“パフォーマンス” をサポートする瞬間リラクゼーションドリンクの公式サイト

【選んだ理由】
MEFILASさんの制作noteをみて感激して、自分なりにサイトレビューしたいと思ったから

【参考になるデザイン（PC）】
・商品の缶の浮遊感が「リラックゼーションドリンク」というコンセプトを表現している！
→缶が動く速度もゆったりしている
・各エリアではエリア名が背景で回転しながら円形に配置してあったり、大きめのフォントで配置してあったりする
・文字リンクは一文字ずつ波のように動くデザインになっている
→商品名の「H」の波っぽいデザインとマッチ！
・ABOUT CHILLOUTではポイントごとに矢印とポイント名が配置してあり、ポイント名をホバーすると対応する画像切り替わる
→ポイント名をクリックすると、画像がぼやけてポイントの詳細が表示される
→ポイント詳細のタイトルが英字・縦書きでも配置されていて、あしらいになっている

▼ポイント名をホバーした動き（上）、クリックした動き（下）。
円のフチがちょっと缶のフチっぽい感じもする！

・NEWSでは各記事が左右に配置されている
→他のエリアでは中央揃えだったりするので、単調にならずにいいリズムになっている
・見出しフォントは画像で表現されている
→缶の動きの処理に影響させないため？
・全体的にフォントのジャンプ率が高く、余白が多いので風通しが良いような印象＝「リラクゼーション」とマッチ！
・SNSリンクはアイコン表示ではなくフォントで表示されている
→ここでアイコンにすると、目立たせたい缶やフォントの動きに対して少し過剰なデザインになるのかも
・メニューはクリックすると、エリアリンクやFAQページリンクが大フォント、購入できる外部サイトリンクは矢印マークつきで中フォント、SNSリンクが小フォントで配置されている
→伝えたい優先度に合わせたフォントの大きさ

▼「MENU」を開いた画面

・FAQページでは、フォントの大きさと下線、「Q」の画像でほとんど構成されていて、シンプルなデザイン
→アンカーリンクも配置されていて、シンプルだけどちゃんとユーザーに優しいデザイン、、

▼FAQページのデザイン

【ターゲット】
・忙しく生活している現代人
（一息つきたいビジネスパーソンとか？）

【サイトの目的】
・商品のコンセプトなど概要を知ってもらう
・商品を購入してもらう

【フォント】
和文：San Francisco（Yu Gothic Bold）
英文：Montserrat（Adobe Fonts、Google Fonts）

【カラー】
メイン・アクセントカラー：0c6170（青緑）
フォント：212121（柔らかい黒）
背景：f1f4f4（うすい青緑色）
→背景はグラデーションもかかっていて、缶の表面の感じ

【レスポンシブ（SP）】
・PCサイズよりも画面にフィットした印象で美しい〜！！
・メニューやフッターのデザインはPCサイズとだいたい同じで、SPサイズにあわせて中央揃え、左揃えになっていたりする

▼SPサイズで「MENU」を開いた画面

【感想まとめ】
3Dモデルと、円形に回転する英字や背景の大きめフォントのデザインは親和性が高いし、海外っぽいスタイリッシュな印象も与えられる。

▼PCサイズ キャプチャ（うまく撮れてないけどメモ用）