サイト概要
何のサイトか
大阪府にある製菓会社「ノーベル製菓株式会社」のWebサイト
何をやっているか
キャンデーやグミを主軸としたお菓子を製造・販売している会社
何をアピールしているか
- 商品情報
- 会社や商品に関する豆知識
誰がターゲットか
- 老若男女の消費者
サイトの目的は何か
- 商品認知度向上
サイトの印象
- 楽しい
- 賑やか
- 親近感
メインビジュアル
キャンデーが弾けて表示する演出はキャッチコピー通りで、賑やかさやインパクトがありワクワクする仕掛けになっている。
TVCMで見たことがあるキャラクターは身近な存在という印象があるので、親近感の湧くデザインである。
レイアウト・余白
レイアウトはシンプルな1カラムで、欲しい情報が探しやすい導線になっている。
余白は、商品同士やコンテンツ同士がぶつかり合わない丁度良い広さになっていて、節度のある賑やかさが表現されている。
配色
ベースカラー：ホワイト、ベージュ
白だけでなくベージュも採用することで、柔らかさが表現され全体的に親しみやすさが感じられる。
メインカラー：レッド
ハッキリしたレッドではあるが、角丸と組み合わせることで楽しさが表現されている。
背景動画のレッドはインパクトやメリハリを与える役割がある。
アクセントカラー：カラフル
商品ごとの様々なカラーがあることで、賑やかさがあり楽しい雰囲気が伝わってくる。
文字・フォント
和文フォント：M PLUS Rounded 1c
丸みを帯びていて優しく楽しさのあるゴシック体のフォント。
懐が広く読みやすさもあり親近感の湧くデザインになっている。
欧文フォント：Fredoka
とても可愛らしくハッキリした字面で、楽しさを加えることができるフォント。
M PLUS Roundedと相性が良く、見出しなど装飾的に使われていることが多い。
あしらい・装飾
基本的に角丸があしらわれており、また波線も採用されているので、親しみやすさや楽しさのある世界観になっている。
また、賑やかさを感じさせる要素として、所々にお菓子が散りばめられている。
アニメーション
ホバー要素は柔らかいリアクションが設定されている。
背景動画があるので、特別アニメーションを施さなくても十分賑やかで楽しい雰囲気が伝わるデザインになっている。