1日1サイトレビュー(2020/05/04)
こんにちは、ウェブデザイン勉強中のじゅんです。ウェブデザインスキルもっと磨きたいということで、1日1サイトレビューを始めました。
1. ウェブサイト
2. 概要
日本のスナック菓子メーカー カルビー株式会社
3. ターゲット
・カルビーについてもっと知りたい人
・新商品を買いたい人
・キャンペーンを利用したい人
・カルビー商品が種まきから出来あがりまでのを知りたい人
4. 目的
・利用者を増やす
・カルビー商品の良さを知ってもらう
5. 構成
・白、黒、グレー、赤で構成
・ヘッダーもフッターも両方配置されているロゴを押すと、ホームページへ飛ぶ
・各 コンテンツ「一覧」ボタン色はアクセントカラー赤を利用し、ページ全体に統一感出る
5.1 メニューバー
・内容は横並びに配置
・ホバーによりフォントカラーがアクセントカラー赤に変更し、サブメニューが表示され、更にグローバルメニュー下にあるメインビジュアルに黒いグラデーションが掛けられ、サブメニューが、より見やすくなる
5.2 メインビジュアル
・流れている動画に白いロゴが配置
・商品を消費者手元に届くまでの流れを表現している
・左下に停止する/再生するボタンを配置され、動画を止めたりすることが出来る
・上記停止する/再生するボタン色はロゴ色と同じく、白で、統一感出る
5.3 オススメコンテンツ
・青空と緑色ジャガイモ畑写真が背景にし、その上に4つのコンテンツが横並び配置
・ホバーにより写真が拡大され、見やすくなる
・リンク写真に配置されている白い文字を見やすくする為、文字シャドウが利用
5.4 キャンペーン・ピックアップ
・明るいグレー背景に4つのバナーが横並び配置
・ホバーにより色が変わって、押したくなる
・各バナーはアクセントカラー赤が使用され、統一感出る
5.5 商品
・代表商品と商品に関するボタンが上下分かれて配置
・商品画像ともかく、商品名も、ホバーにより色が変わる
・ボタンに配置してある検索アイコンと不等号が、アクセントカラー赤を使用
・ホバーにより赤になる
5.6 企業情報
・オフィス風景が写っている写真が配置
・写真の下に、商品部分と同様にボタンが配置
5.7 公式SNSアカウント
・明るいグレー背景に、5つのSNSアイコンが中央揃えで横並び配置
・アイコン形が同じで、統一されている
5.8 CM&動画
・２つのCM動画が左右横並び配置
・ホバーにより色が変わって、再生ボタンが白からアクセントカラー赤に変わっていて、押したくなる
5.9 ニュース
・グローバルメニューと同様になっている中メニューバーが配置
5.10 フッター
細かい案内ガイドが配置、他の画面にアクセスしやすくなる
6. カラー
・ベースカラー：白
・メインカラー：グレー
・アクセントカラー：赤
7. フォント
・Sawarabi Gothic
・遊ゴシック体
8. 心得
・文字を読みやすく為に、文字シャドウを使用
・フッターに細かい案内ガイドを配置
9. トーレス
初めてサイトページをトレースしてみました。バナーも1から作ってみました。よかったら、ぜひ見てみてください。アドバイス頂いたら、もっと嬉しいです。
10. 最後に
半日がかかって、初めての記事でした。
デザインを言語化にするのはなかなか難しいですね。大変でしたけど、色んなことが勉強でき、楽しかったです。引き続き頑張ります。
最後まで読んでいただきありがとうございました。
この記事はこちらの記事を参考しました。
↓↓↓