13
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Shopifyアプリ調査】YouTube動画埋め込みアプリをつかってみた

Posted at

はじめに

こんにちは!
最近ショッピファイの構築していく際に色々なアプリを試していて、気になったアプリがあったので皆さんに共有していきたいと思います!
まず、タイトルなのですが、「どこでもYouTube動画埋め込み|リテリア Video」といって、アプリ内の好きなところにYoutube動画を設置することができる日本製のshopifyアプリです。
アプリストアのリンクを掲載しておきますので、この記事を見て興味を持たれた方は調べてみてください!

この記事の内容

  • Youtube動画埋め込みアプリとは
  • デフォルトの機能との違い
  • Youtube動画埋め込みアプリでできること
  • おわりに

Youtube動画埋め込みアプリとは

当アプリはタイトル通りではあるのですが、Youtube動画をアプリ内の好きなところに配置できるアプリです。
皆さんは「商品の機能であったり、使い方であったりを伝えたいけど、なかなか文章だけだと難しい」や「もっとストアに動きを付け足したい」なんかを思ったことがあるのではないでしょうか。
かくいう私も、shopify構築をしていく上で、商品の良さをどのようにして、伝えようか悩んでいました。
そこでこのアプリに出会い使ってみたところ、便利だったのでこれから紹介していきたいと思います!

Youtube動画にすることのメリット

Youtube動画にすることのメリットを解説します!
メリットは以下の通りです。

  • テキストよりも動画の方がユーザーにメッセージが伝わりやすい。
  • ストア内に動きが生まれ、より充実したストアになる。

やはり動画がテキストより優れてる点は、伝えたいことが伝わるということではないでしょうか。
ECサイトの最大の悩みの1つにユーザーが手に取って商品を見れないということがあります。
Youtube動画にすることで実際の使用感やサイズ感など、リアルに近い商品情報を伝えられます。
さらに、ストア内に動きを加えることでより充実しユーザーからのリアクションも良くなるでしょう。

デフォルト機能との違い

Shopifyのデフォルトの機能でYoutube動画を埋め込める?
→結論から言うと、デフォルトでも動画の埋め込みはできます!
では、デフォルトとYoutube動画埋め込みアプリはどのようなところが違うのか解説していきます!

デフォルトのを実装してみた

それではデフォルトでの実装を解説していきたいと思います!
今回使うYoutube動画のサンプルはデフォルトで使用されているものでやっていきます!

管理画面の設定

手順としては以下の通りです。

  1. セクションの追加で、動画を選択する。
    Screen Shot 2022-05-22 at 11.11.38.png
  2. 好みのスタイルに設定していく。
    Screen Shot 2022-05-22 at 11.27.01.png
    流れとしては非常にシンプルでわかりやすかったです。

Youtube動画埋め込みアプリで実装してみた

続いては株式会社リテリアが公開している「どこでもYouTube動画埋め込み|リテリア Video」の実装を解説していきたいと思います!

手順としては以下の通りです。
1, ショッピファイのアプリストアで「どこでもYouTube動画埋め込み|リテリア Video」と検索し、赤い四角で囲まれているアプリを選択します。
Screen Shot 2022-05-19 at 14.32.48.png

2, アプリを導入する。
Screen Shot 2022-05-19 at 17.02.51.png
右上のアプリをインストールを選択します。
Screen Shot 2022-05-19 at 14.35.58.png
このアプリを使用するテーマを選択し、有効化のボタンをクリックします。
Screen Shot 2022-05-23 at 15.20.26.png

3, セクションの追加で「どこでもYouTube動画埋め込み|リテリア Video」を選択する。
Screen Shot 2022-05-23 at 15.21.07.png
このような画面になっていたら、アプリの有効化は完了しています。

4, 好みのスタイルに設定する。
Screen Shot 2022-05-23 at 15.57.25.png

以上が「どこでもYouTube動画埋め込み|リテリア Video」の導入方法となります。

デフォルトとの違い

さて、ここで本題に戻りますがデフォルトと株式会社リテリアのYoutube動画アプリの違いを解説していきます!

主な相違点は以下の通りです。

  • Youtube動画の自動再生
  • Youtube動画の表示数
  • 上下左右の余白の柔軟性

Youtube動画の自動再生

まず1つ目がYoutubeの動画再生を自動にするか、ユーザーに操作してもらうかの選択をチェックボックスで切り替えることができます。
Screen Shot 2022-05-25 at 17.31.29.png
動画を自動再生しますかというチェックボックスがあるのでここにチェックを入れます。
デフォルトではチェックが入った状態でした。

Youtube動画を最大3枚貼れる

リテリアのアプリでは最大3枚まで動画を表示するようにできます。
例えば、2枚と選択すれば横並びに2つのYoutube動画が表示され、3枚と選択すれば横並びに3つのYoutube動画が表示されます。
当然ではありますが、枚数を増やすにつれて一つあたりの動画の大きさは小さくなります。
Youtube動画1枚の場合
Screen Shot 2022-05-25 at 17.27.58.png
Youtube動画2枚の場合
Screen Shot 2022-05-25 at 17.28.14.png

Youtube動画3枚の場合
Screen Shot 2022-05-25 at 17.28.29.png

上下左右の空白の柔軟性

リテリアのYoutube動画アプリでは表示枚数が多くなると隣のYoutube動画との間隔が狭くなったりバランスが悪くなったりして、見栄えが悪くなります。
そのためこのアプリでは、上下の空白だけでなく、Youtube動画の左右の空白の調整もできるようになっています。
この動画間の空白の調整はとても助かりました。
Screen Shot 2022-05-25 at 17.33.48.png
ちなみに空白はスマホとPCで別々に設定できます。

どこでもYouTube動画埋め込み|リテリア Videoでできること

最後にリテリアのYoutube動画アプリでできることを解説していきます。
前述している箇所もあるためその箇所は省略させていただきます。
ご了承ください。

動画の表示数

前述のため省略

動画のURL

ここには自分の貼りたいYoutube動画のURLをそのまま貼り付けてください。
Screen Shot 2022-05-25 at 17.58.04.png

動画の縦横比

画面の縦横比はYoutube動画の縦と横の比率を表しておりデフォルトでは100%に設定されてあります。
基本的には100%から変更させなくてもいいのではないかと思います。
100%より大きくすると縦の比率が大きくなるため、縦長のYoutube動画になります。
反対に100%より小さくすると横の比率が大きくなるため、横長のYoutube動画になります。
100%より小さくした場合
Screen Shot 2022-05-25 at 17.52.14.png

100%より大きくした場合
Screen Shot 2022-05-25 at 17.51.51.png

動画間の余白

前述のため省略

自動再生

前述のため省略

ブロックの余白調整

前述のため省略

終わりに

最後まで読んでいただき誠にありがとうございます!
『どこでもYouTube動画埋め込み|リテリア Video』はいかがでしたか?
こちらのアプリは7日間の無料トライアルもあるみたいなので気になる方はまずは入れてみるのもいいと思います。
また開発ストアではアプリを無料で試すことができます。Shopifyパートナーとしてストア構築をしている方もぜひ試してみてください!

13
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?