
つなweB事例ウォッチング! 世界観まで伝わる製品ブランドサイト事例5選
多くのメーカーは、製品ブランドごとに複数のブランドサイトを立ち上げています。製品誕生の背景や設計思想といった要素を盛り込み、単なる紹介サイトを超えてブランディングへと昇華しているケースも多々あります。ここでは、世界観をしっかりつくり込むことで製品の魅力を十二分に伝えているブランドサイト事例を5件ご紹介しましょう。
- サイト全体で製品の先進性を表現
<株式会社クボタ ナビウェル>【注目!】未来感が満点の上方向スクロール
- シンプルなデザインにクールな動きをミックス
<JINS 1DAY ジンズ コンタクトレンズ ブランドサイト>【注目!】ループ再生の動画がほどよいインパクトに
- アクセントカラーで製品のやさしさを伝える
<コールドドラフト防止ヒーター|チャペ>【注目!】説明図までカラールールを徹底
- こだわり溢れるサイトデザインで製品にも期待
<Artio>【注目!】スモーキーな写真が生み出すニュアンス
- ポップな演出が満載の楽しいサイト
<PLAYCOLOR Dot(トンボ鉛筆)>【注目!】絶妙なタイミングで始まるアニメーション
- まとめ
サイト全体で製品の先進性を表現
株式会社クボタ ナビウェル

「ナビウェル(NAVIWEL)」はクボタの田植え機。アクセスすると、「田植えの未来を変える」「すべてを変えるために、すべてが変わりました」といったメッセージが目に飛び込んできます。キービジュアルでは、まるで未来の研究施設のような空間に製品が佇んでおり、非常に先進的で未来的な製品だというイメージが伝わってきます。スクロール方向も、あえて下方向ではなく上スクロールを採用。既存の概念に囚われない製品であることを、Webサイト全体で表現しています。
つなweBエディターの注目ポイント
キャッチコピーとビジュアルに加え、サイトの演出まで一貫して先進性をアピール
シンプルなデザインにクールな動きをミックス
JINS 1DAY ジンズ コンタクトレンズ ブランドサイト

使い捨てコンタクトレンズのブランドサイト。非常にシンプルでスッキリしたページですが、ページ内に製品パッケージのCGアニメーションが設置されていることで、ほどよいインパクトを感じさせています。このCGアニメーションは、コンパクトな動画ファイルを埋め込んでループ再生させたもの。動画のコントローラも表示されないため、最初はこれが動画であることに気がつかず、どうやって動かしているのだろう?と疑問に思う人もいると思います。パッケージデザイン自体がシンプルなことも相まって、クールで洗練された印象を受けます。
つなweBエディターの注目ポイント
ループ再生の動画がほどよいインパクトに
アクセントカラーで製品のやさしさを伝える
コールドドラフト防止ヒーター|チャペ

窓辺に設置する暖房器具のブランドサイト。白をベースにしたレイアウトに、柔らかなトーンの水色とピンクをアクセントカラーとして使用。静かで安全な暖房器具という製品の特徴を優しい色合いで表現しています。また、製品の特徴説明イラスト部分は、空気の流れをアニメーションで見せています。このアニメーションに使われる矢印の色もアクセントカラーに合わせており、サイト全体の雰囲気に統一感が出ていると感じさせます。
つなweBエディターの注目ポイント
説明図に至るまでアクセントカラーを統一した徹底ぶり
こだわり溢れるサイトデザインで製品にも期待
Artio

イヤフォンのブランドサイト。国内メーカーですが、初めて訪れた人はおしゃれな海外ブランドかと思うのではないでしょうか。サイト内に日本語が掲載されている部分が少なく、英文が小さめのフォントサイズで配置されていることで洗練された印象を受けます。その上、配置されている写真がやや暗めのグレートーンで統一されている点や、さらに設計図のようなラインアートのイラストが所々に配置されている点などからは、どこか職人気質な雰囲気まで漂ってきます。ものづくりに対するこだわりを感じさせるサイトデザインが、製品の品質まで期待させてくれます。
つなweBエディターの注目ポイント
グレートーンの写真が生み出す独特のニュアンス
ポップな演出が満載の楽しいサイト
PLAYCOLOR Dot(トンボ鉛筆)

「PLAYCOLOR Dot」は、直径5mmのドットをスタンプ感覚で描けるカラーマーカー。ドットを並べて可愛らしいラインをつくったり、水玉模様でノートを飾ったりといろいろな楽しみ方ができる文房具です。ブランドサイトでは、そんな製品の楽しさをさまざまなアニメーションパーツで表現しています。実際にスタンプされたようにカラフルな水玉がポンポンと表示されたり、ドットで描かれたハチや蝶のイラストがふわふわと浮かんだり。ドットをスタンプのように押して描けるという製品の特徴と製品の楽しい雰囲気、その両方がしっかりと伝わってきます。スクロール操作に合わせてアニメーションの演出が始まるので、どんどん下にスクロールしていきたくなるのもポイントです。
つなweBエディターの注目ポイント
スクロール操作に合わせて、絶妙なタイミングでアニメーションが開始
製品のブランドサイトは、コーポレートサイトから分離・独立させることでサイト共通のマナーやルールといった制約を離れ、自由なデザインでサイトを構築できます。自社製品のブランディング強化を図るのであれば、ブランドサイトをつくるのも有効ではないでしょうか。