かわいいキャラクターが登場するWebサイトは、数多くあります。しかし、見た目のかわいさだけでなく、商品への理解まで自然につなげているサイトは、どれほどあるでしょうか。
今回取り上げるのは、塗料メーカー「TSG」のWebサイトです。
公式サイト：https://www.tsg-jpn.co.jp/
塗料は、普段から関心を持って調べる人が限られる、専門性の高い商品です。それでもTSGのサイトは、思わず最後まで見たくなる楽しさがあります。
印象的なのは、個性豊かなキャラクターと、わかりやすく整理された商品情報です。
かわいいから見てしまう。そして、見ているうちに商品がわかってくる。
今回は、TSGのWebサイトから、興味を生み出すデザインと、楽しさを理解につなげる情報設計について考えます。
ファーストビューで興味と理解を両立させる
TSGのWebサイトは、最初の段階から自分たちが何を扱う会社なのかを伝えています。かわいい世界観で興味を引きながら、閲覧者を置いていかないところが魅力です。
キャラクターが興味を持つきっかけになる
TSGのサイトで目を引くのは、個性豊かなキャラクターたちです。
どこかゲームのキャラクター選択画面を思わせる楽しさがあり、塗料に詳しくない人でも、つい見てみたくなります。
ここで重要なのは、キャラクターが単なる飾りではないことです。
専門的な商品を親しみやすく見せることで、本来は興味を持たなかった人にも、情報に触れるきっかけをつくっています。
かわいいだけで終わらず、何の会社かわかる
デザインが印象的でも、何を扱っている会社なのかわからなければ、閲覧者は戸惑ってしまいます。
TSGでは、キャラクターの楽しさと、塗料メーカーとしての情報が共存しています。
見た目に惹かれたあと、すぐに扱っている商品の方向性がつかめるため、興味が理解へとつながります。
世界観を伝えることと、事業内容を伝えることは両立できる。
そのバランスが、ファーストビューの魅力だと感じました。
キャラクターが商品をわかりやすくする
TSGの魅力は、キャラクターを見て終わりにならないことです。商品紹介にも工夫があり、楽しみながら違いを知ることができます。
商品ごとの特徴がつかみやすい
商品紹介では、それぞれの塗料に特徴を伝える短いコピーや性能情報が添えられています。
たとえば、耐候性や反射性、密着性など、塗料選びで重要になる情報が商品ごとに示されています。
専門用語は含まれていますが、最初から長い説明文を読む必要はありません。
まず商品の個性をつかみ、気になったものを詳しく見る。
この順番が自然です。
楽しさが比較のしやすさにつながっている
TSGの商品は、外壁用、屋根用、下塗り用など、用途によって整理されています。
さらに、それぞれの商品に特徴があるため、単に製品名を並べられるよりも違いを意識しやすくなっています。
| デザインの工夫 | 閲覧者にとってのメリット |
|---|---|
| 個性的なキャラクター | 商品に親しみを持ちやすい |
| 短い特徴的なコピー | 商品の個性をつかみやすい |
| 用途別の商品分類 | 必要な商品を探しやすい |
| 性能情報の表示 | 違いを比較する手がかりになる |
かわいさと実用性が別々に存在しているのではありません。
楽しさが、商品を理解する入口になっているところに、このサイトの良さがあります。
スクロールするほど知りたくなる構成
TSGのWebサイトは、下へ進むたびに新しい情報が現れます。しかし、単にコンテンツが多いという印象ではありません。興味が深まる順番で情報に触れられることが、最後まで見たくなる理由だと感じます。
興味を持ったあとにAboutがある
キャラクターや商品を見ていると、次第に「どんな会社がつくっているのだろう」と気になってきます。
そのタイミングで登場するのが、About TSGです。
ここでは、機能性だけでなく、美しさや予算、暮らしに合う塗料を届けたいという考え方が紹介されています。
最初から企業理念を長々と説明されるのではなく、商品に興味を持ってから会社の考え方を知る。
知りたい気持ちが生まれたあとに、知りたい情報が用意されているのです。
スクロールした先に発見がある
Webサイトを下へ進む行為は、ときに負担になります。
長い演出を待たされたり、同じような情報が続いたりすると、スクロールする意味を感じられなくなるからです。
一方、TSGでは商品ごとの違いやキャラクターの個性、会社の考え方など、進むたびに新しい発見があります。
だから、自然と次も見たくなります。
スクロールが報われるWebサイトなのです。
最後まで見てしまうのは、動きが派手だからではなく、進んだ先に見る価値があるからではないでしょうか。
【まとめ】かわいさを情報の価値につなげるWebサイト
TSGのWebサイトは、かわいいキャラクターを使いながら、商品をわかりやすく紹介しています。
最初に何の会社かを伝え、キャラクターで興味を引き、商品の特徴を比較しやすく整理する。そして、興味が深まったところで会社の考え方を届けています。
印象的だったのは、デザインの楽しさが情報の邪魔をしていないことです。
かわいいから興味を持ち、わかりやすいから読み進め、発見があるから最後まで見てしまう。
Webデザインには、すでに興味を持っている人へ情報を届ける役割だけでなく、まだ興味のない人に関心を持ってもらう役割もあります。
TSGは、その両方を実現していると感じるWebサイトでした。