---
title: "【新機能】商品画像へのタグ付け機能が新登場！"
date: 2020-11-30
modified: 2024-11-11
canonical_id: tag-products
locale_slug: tag-products
author: "esbasicmath"
category:
  - blog
  - product-updates
tags:
  - ugc-examples
summary: "2020年12月のアップデートにより、EmbedSocialウィジェットに表示させる画像に商品をタグ付けすることができるようになりました！ 複数のアイテムを含む画像であっても、各アイテムに対して個別にURLなどを設定することができるため、よりコンバージョンを意識したUGCの使い方をすることができるようになります。"
draft: false
seo:
  title: "【新機能】商品画像へのタグ付け機能が新登場！"
  description: "2020年12月のアップデートにより、EmbedSocialウィジェットに表示させる画像に商品をタグ付けすることができるようになりました！ 複数のアイテムを含む画像であっても、各アイテムに対して個別にURLなどを設定することができるため、よりコンバージョンを意識したUGCの使い方をすることができるようになります。"
  og_image: "https://embedsocial.jp/hp/wp-content/uploads/2020/11/tagging-banner.png"
  og_image_width: 2240
  og_image_height: 1260
  structured_data: article
---

2020年12月のアップデートにより、EmbedSocialウィジェットに表示させる画像に商品をタグ付けすることができるようになりました！ 複数のアイテムを含む画像であっても、各アイテムに対して個別にURLなどを設定することができるため、よりコンバージョンを意識したUGCの使い方をすることができるようになります。

## 目次

1.  [【新機能】商品画像へのタグ付け機能とは？](#anchor1)
2.  [アパレル・コスメ・フィットネスなど様々なご利用ケース](#anchor2)
3.  [EmbedSocialタグ付け機能：デザインプロセス](#anchor3)
4.  [EmbedSocialタグ付け機能：開発プロセス](#anchor4)
5.  [商品画像へのタグ付けを設定する方法](#anchor5)

## 【新機能】商品画像へのタグ付け機能とは？

以前よりEmbedSocialのウィジェットには[外部リンク](https://embedsocial.jp/knowledge-base/call-to-action/)を設置することができましたが、各画像に対して一つしか設定することができず、また商品名や商品画像をサムネイルとして表示することができないというデメリットがありました。

こちらの「タグ付け機能」を利用することで、一つの画像内に表示されている複数のアイテムに対して商品名やリンク先を設定することができるようになり、主にECサイト上でユーザーのSNS投稿から各商品ページへと誘導する新たな経路を作ることができるようになりました。

![](https://embedsocial.jp/hp/wp-content/uploads/2020/11/image.jpg)

{{embedsocial-hashtag:adcf48ca179d5ae9288f6b00cd2e88a42ab78f78}}

## アパレル・コスメ・フィットネスなど様々なご利用ケース

タグ付け機能は、個別のアイテムを販売するアパレルやコスメのECサイトでの活用はもとより、ECサイトでなくとも自社商品・メニューなどをタグ付けして画像に含まれる商品の説明を加えることにも役立ちます。ここでは、想定されるご利用ケースをいくつかご紹介させていただきます。

### アパレルグッズ

Instagramのショッピング機能と同様に、投稿した画像に含まれる各商品をタグ付けすることができます。個別のアイテムをセットアップとしてまとめて表現することができるため、まとめ買いの促進にもつなげることができます。

![](https://embedsocial.jp/hp/wp-content/uploads/2020/11/image-1.jpg)

### コスメ・メイク商品

メイクを施している画像などと共に各商品を紹介することができます。Instagramショッピング機能では自社で投稿した画像に対してのみ商品をタグ付けすることができますが、EmbedSocialの場合にはハッシュタグなどで収集したユーザー投稿画像にも商品をタグ付けすることができるのが大きなメリットです。

![](https://embedsocial.jp/hp/wp-content/uploads/2020/11/image-1-1.jpg)

### フィットネス関連商品

SNS上では商品の紹介を目的とした投稿でなくとも、画像内に含まれる商品をEmbedSocial上でタグ付けすることで簡単に購買への糸口をつくることができます。フィットネスの様子を撮影した画像に含まれる、各アイテムをタグ付けして購買へとつなげることができます。

![](https://embedsocial.jp/hp/wp-content/uploads/2020/11/image-2.jpg)

### レストラン・デリバリーなど

ECサイトをもつアパレル・コスメなどの業態でなくとも、SNS上での投稿に詳細説明を追加する目的でタグ付けを行うことで、お問い合わせ・予約数の増加につなげていただくことが可能です。下記の例では、投稿に含まれるレストランのメニューを個別に紹介し予約へとつなげています。

![](https://embedsocial.jp/hp/wp-content/uploads/2020/11/image-3.jpg)

## EmbedSocialタグ付け機能：デザインプロセス

優れたデザインは、EmbedSocialが実装するすべての新機能の重要な要素です。 EmbedSocial機能のグラフィックについては、UXデザイナーのアンゲラが責任を負っています。

新機能のデザインを作成するときの思想としてアンゲラはこのように話しています。

「デザインは自分から始まらない（あなたが新しいレオダヴィンチでない限り）ということを、私はいつも念頭に置いています。まず設計の基本から始めて、ユーザーにとってなじみのあるフローを作成します。既存の優れたアプリについて調査することも必須です。

毎日使用している既存の優れたアプリから、アプリや機能のインスピレーションを得ることができます。しかし何よりも製品タグ付けの設計アイデアは、機能をテストするユーザーとそのフィードバックから生まれました。」

![](https://embedsocial.jp/hp/wp-content/uploads/2020/11/image-4.jpg)

## EmbedSocialタグ付け機能：開発プロセス

開発については、若くて才能のある開発者であるクリスティヤン・ヨヴァノフスキーを中心に行われました。

開発プロセスの段階としてクリスティヤンはこのように話しています。

「開発プロセスは、該当の機能（この場合は製品のタグ付け）のUXデザイナーによる完成したデザインから始まります。

開発者は機能の背後にある思想と求められることについて報告を受け、潜在的な技術的障害について話し合い開発を開始します。開発段階でさらに議論する必要がある場合は、JiraまたはSlackで行います。開発者がタスクを完了するとステージングサーバーに配置され、チームによってテストされます。フィードバックは開発者によって議論され、取り組まれます。テスト段階が完了すると機能がリリースされます。

このような広範な機能については、開発を複数のフェーズに分割します。たとえば、最初のフェーズはMVPであり2番目のフェーズは他の追加機能を導入します。技術的な観点での最大の課題は、製品タグを画像上に正しく配置し、ウィンドウのサイズが変更されたときにタグの表示を崩さないことでした。」

![](https://embedsocial.jp/hp/wp-content/uploads/2020/11/image-1-2.jpg)

## 商品画像へのタグ付けを設定する方法

商品画像へのタグ付け機能は、EmbedSocialの[フィード機能](https://embedsocial.jp/function/embedfeed/)にてご利用いただくことができます。タグ付けはすべてのレイアウトで設定することができ、通常の[外部リンク](https://embedsocial.jp/knowledge-base/call-to-action/)と併用して設置することも可能です。

1\. ウィジェットの編集画面にて真ん中のタブ「リンク」を開きます。

![product-tagging-setting-link-page](https://embedsocial.jp/hp/wp-content/uploads/2020/11/Group-1381.png)

2\. 商品のタグ付けを希望する投稿を選択し、「リンクを追加」をクリックします。

![product-tagging-add-link](https://embedsocial.jp/hp/wp-content/uploads/2020/11/Group-1382.png)

3\. リンクの設定方法を選ぶ項目より「商品にタグ付け」を選択します。

![choose-product-tagging](https://embedsocial.jp/hp/wp-content/uploads/2020/11/Group-1383.png)

4\. 画像内のタグ付けを希望する位置をクリックすると、リンク先URLや商品名・商品価格を入力することができます。

＊スキーマに対応しているサイトでは、URLを入力するだけで商品名や価格が自動で入力されます。

![product-tagging-enter-URL](https://embedsocial.jp/hp/wp-content/uploads/2020/11/Group-1386.png)

5\. 商品のタグ付けが完了したら、「Done Tagging」を押して完了です。

![done-product-tagging](https://embedsocial.jp/hp/wp-content/uploads/2020/11/Group-1384.png)

タグ付けした商品は、投稿のポップアップと合わせて以下のように表示させることができ、SNSのユーザー投稿から各商品へのきめ細かい導線をつくることができます。

![tagged-prodct-in-lightbox](https://embedsocial.jp/hp/wp-content/uploads/2020/11/Group-1385.png)

スマートフォンから閲覧した際にも、同様にタグ付けされた商品を確認することができます。

![](https://embedsocial.jp/hp/wp-content/uploads/2020/11/product-tag-sp-520x1024.jpg)

新しく追加された商品画像へのタグ付け機能はいかがでしたでしょうか？

EmbedSocialでは機能の追加・レイアウトの改善を積極的に行っています。追加機能のご要望などございます際には、ぜひ担当者までご意見をお寄せくださいませ！