WEBサイトのデザイン観察 vol.9
今回も、以下のサイトのアドバイスしたがって、WEBサイトのデザインのポイントを書き出してみます。
https://www.webcreatorbox.com/tech/improve-design-skills
観察するサイト
今回はこちらのサイトについて考察します！
デザイン観察
《気になったところ》
・色使いが鮮やか
・写真、画像がたくさん使ってある
・会場の雰囲気がお洒落そう、と感じた
・コース、イベント、メニューがわかりやすいと感じた
《なんのサイトか》
・大阪の中之島ガーデンで開催されるビアガーデンの特設サイト
考察：
・グランピングがテーマになっており、贅沢で大人な雰囲気。
・チャコールグレーの葉っぱやワインなどの画像を使っており、アンティークで大人な雰囲気がある。
《ターゲットのユーザー層を予想》
・洒落て解放感のある雰囲気の団体のイベントを企画する20代後半から30代前半の女性（＋男性）
考察：
・イラストがアンティーク調
・フォントが女性的でやわらかい印象
《配色》
・白、チャコールグレー、抹茶色、黄緑色、色鮮やかな写真
考察：
・赤、緑、黄色などが鮮やかな写真が使われており、食欲をそそり、わくわくするような色合い。
・白背景で、鮮やかな写真が目立つ。
・チャコールグレーをフォントの色に使われており、自然の中でのBBQを想像させる。落ち着いた大人な雰囲気の色。
・抹茶色は一部のフォントや背景に使われており、ガーデンの緑を想像させる。暗めの色合いで、落ち着いた雰囲気。
《書体》
・タイトルや、目立つ説明文にはトラディショナルフェイス、明朝体
・詳細な説明にはゴシック体
考察：
・トラディショナルフェイスを使うことで、品があり親しみやすい雰囲気がある。
・明朝体は、品があり優しく親しみやすいフォントが使われている。
・説明文にはゴシック体が使われており、文字が小さくても読みやすい。
《レイアウト》
・ファーストビューにヒーローヘッダー
・ブロークングリッドレイアウト（店舗紹介画像、メニュー）
・シングルカラムレイアウト
考察：
・ファーストビューに食材の画像を大きく使い、食欲をそそっている。
・ブロークングリッドレイアウトによって自由で開放感のある雰囲気がある。
・シングルカラムレイアウトでスマホで閲覧されることを前提としている。
サイトの説明をしてみる
洒落て解放感のある雰囲気の団体のイベントを企画する20代後半から30代前半の女性（＋男性）をターゲットにした、ビアガーデンの特設サイト。ファーストビューに食材の鮮やかな写真を大きく使い、食欲をそそり、わくわくする印象を与えている。フォントにチャコールグレーや抹茶色を使っており、落ち着いた大人な雰囲気がある。
この記事が気に入ったらサポートをしてみませんか？