WEBサイトのデザイン観察 vol.3
今回も、以下のサイトのアドバイスしたがって、WEBサイトのデザインのポイントを書き出してみます。
https://www.webcreatorbox.com/tech/improve-design-skills
観察するサイト
今回はこちらのサイトについて考察します！
デザイン観察
《気になったところ》
・左右に分割されている
・ブロック分けされている
・色合いが自然で優しい
・手書きのイラスト
・BGMで海の音が流れている
《なんのサイトか》
・小豆島商店の紹介サイト。販売もしている。
考察：
・海の音を流したり、写真、作り手の話を掲載したりすることで、商品とともに、小豆島の雰囲気（海や山、人など）を伝えようとしている。
《ターゲットのユーザー層を予想》
・30代、味や包装にこだわった贈答品を選びたい、家庭用に小豆島の食品を取り寄せたい
考察：
・包装の写真が載せてあり、 贈答品として選びやすい
・作り手の話が記載されており、伝統や味にこだわりがもてる
《配色》
・白、黒、茶色、薄黄色、水色
考察：
・自然を連想させる優しい色。
《書体》
・明朝体、ゴシック体（サイドバー）
考察：
・堅すぎず、優しい印象の明朝体
《レイアウト》
・グリッドレイアウト、3カラム？
考察：
・画像がタイル状に配置されている。
・1つの枠の中で画像が切り替わる
・左半分は1つのタイルを固定、右半分はスクロールできる
・右側にサイドバーが固定されている
・情報量が多く（商品の数、画像の数）、一度に多くの商品情報を見せることができるので、グリッドレイアウトに向いている
サイトの説明をしてみる
味や包装にこだわった商品を探している人をターゲットにした、小豆島商店の紹介サイト、ECサイト。グリッドレイアウトにすることで、商品情報が見やすく配置されている。白、茶、薄黄色、水色などの自然な色合いを使用し、安心感のある優しい雰囲気になっている。
参考
グリッドレイアウトの基本
https://ferret-plus.com/5540?page=2
ECサイトの基本
https://ecnomikata.com/column/8045/
この記事が気に入ったらサポートをしてみませんか？