WEBサイトのデザイン観察 vol.1

WEBサイトのデザインを眺めるのがとても好きなので、以下のサイトのアドバイスしたがって、WEBサイトのデザインのポイントを書き出してみます。
https://www.webcreatorbox.com/tech/improve-design-skills

観察するサイト

今回はこちらのサイトについて考察します！
https://butfirstchillout.com/

デザイン観察

《好きなところ》
・缶に立体感がある
・色合い
・スクロールしたときのアニメーション

《なんのサイトか》
・リラクゼーションドリンクの商品紹介サイト
・人工甘味料や保存料を使っていない次世代リラクゼーションドリンク
・「Chill out」は、日本語で相手に対して「リラックスして」や「落ち着いて」という意味
考察：
・商品自体のデザインとサイトのデザインに共通点がある

《ターゲットのユーザー層を予想》
・ストレスをコントロールしたいビジネスパーソン
・ヘルシーなライフスタイルを送る自然派志向の方
考察：
・都会的なイメージ、職場のイメージから離れすぎず、リラックスした印象

《配色》
・白、銀、青（ブルーグリーン）
考察：
・色味がブルーグリーン系でリラックスできるイメージ

《書体》
・サンセリフ体、ゴシック体、手書き風フォント
考察：
・タイトルは缶のデザインと同じ書体
・スマート、スタイリッシュな印象
・「チルする？」のみ手書き風の書体、リラックス感がある
・文字が大きめ、スマホ画面でみたときに情報が得やすそう

《レイアウト》
・フルスクリーン、ヒーローヘッダー
考察：
・サイトのTOPで、商品名と画像がフルスクリーンで表示されることで、インパクトのあるサイトになっている
・スマホでスワイプしやすそう

サイトの説明をしてみる

リフレッシュしたいビジネスパーソンをターゲットにした、自然派リラクゼーションドリンクの商品紹介サイト。ファーストビューでフルスクリーンに立体感のある商品画像を使用しており、インパクトが大きい。ブルーグリーンをメインに使用し、スタイリッシュで落ち着いた雰囲気になっている。

参考

ホームページの最適なレイアウトとは
https://www.bravo-web.com/news/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E6%9C%80%E9%81%A9%E3%81%AA%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%A8%E3%81%AF%EF%BC%9F
ヒーローヘッダー
https://webdesign-trends.net/entry/2985