• 投稿日 2023/07/21
  • 最終更新日 2024/01/16

UGC活用WEBデザイン 事例から学ぶデザインテクニック

ugc-case-banner

最近のWEBデザインとトレンドとして注目されているのが「UGC(ユーザー生成コンテンツ)」の活用です。UGCとはユーザー(顧客、消費者など)が生成したコンテンツのことを指し、ブログ記事、レビュー、写真、動画など、その種類は多岐にわたります。一般の消費者自身が作り出した情報は信ぴょう性が高く、他のユーザーに対する影響も大きいとされています。
そこでこの記事では、国内外の、大企業からローカルビジネスまで、UGCを活用している様々なWEBデザインの事例をご紹介します。また、UGCを活用する際に気を付ける点についても解説します。皆さんがUGCの力をWEBデザインに活用したいとお考えなら、この記事がお役に立つはずです。

目次

  1. UGCの活用でユーザーエンゲージメントを高めているデザイン事例
  2. UGCを用いたビジュアルストーリーテリングデザイン事例
  3. UGCを活用した製品開発と改善デザイン事例
  4. UGCを活用する際に気を付けること
  5. まとめ

UGCの活用でユーザーエンゲージメントを高めているデザイン事例

UGCは、ユーザーのエンゲージメントを高める効果があります。自分の投稿が公式サイトなどに掲載されると、ユーザーは自分と企業や商品提供者との結びつきを感じやすくなり、ユーザーのブランドロイヤリティや満足度が高まることが見込まれます。
そのため近年は、商品やサービスのマーケティングキャンペーンの一環として、顧客にコンテンツの作成や投稿を促し自社のランディングページやホームページで紹介するという施策(ハッシュタグキャンペーンなど)を展開する企業が増えています。
さらに企業からの一方的な広告よりも、消費者による口コミやレビューなどを好む最近の消費者のトレンドともマッチしているため、UGCは今注目されているのです。

こちらも読む:UGC(ユーザー生成コンテンツ)が注目される理由:データから見る現代消費者のマインド

大企業のUGC事例 GoPro

gopro-awards-lp

多くの人が愛用するウェアラブルカメラGoProは、UGCを使いこなしているリーディング企業の一つと言えるでしょう。GoProアワードと呼ばれるコンペティション形式のキャンペーンでは、ユーザー自身が撮影して応募した映像の中から受賞作品が選ばれ、受賞者にはGoPro製品や賞金が贈られます。

キャンペーンのウェブサイトでは、キャンペーンの詳細、応募方法、過去のキャンペーン、そして受賞作品をUGCとして掲載しています。GoProアワードの受賞作品はGoProのInstagram公式アカウントで紹介され、それらの投稿を自社ページで掲載しています。

キャンペーンページでは、美しい画像や映像がメイソンリーレイアウトでUGCが掲載されていますが、このレイアウトは多くのユーザーが様々なコンテンツを作成していることを表現することに適しています。一方でメイソンリーはコンテンツの内容やクオリティに統一感がないと、見た目にうるさく、ウェブページのブランド世界観を損なってしまうこともあるのですが、GoProアワードでは事前に審査を行うことでコンテンツのクオリティを一定以上に保つことができるので、UGCとしてまとめても統一感があり、美しい一つのウィジェットとして掲載することに成功しています。

gopro-awards-ugc

ローカルビジネスのUGC事例 FALLON’s FLOWERS

fallons-flower-top-page

米国ノースカロライナ州にあるフラワーショップFALLON’s FLOWERSでは、顧客のレビューを公式サイトに載せてUGCとして活用しています。

特徴はGoogleレビューをそのまま、顧客の名前や写真と一緒にスライダー形式でサイトに載せていることです。
これはこのショップの利用を検討しているユーザーへの大変有効なアピールとなるとともに、お気に入りのお店のウェブサイトに自分のレビューが掲載されたことでユーザーはお店への親近感が増すはずです。掲載の許可などを求めるやり取りを通じて、顧客との信頼関係を構築することもできるでしょう。
またスライダー形式にすることで、多くのレビューをすっきりと掲載することに成功し、ウェブサイト全体のクリーンな印象も邪魔していません。

fallons-flower-ugc

ローカルビジネスのUGC事例 Leefy Organics

leefy-organics-screenshot

米国フロリダ州にあるオーガニック商品を取り扱うLeefy Organicsはインスタグラムを活用して顧客の声をWEBサイトに掲載しています。
特徴は顧客から寄せられた写真を自社のフォーマットに取り込み、インスタグラムに投稿したのち、それをウェブサイトに埋め込んで表示させていることです。

この事例の良いところは、顧客の声を他のインスタグラムの投稿と一緒にウェブサイトで紹介することができる点にあります。
顧客の声、自社のPR、といったセクションを分けることなく、一つのウィジェットに表示させることができ、目を止めやすくなります。

またインスタグラムのストーリーをハイライトボタンで表示させることで、顧客からのハッシュタグ付きのストーリーも省スペースで掲載させています。

leefy-oranics-ugc

UGCを用いたビジュアルストーリーテリングデザイン事例

ビジュアルストーリーテリングとは、画像や動画を使って物語を伝える手法です。UGCを活用すれば、ユーザー自身が主役の物語を作り上げることができます。
テキストや静止画と比べて動画の情報量は豊富であり、ユーザーのレビューがその他の消費者にビビッドに伝わるため、近年増えている手法です。
最近ではTikTokやInstagram、YouTubeなどのプラットフォームを利用して動画を集め、UGC活用ツールを使ってウェブサイトに埋め込みWebページに掲載する方法をとる企業が増えています。

大企業の事例 CASIO

casio-cts1000v-lp-screenshot

世界中の誰もが認めるハイクオリティ電子機器メーカーCASIOでは、電子楽器『CT-S1000V』の発売を記念するキャンペーンページでUGCが活用されています。
革新的な楽器である同製品で採用されている新技術を使ったオリジナルの楽曲動画をユーザーがSNSにハッシュタグを通じて投稿し、それらを集めてウェブページに掲載しています。

特徴は様々なメディア(Instagram、Youtube、TikTokなど)から集めた投稿を、一つのフィード形式のウィジェットとしてウェブサイトに埋め込んでいることです。
コンテンツの収集方法が多ければ、それだけコンテンツの数や種類を増やすことができます。さらにメディアごとに別々のセクションを設けることなく、一つのUGCとしてまとめて表示しているため、同社では効率的にUGCをWEBページ上で表現することに成功しています。

またキャンペーンに参加したユーザーは他のユーザーが気になりこのキャンペーンページを何度も訪れ、他の人の作品をチェックしているはずです。UGCを設置することでページの閲覧数や滞在時間を延ばす効果も期待できます。

casio-cts1000v-ugc

ローカルビジネスのUGC事例 Your3rdSpot

your3rdspot-top-screenshot

米国ジョージア州にあるアミューズメント施設Your3rdSpotは、ビジュアルストーリーテリングをウェブサイトに取り込むことでユニークなウェブデザインを実現しています。

特徴は利用者のTikTok動画をカルーセルで掲載していることです。
TikTokは若い世代にとって最も手軽な表現手段の一つで、音楽やエフェクトを多用して魅力的な動画をたくさん投稿しています。TikTok動画は口コミやレビューとはあまり結び付きにくいかもしれませんが、TikTok動画の中には、訪れた場所や買った商品などの感想も多く投稿されています。写真に比べて情報量が多いため、UGCとして活用すれば訴求力のあるコンテンツとしてウェブサイト上で存在感を発揮するでしょう。
またこのデザインではカルーセル方式にすることでより多くの動画を省スペースで掲載することに成功しています。

your3rdspot-ugc

学校のUGC事例 Montgomery College

montgomery-college-tv-screenshot

米国メリーランド州にあるMontgomery Collegeのウェブサイトは、ソーシャルメディアや動画をフル活用している良いWebデザイン事例と言えます。
学生自らが投稿した動画ではないので厳密にはUGCの定義からは少し外れてしまうのですが、学内でインスタグラムのリールを使って集めた学生の生の声がウェブサイトに掲載されていて、文字で伝えるよりも学校や学生の雰囲気をよく伝えられています。

montgomery-college-ugc

UGCを活用した製品開発と改善デザイン事例

ユーザーのフィードバックや意見は、製品開発や改善の重要な手がかりとなります。ユーザーがどんな問題を抱えているのか、何を求めているのかを知ることで、より良い製品を提供することができます。
皆さんにも多くのフィードバックが寄せられているかもしれません。もしそうなら、それらのフィードバックをそのままUGCとして活用してみるのも一つの手でしょう。

大企業のUGC事例 LEGO

lego-idea-screenshot

LEGOはユーザーからの製品アイデアを募集し、それを基に新たなLEGOセットを開発するために、LEGO IDEAというページを開設しています。LEGOファンの消費者はこのサイトを通じて、自分のアイデアが形になる喜びを感じ、同時にLEGOは新たな製品アイデアを得ることができます。
LEGO IDEAの特徴は、ユーザーのアイディアを高品質の画像で紹介し、アイディア投稿者を名前入りで紹介している点です。またUGCとしてアイディアを紹介するだけでなく、このページを通じて他の人のアイディアに投票したり、自分のアイディアを申請することもできます。このページ全体のデザインが、UGCの収集と掲載、そしてユーザーとの交流チャネルとして完全に機能しており、LEGOがユーザーを大切にしているブランドであることを示すことに成功しています。LEGOファンにとってはLEGOの開発の一端に参加することができ、LEGOとのつながりを感じることができるでしょう。

UGCを活用する際に気をつけること

UGCをWEBデザインで活用する際には、気をつけなくてはならない点がいくつかありますので、ご紹介します。

インセンティブの提供

消費者の自然な気持ちの発露による投稿が最も価値が高いことは間違いないのですが、やはり多くのユーザにコンテンツを作成してもらい投稿してもらうためには、何らかのインセンティブを用意したほうが良いでしょう。投稿したコンテンツが公式ウェブサイトで特集されたり、投稿すると商品やサービスの割引などをインセンティブとして与えるといったことです。ユーザーが何を求めているのかを理解し、それを提供することが重要です。

ガイドラインの設定

UGCを活用したことがある方ならご経験があると思いますが、ユーザーが生成し投稿するコンテンツは多種多様で、すべてがブランドのイメージやメッセージに合致するわけではありません。ユーザーが適切なコンテンツを生成できるように、ガイドラインを設定することが重要です。
また、UGCとして集めた投稿をそのまま利用するのではなく、運営者の側で取捨選択してランディングページや公式サイトで表示するといった工夫も必要な場合があります。コンテンツのクオリティに注意を向け、WEBページのデザインを損なわないように気をつけましょう。

コンテンツのモニタリングと管理

UGCは、ブランドの評判を左右する可能性があります。不適切なコンテンツが投稿された場合、それを早急に削除する必要があります。また、ユーザーのフィードバックや意見に対して適切に対応することも重要です。

ユーザーのプライバシーを尊重

ユーザーのコンテンツを使用する際には、そのユーザーのプライバシーを尊重することが不可欠です。ユーザーの許可なくそのコンテンツを使用したり、個人情報を公開したりすることは絶対に避けるべきです。そのため自社のUGCでユーザーのコンテンツを利用する場合は、許諾をリクエストし、承認を得ることが必要です。

コンテンツの分析と活用

ユーザーから生成されたコンテンツは、そのユーザーの関心や行動、ニーズなどを理解する貴重な情報源となります。UGCを一時的なキャンペーンのコンテンツとして利用するだけでなく、集めた情報を分析し、製品開発やマーケティング戦略、コンテンツ作成などに活用していきましょう。

まとめ

今回の記事ではUGCを活用したWEBデザインの事例と活用する際の注意点を紹介しました。UGCはユーザーエンゲージメントを高め、信頼性を提供し、ブランドの物語を描くことができます。また、ユーザーのフィードバックや意見は製品開発や改善のための重要な情報源となります。ぜひ皆さんもご自身のWEBデザインにUGCをどのように活用するかご検討ください。

embedsocial

UGC活用ツール
- エンベッドソーシャル -

7種類以上のSNSから投稿を収集してウェブサイトで活用。初期費用なし・クレジットカード決済可能

無料トライアル

WEB制作 × SNS連携なら
まずはシステムを
無料でお試し!

ご導入完了までのご質問やご相談なども
お気軽にお問い合わせください。

お問い合わせ

導入に関するご不明点を
専門スタッフが解決します。

相談する
お見積り

ご導入内容に合わせた最適な
プランを選択できます。

料金表を見る
資料請求

製品概要をご紹介する資料をダウンロードいただけます。

請求に進む