【Shopifyアプリ厳選紹介】おすすめスライドショーアプリ3選！！
はじめに
最近、Shopifyの案件にてストア上にスライドショーを実装する機会がありアプリの調査を行いました。
調査を行ってみたところ、スライドショーを挿入するShopfiyアプリの種類が多かったためどれをインストールすればいいのか困っているマーチャントの方がいらっしゃるのではないかと考えました。
今回の記事では、そんなマーチャントの方を対象にスライドショーアプリを3つほどご紹介しようと思います。
最後まで読んでいただけますと幸いです。
なお、今回のご紹介するShopifyアプリは以下の点に注目して選出いたしました。
- 価格
- カスタマイズ性
- 使いやすさ
- 言語
1. スライドショー挿入アプリ | リテリア スライドショー
アプリの特徴
- 価格
- 月額：$3.99
- プラン加入ストアの場合、インストールから7日間は無料で利用可能
- 開発ストアなら無料で利用可能
- カスタマイズ性
- スライドショー画像を最大4つまで挿入可能
- スライドショーにリンクの埋め込み可能
- スライドショー左右矢印のスタイルとサイズを変更可能
- インジケーターのスタイル
- オートスライドのON/OFF
- アニメーション設定（スライド遷移時のアニメーションを設定可能）
- 配色設定
- スライドショー上下左右の余白設定可能
- 使いやすさ
- アプリの有効化はボタンワンクリックなので簡単
- スライドショーの見た目の設定はテーマカスタマイズ画面で行うため、ノーコードで編集することに慣れているマーチャントの方ならどなたでも使用できる
- 言語
- 日本語に対応している
- サポートも日本語で行っていただけるらしいです
アプリの使い方
アプリの使い方を解説していきます。
まず、Shopify app store からアプリをインストールしてください。
アプリのリストには、以下のリンクから移動できます。
アプリのインストールが完了したら、ストアのテーマにアプリを有効化する必要があります。
以下の画像の赤枠の部分にて、有効化の作業を行います。
まず、アプリをインストールするテーマを選択のセレクターから、アプリを有効化したいテーマを選択しましょう。
テーマが選択できたら、左下の有効化ボタンをクリックします。
以上で有効化は完了です。
有効化が完了すると、以下の画像の通りリテリア スライドショーというセクションがトップページに挿入されているはずです。
有効化が完了したら、早速カスタマイズしてみましょう。
カスタマイズ画面は以下の通りです。
画像を選択します。
画像を選択すると以下のように、スライドショーが表示されました。
また、スライド画像にリンクを埋め込めるようです。
スライド画像からどこか他のページに飛ばしたいみたいな場合にも対応できるのでいいですね。
続いて、スライドの左右矢印の設定をしていきましょう。
デフォルトでは矢印種類は『なし』が選択されているため、左右矢印が表示されていません。
あなたのストアのスタイルにあった矢印を選択してみましょう。
また、矢印サイズを変更することにより矢印の大きさを三段階に分けて変更できます。
以下の画像は矢印の実装例になります。
続いてインジケーターの設定です。
インジケーターとは、現在何枚目のスライドを表示しているのかを伝えるための機能になります。
口頭だけですと分かりにくいと思いますので、画像を掲載しておきます。
以下の画像の赤枠の部分がインジケーターになります。
表示/非表示を切り替えられるチェックボタンがありますので、インジケーターを表示したくない方はチェックを外しましょう。
続いて、スライドショーのアニメーション設定をしていきましょう。
設定できるのは以下の通りです。
- 自動スライド（スライドショーが勝手にスライドしてくれる機能）
- スライド時のアニメーションとスライドの間隔
以下の画像の通り、アニメーションの種類が豊富なのでかなり柔軟にカスタマイズができます。
以上がカスタマイズ方法になります。
スライドのカスタマイズ例を以下に掲載しておきます。
ノーコードの編集に慣れているマーチャントの方なら誰でも簡単にカスタマイズできそうですね。
また、日本語に対応してくれているため操作に迷うことがなく、使いやすいです。
個人的に使って欲しいスライドショーアプリですので、興味のある方は是非ご利用ください。
2. イメージ スライダー
アプリの特徴
- 価格
- 無料プランあり
- プラン１：月額$4.99
- プラン２：月額$11.99
- プラン３：月額$89.99
- カスタマイズ性
- レイアウト（複数列の構成が可能）
- 矢印
- テキスト設定
- サイズ設定（縦横比の設定）
- 背景色やボーダーの設定
- 使いやすさ
- 独自エディタ上でスライドショーの見た目を作成する必要がある
- カスタマイズ性が高い分、どこをいじったらいいのか分かりにくい
- 言語
- 独自エディタは日本語対応していない
- サポートも英語での対応になる（メールも英語で対応しましょう）
アプリの使い方
まず、アプリをインストールしてください。
以下の画像のような独自管理画面が開きます。
基本的な操作はこの画面から行うようです。
上記画像のChoose a slider for your needsにて『Slider』を選択しましょう。
メニューから『Design』を選択することによりスライドショーセクションのカスタマイズ画面に遷移します。
基本的には、『Layout』から順に下に向かって設定していけばスライドショーの見た目を作成できます。
まずは、Layoutの設定画面にてスライドショーを何列構成で表示するのか設定しましょう。
続いて、左右の矢印のスタイル、色、サイズを選択します。
続いて、縦横比を設定しましょう。
最後に、スライドのボーダーと背景色を設定すればスライドの完成です。
スライドショーの作成例を以下に掲載しておきます。
3. SmartBN: Banner Slider
アプリの特徴
- 価格
- 無料プラン
- プラン１：月額$14.99
- プラン２：月額$19.99
- プラン３：月額$39.99
- カスタマイズ性
- スライドにビデオを表示
- 豊富なテンプレートを用意
- SEO最適化
- 使いやすさ
- 独自のエディタにてカスタマイズを行う
- 手続きに沿ってカスタマイズを進めることができる
- 設定の一部でコーディングを行う必要がある
- ビデオガイドなどが充実しているため、そちらを参考にすれば使いこなせるかも
- 言語
- 管理画面は日本語には対応していない
- サポートは日本語対応しているかもしれない
アプリの使い方
アプリをインストールしたら、以下のが独自エディタがひらきますのでこちらからカスタマイズを行うことになります。
以下の画像の赤枠部分の『Add Slider』をクリックしてください。
すると、以下のような設定画面が開きます。
以下の項目を設定して、画面左上の『Next』ボタンをクリックしましょう。
- スライドの名前
- 縦横比
- モード（セレクターからお好きなモードを選択してください。選択肢のよって見た目やアニメーションが変わります。）
- アニメーションインターバル（ミリ秒単位で秒数を指定）
- フィルモード（画像を画面に対してどのように表示するか。『Stretch』の場合には、画面いっぱいに表示される）
以下の設定画面に移動したら、画像を設定しましょう。
『Add Image』を選択します。（動画を挿入したい場合には、『Add Video』を選択してください。）
以下のようなモーダルが開きますので、『Select Image』ボタンをクリックすると画像選択画面が開きます。
こちらの画像選択画面から、表示したい画像を選択してアップロードしましょう。
画像をアップロードしたら、右下の『Save』をクリックします。
画像をアップロードできたら左上の『Next』ボタンをクリックしましょう。
プレビュー画面が開きますので、スライドショーの見た目が適切か確認しましょう。
見た目が良ければ、『Next』ボタンをクリックします。
続いて、以下のような説明画面が開きます。
こちらの説明に沿ってコードをストアのテーマに反映する必要がございます。
コードが追加できたら、スライドの挿入完了です。
スライドの実装例は以下の通りです。
コーディングなどめんどくさいですが、手続きに沿ってスライドを作成できるため非常に簡単でした。
終わりに
今回は、Shopifyのスライドショーアプリを3つご紹介しました。
気になるアプリを見つけることはできましたでしょうか？
ご興味のあるアプリがあれば是非インストールしてみてください。
最後まで読んでいただき誠にありがとうございました。
Discussion