Shopifyでボトムナビゲーション（ナビゲーションバー）を簡単に設置できるアプリを徹底解説
Shopify でボトムナビゲーション（ナビゲーションバー）を簡単に設置できるアプリを徹底解説
Shopify のストアにボトムナビゲーション（ナビゲーションバー）を設置できるアプリを試しに使ってみたので、今回はその使い方を備忘録として残しておこうと思います。
ボトムナビゲーションとは以下のようなものです。主にスマートフォンの画面の下側に常時表示されるナビゲーションバーのことを指します。
今回解説していくのは以下のアプリです。
以下の公式解説記事を元に、アプリの解説を行っています。
Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション｜リテリア Navigation」解説
また、こちらのアプリは以下の記事でも紹介されていました。参考にして頂けますと幸いです。
導入のきっかけ
ボトムナビゲーション（ナビゲーションバー）は、普段利用している LINE や Instagram、Twitter、Facebook など多くのアプリに導入されています。最近では EC サイトにも活用されていますよね。
Shopify でもストアの下部にアイコン表示でホーム画面やカート画面、トーク画面などの URL を固定しておけば、ユーザーが直感的な操作で目的のページに移動できて便利です。
ストアの離脱率が高いとき、要因としてはさまざまなものが考えられますが、そのなかの一つに「購入までの手間が多い・複雑でわかりにくい」といったものがあります。
商品によほどの魅力がない限り、ユーザーは「商品を購入しようと思ったけれど、カートがどこにあるのかわからない」など些細な理由で簡単に離脱してしまうもの。
そこで今回は、Shopify のストアへ離脱率を下げるのに一役買いそうなボトムナビゲーション（ナビゲーションバー）を、試しに導入してみようと思いました。
Shopify でボトムナビゲーションを実装するには通常、コーディングを行なう必要がありますが、今回はノーコードで使えるアプリ・スマホナビゲーション｜リテリア Navigationを使ってみることにしました。
https://apps.shopify.com/navigation?locale=ja
このアプリの特長は以下の通りです。
- ノーコードで簡単に使える
- アイコンやアイコン数、背景色などをカスタマイズ可能で、ストアに応じてデザインを変更できる
- 日本語のアプリのため管理画面が日本語表示でわかりやすい
コーディングが不要で、管理画面も日本語表示のため、例えば Shopify のアプリを初めて利用する場合でも導入しやすいと思います。
月額料金も4.99 ドルと安価です。7 日間の無料体験もあるため、お試しでストアに導入してみたいという場合も気軽に使えます。
「スマホナビゲーション｜リテリア Navigation」の使い方
ここからは、実際にアプリをインストールする方法や、アプリの基本的な使い方を解説していきます。
「スマホナビゲーション｜リテリア Navigation」のインストール方法
まずは Shopify のストア管理画面にあるアプリ管理をクリックして、右上のストアをカスタマイズをクリックします。
アプリを検索するのボックスにスマホナビゲーション｜リテリア Navigationと入力し、Enter キーを押します。
該当のアプリをクリックします。ここでは 1 段目に広告が表示されていて、該当のアプリは 2 段目の真ん中にありました。
以下の画面になるので、アプリを追加するをクリックしましょう。
すると以下の画面になるので、内容を確認してアプリをインストールをクリックします。ここまででインストールは完了です。
次に、アプリの設定をしていきます。テーマに反映の項目で、アプリを反映するテーマを選択し、有効化をクリックしましょう。
ここでは「Studio（公開中のテーマ）」を選択しています。
アプリを有効化しましたのポップアップが出れば設定は完了です。
そのまま、有効化ボタンの隣にあるプレビューボタンをクリックしましょう。
ストアが表示されました。
また、左側にあるアプリを埋め込むの項目にスマホナビゲーションのアプリが追加されているのが確認できます。
スマホナビゲーションのアプリ右側にトグルボタンがあるのでクリックします。
すると、以下のようにトグルボタンが青色になります（画面左側）。
次に、画面表示の項目（ここでは右上）でモバイルを選択し、画面をモバイル表示にしましょう。
すると、ストアがスマートフォンの表示画面になります。
ストアページの下部に以下のような**ボトムナビゲーション（ナビゲーションバー）**が設置されていれば、ここまでは OK です。
ボトムナビゲーション（ナビゲーションバー）をカスタマイズする方法
ここからは、ボトムナビゲーション（ナビゲーションバー）を細かくカスタマイズしていきたいと思います。
まず、アプリを埋め込むの項目にあるスマホナビゲーションをクリックしましょう。
すると、以下のように詳細設定の画面がでてきます。
1. アイコンの数
以下はアイコンの数が 3 つの場合の画面表示です。
向かって右側の画像の下の方にボトムナビゲーション（ナビゲーションバー）があり、アイコンが 3 個並んでいるのがわかります。
左側の詳細設定で、アイコンの数を 4 個にすると以下のようになります。
アイコンの数は 3 ～ 5 個の間で選べますが、今回は 3 個で作っていきたいと思います。
2. 背景色・アイコンの色
デフォルトでは、ボトムナビゲーション（ナビゲーションバー）の背景色は白です。このままでもよいのですが、今回は青系の色に変更したいと思います。
アプリを埋め込むの項目にある背景色をクリックしましょう。
すると以下の画面になるので、好きな色をクリックするか、カラーコードを入力して選んでいきます。
今回はカラーコードを入力しました。カラーコードを入力したあと、コードの枠外（真下など）をクリックすると色が反映されました。
次にアイコンの色ですが、同じようにアプリを埋め込むの項目にあるアイコンの色をクリックしましょう。
すると以下の画面になるので、好きな色をクリックするか、カラーコードを入力して選んでいきます。今回は、デフォルトの黒のままにします。
3. アイコンの画像・タイトル・URL
アイコンの画像を選択し、表示するタイトルと移動先の URL を設定しましょう。
先ほどの詳細設定の画面を中ほどまでスクロールすると、1 つ目のアイコンを設定する項目がでてきます。
1 つめのアイコンを選択してくださいの下にあるボックスをクリックすると、以下のようにさまざまなアイコンの名前がでてきます。
試しにカートを選択してみると、以下のようにボトムナビゲーション（ナビゲーションバー）の一番左のアイコンがカートのデザインに変更されました。
次に、1 つ目のタイトルの下にあるボックスに、アイコンのタイトルを入力しましょう。ここでは試しにカートと入力します。
すると以下のように、ボトムナビゲーション（ナビゲーションバー）の一番左のアイコンのタイトルが「カート」に変更されました。
ちなみにタイトルを空欄にすると、アイコンのみの表示になります。
最後に遷移先の URLの下にあるボックスに、対応する URL を入力すれば OK です。
今回は、ホーム・カート・チャットのアイコンを以下のように並べてみました。
なお、使いたいアイコンが一覧にない場合は、アプリの運営会社に問い合わせると対応してもらえるようです。
4. 微調整
そのほか、以下の項目を微調整できます。
- ① アイコンやテキストのサイズ
- ② 最初のアイコンから最後のアイコンまでの横幅
- ③ リッチメニューが表示される範囲：ボトムナビゲーションをスマホのみに表示したい場合は 640px 程度に設定する。それ以外は設定不要
- ④ ボトムナビゲーションの上下左右の余白
- ⑤ 表示方法：ボトムナビゲーションを「常に表示」か「上スクロールで表示」か選ぶ
今回は以下のように調整してみました（①③④ を少し変更）。
すると、以下のようなデザインになりました。
これでボトムナビゲーション（ナビゲーションバー）の設置は完了です。
最後に
ここまでで、Shopify のストアにボトムナビゲーション（ナビゲーションバー）を設置できるスマホナビゲーション｜リテリア Navigationの使い方の解説は終わりです。
実際のスマホへの表示画面を見ながら、設定画面で感覚的にアイコンを調整できるのがいいなと思いました。コーディングなしでボトムナビゲーションを設置できるのは楽でいいですね。
アプリストアは以下の通りです。現時点では 7 日間無料で利用できるので、興味のある方はインストールしてみてください。
以下、こちらのブログの参考です。
Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション｜リテリア Navigation」解説
ここまでお読みいただき、ありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
