【サイトレビュー】製品特長がアニメーションで伝わる！ペンのブランドサイト

こんにちは、Webディレクターのしんどうです。

かっこいいボールペンのブランドサイトを見つけたので、レビューします！

今回レビューするサイト

PILOTが販売しているペン「フリクションシナジーノック」の公式サイトです。 PILOTが独自開発したペン先「シナジーチップ」を搭載していることで、なめらかな書き味を実現しています。

競合サイト

同じくペンを製造・販売している競合企業のサイトを調査してみました。

ジェットストリームスタンダード（三菱鉛筆）

ボールペンでは「ジェットストリーム」、マーカーでは「ポスカ」、シャープペンシルでは「クルトガ」や「ユニ アルファゲル」などペン分野でたくさんの人気ブランドを打ち出している三菱鉛筆株式会社です。

現在、特にブランドごとの専用ページは設けていないようでしたので、同価格帯の人気のボールペン「ジェットストリーム スタンダード」の詳細ページをピックアップしました。

▼配色

【ベース】白 【メイン】黒 【アクセント】赤

▼分析

製品紹介ページらしく、決められたコンテンツエリアに製品の特長などが記載されている、というシンプルでわかりやすい構成です。

配色は、サイト全体のトンマナに合わせて、白をベースとしてロゴカラーである赤を装飾やあしらいに差し込んでいます。

ペンの概要や特長が理路整然と説明されており、内容がとても入ってきやすく、Webページとしての役割がしっかりしている印象です。

ZOOM

トンボ鉛筆が販売する日本発のコンテンポラリーデザインペン「ZOOM」のブランドサイトです。

機能性だけでなく、デザインの美しさにもこだわりを持ってつくられたデザインペンです。

▼配色

【ベース】グレー 【メイン】白 【アクセント】なし

▼分析

総論

そもそもですが、公式サイト内で製品紹介ページをそれぞれ設けて紹介しているというケースがほとんどで、ペン商品単体でのブランドサイトを公開している事例が少なかったです。

高価格帯のペン商品のブランディングのため、新商品開発のPRのためという目的でつくられているようです。

今回のサイト「フリクションシナジーノック」

以上を踏まえて、今回ピックアップしたサイトをレビューしていきます。

▼配色

【ベース】グレー 【メイン】白 【アクセント】ペンのカラーバリエーション

いいなと思ったポイント

まず、ファーストビューのビジュアルがとても印象強いです。

影のように引かれたペンのラインが、モノトーンでまとめられた空間に切り裂くように差し込んでいてクールです！

なんと、画面左下でカラーを切り替えるボタンがあり、クリックするとラインの色が切り替わります！

ついつい気になってクリックしてしまうので、ユーザーがペンのカラーバリエーションを認知しやすい面白い仕掛けです。

スクロールしていくと、本商品のポイントであるシナジーチップにズームされたり、ペンが書かれるアニメーションなどさまざまなギミックが仕込んであります。

ペンの細さは0.3~0.5のバリエーションがあり、これも切り替えることが可能です。細さをアニメーションで確認することができるのは斬新ですね！

なぜこのデザイン？どういう効果が期待できる？

おそらく、シナジーチップという新しいペン先の開発製品を認知させるために、アニメーションでユーザーに楽しんでもらいながら伝えるWebサイトをつくったのかと考えています。

カラーや細さの切り替えができたり、セクションごとにペンがズームインしたり、多機能で躍動感あるデザインにすることで、先進性のある製品であることが伝わります。

まとめ

ユーザーにUXを与えつつ商品のバリエーションや特長を伝えることができる、非常に優れたWebサイトでした！

アニメーション一つとっても、ちゃんと意味を持たせて実装させるのが大事です。