【Shopify】埋め込みアプリ「Polaris」を使いこなす！

Shopifyの売り上げを上げるには、サイトのデザイン性を高めることが求められます。
そこでおすすめなのが、埋め込みアプリの導入です。

従来は、デザインを構築するには専門的な知識が必要でした。ただ埋め込みアプリを導入すれば、専門知識がなくても洗練されたデザインを構築できます。見た目の美しさはもちろんのこと、使いやすさも追求できるので購入率の向上が期待できるのです。

今回は、Shopifyの埋め込みアプリで人気の高い「Polaris」の概要を解説します。
搭載される機能や実装する方法なども分かりやすく解説するので、導入を検討する方は参考にしてください。

Shopify埋め込みアプリ「Polaris」とは

Shopify 埋め込みアプリ　Polaris

Polarisは、商品やサービスを通してユーザーに最高の体験を提供するためのUIコンポーネントの総称です。そもそもコンポーネントとは、画面上に表示するUI（ユーザーインターフェイス）を指します。たとえば、チェックボックスや文字入力欄、ボタン、ダイアログなどがあります。

サイト運営で使い回せるコンポーネントをまとめておくための機能が、UIコンポーネントなのです。UIコンポーネントを構築しておけば、デザインファイルを複数人で管理できます。またUIコンポーネントにまとめれば、サイト内のデザインのばらつきを抑えられるので見た目の統一感を図れます。

Shopifyのサイトに埋め込みアプリ「Polaris」をおすすめする理由は、Shopify自体がPolarisを使用して管理画面を構築しているからです。Shopifyの使い方に慣れている方なら、初めて使用する方でも抵抗を感じることなくPolarisを使えます。

またPolarisをおすすめする理由は、使いやすさだけではありません。Polarisは洗練された部品として設計されているので、時間をかけずに高いデザイン性と機能性を併せ持つUX（ユーザーエクスペリエンス）をデザインできます。

Shopify埋め込みアプリ「Polaris」の機能

Shopify自体もPolarisを使用しているので、Shopifyを使用する人にとっては使いやすいといったメリットがあります。ただ他にもさまざまな機能を備えるので、使いやすさを向上できるのです。Polarisの機能には、次のようなものがあります。

• 機能①複数のデバイスに対応できる
• 機能②国際的なデザインを構築できる
• 機能③豊富なコンポーネントを展開する
• 機能④初心者でも扱いやすいトークンが多い
• 機能⑤400を超えるアイコンを揃える

それぞれの特徴を確認していきましょう。

機能①複数のデバイスに対応できる

パソコンやスマホ、タブレットなど、デバイスに応じてレスポンシブルデザインに仕上げられる機能があります。

レスポンシブルデザインとは、閲覧する訪問者のデバイスの画面に合わせて表示してくれる機能のことです。従来はパソコンからの閲覧者が多いのが一般的でしたが、近年はスマホからサイトにアクセスする人が急増しています。

多くの企業では、デバイスの画面サイズに応じて最適化してくれるレスポンシブデザインに注目が集まっているのが現状です。そのほかにも、レスポンシブデザインにはさまざまなメリットがあります。

たとえば、ページの修正や更新が簡単であることもレスポンシブデザインを使用するメリットです。デバイスに応じて修正や更新をする必要がないので、担当者の負担を大幅に軽減できます。

機能②国際的なデザインを構築できる

日本ではグローバル化が進んでおり、海外に販売チャネルを増やしたいと考える企業も少なくありません。
ただ、日本のデザインをそのまま海外に反映させても良い方向に進むとは限りません。日本と海外では文化や価値観、生活習慣などが異なるので、海外に適したデザインを構築する必要があります。

Polarisでは、日本国内や国外問わず機能するインターフェースを構築できる機能があります。
販売する国に応じて適切な方法でサイトを構築できるので、訪問者に最高の体験を提供できるのです。

たとえば、国によって色を象徴する意味が異なり、米国で赤は繁栄や幸運を象徴しますが、中国では失敗を象徴するため対照的な印象を与えてします。コンポーネントを国際化できる環境が整っているので、国に応じて適切なデザインを構築できます。

機能③豊富なコンポーネントを展開する

Polarisには、多くのコンポーネントが搭載されているので自社に適したデザインに仕上げられます。サイトのデザインを構築する際に役立つ主なコンポーネントには、次のようなものがあります。

【ボタン】

追加・閉じる・キャンセルなど、サイトを運営する中で多用するボタンを作成できます。ただし、ボタンを活用し過ぎると訪問者の混乱を招くおそれがあるので、適切に設置することが大切です。

【ボタングループ】

複数のボタンがある場合に、間隔を均等に配置できるコンポーネントです。たとえば、「キャンセル」と「保存」など、ふたつの選択肢を横に並べたいときに役立ちます。ただし、スマホやタブレットなどの小さな画面の場合は、どのように表示されるか事前に確認しておくことが大切です。

【アクションリスト】

訪問者がスムーズに目的地に辿り着けるように作成するリストのことです。一般的には、ドロップダウンメニューを作成したり、複数の選択肢がある場合にオプションリストを設置したりします。

【ドロップゾーン】

ファイルをアップロードできるドロップゾーンをサイト内に設置できます。ドロップゾーンに破線の領域にファイルをドラッグアンドドロップするか、破線の領域内の任意の場所をクリックして従来の方法でアップロードすることが可能です。

【チェックボックス】

複数の選択肢を提供するために一般的に使用されるコンポーネントです。特定の利用規約に同意するためのチェック項目で使用されることもあります。

【選択リスト】

グループ化されたラジオボタン、またはチェックボックスのリストを作成できます。ラジオボタンとは、複数設置された項目の中から1つの項目を選んでほしいときに使用されるフォームです。

【インラインエラー】

サイト内でエラーが発生したときに、フォーム入力時に表示されるメッセージのことです。インラインエラーを使用すれば、フォーム入力が有効でない理由と改善方法を提示してくれます。

【キーボードアクセサリー】

入力時にソフトウェアキーボードを画面に表示できるコンポーネントです。ソフトウェアキーボードを使用すれば、訪問者はテキストを入力できます。ただし、iOSもしくはAndroidに限ります。

【アカウント接続】

ストアをさまざまなアカウントに接続するためのコンポーネントです。たとえば、フェイスブックやインスタグラム、メイルチャンプなど、それぞれのアカウントを接続する際に使用できます。ストアから販売チャネルを広げたい場合に最適です。

【折りたたみ可能】

長いテキスト情報を記載した時に、折りたたんで表示できるコンポーネントです。長いテキストを最後まで表示すると訪問者によっては離脱されるリスクがあります。このようなリスクを回避するために折りたたみ可能コンポーネントが使用されます。

【スクロール可能】

利用規約などの長い形式のコンテンツを読むときに便利なのが、スクロール可能なコンポーネントです。たとえば、サイトでは利用規約や商品詳細など長文になりがちなテキストで使用されます。

機能④初心者でも扱いやすいトークンが多い

トークンとは、色や間隔、タイポグラフィなどの要素のデザイン決定を表すコード化されたものです。大規模なサイトであれば、複数人でサイトを運営することも少なくありません。トークンを使用すれば、複数人でサイトを運営してもデザインを統一できるので一貫性を維持できます。トークンを使用するときに、専門的な知識は必要ないので初心者でも簡単に使いこなせるのもメリットです。

機能⑤400を超えるアイコンを揃える

Polarisのアイコンライブラリには、400種類を超えるアイコンが備わっています。アイコンを活用すれば、初めて使用する方でも視覚的な情報を得ながら操作を進められます。サイト運営で役立つアイコンには、次のようなものがあります。

【コードを追加】

コードを追加するために使用します。

【画像を追加】

画像を追加するために使用します。

【分析】

分析やデータを表示するために使用します。

【バーコード】

バーコードを表示するために使用します。

【ブログ】

ブログを投稿したり記事を挿入したりする際に使用します。

【購入ボタン】

購入ボタンを設置するために使用します。

【カート】

ショッピングカートを設置するために使用します。

【カレンダー】

カレンダーを表示するために使用します。

【カテゴリ】

カテゴリやファイルリストを表示するために使用します。

【チェックリスト】

チェックリストを表示するために使用します。

Shopify埋め込みアプリ「Polaris」の実装方法

Polarisを埋め込むには、まず Shopifyに実装しなければいけません。
ただ、初めて埋め込みアプリを導入する際、どのように実装すればいいか分からない方もいるでしょう。

ShopifyにPolarisを実装する方法には、次のようなものがあります。

• 実装方法①Reactを使用する場合
• 実装方法②HTMLを使用する場合

それぞれの実装方法を確認していきましょう。

実装方法①Reactを使用する場合

Reactを使用したい場合は、Polarisの「Reactモジュール」をインストールする必要があります。

そもそもReactとは、フェイスブック社が開発したウェブサイト上のUI（ユーザーインターフェイス）を構築するためのJavaScriptライブラリです。Reactはフレームワークでなく、あくまでもUIを構築するだけのライブラリになります。

Reactは、誰が見ても理解しやすいシンプルなソースコードを作成できるので、コンピュータプログラムに潜む欠陥を探し出して取り除きやすいです。特に、初めて使用する方にとってはうれしいポイントでしょう。

ShopifyでReactモジュールがインストールできたら、使用したいコンポーネントのコードを貼り付けるだけなので簡単に操作できます。

実装方法②HTMLを使用する場合

HTMを使用したい場合は、CDNで提供されているCSSファイルを読み込めば利用できます。

CDNは、大容量のデジタルコンテンツをネット上で大量配信するためのネットワークのことを指します。
従来は、大容量のデジタルコンテンツをサイトで公開する場合、ネットワークやサーバーに過剰な負荷がかかってしまうことがありました。この問題を解決し、大量配信や高速配信に耐えられるネットワークを構築したのがCDNなのです。

近年は動画を挿入するサイトも増えているので、CDNで提供されているCSSファイルを読み込むことをおすすめします。HTMLを使用する場合は、コンポーネントのコードを貼り付けるだけです。

Polarisを使ったShopifyアプリ作成方法

Shopifyアプリを開発する際に、Polarisというデザインシステムを利用すると、ユーザーにとって使いやすく統一感のあるインターフェースを作成できます。

Polarisは、Shopifyの公式ドキュメントに詳しく紹介されており、ReactコンポーネントやCSSスタイル、アイコンなどを提供しています。

Polarisを使ったShopifyアプリの作成方法は以下の通りです。

1. Shopify CLIをインストールして、Shopifyアプリのプロジェクトを作成します。このとき、テンプレートとしてReactを選択してください。
2. プロジェクトのディレクトリに移動し、npm install @shopify/polarisを実行します。
   Polarisのパッケージをインストールしてください。
3. src/index.jsファイルを開いて、PolarisのAppProviderコンポーネントをインポートして、ルートコンポーネントとして使用します。AppProviderには、ShopifyのAPIキーとショップのドメインなどの設定を渡します。
4. src/App.jsファイルを開いて、Polarisのコンポーネントをインポートして、アプリのレイアウトや機能を実装します。
5. Shopify CLIでshopify serveコマンドを実行して、ローカルサーバーを起動します。ブラウザで表示されるURLにアクセスして、アプリが正しく動作するか確認します。
6. アプリの開発が完了したら、Shopify CLIでshopify deployコマンドを実行して、アプリをShopifyに公開します。

他にもある！Shopify埋め込みアプリ2選

Polaris以外にもおすすめの埋め込みアプリがあります。どちらもShopifyの管理画面で使用されているので、同じような感覚で使えるはずです。埋め込みアプリには、次のようなものがあります。

• アプリ① App Bridge
• アプリ② App extensions

それぞれの特徴を見ていきましょう。

アプリ①App Bridge

商品開発や販売管理などマーチャント向けの機能を多く揃えるアプリです。

App Bridgeを使用すれば、サイトを表示する速度が通常の4倍程度早くなるといわれています。
また、訪問者が操作しやすい機能が多く搭載されているため、ストレスをかけることなくサイト内で買い物を楽しめます。

App BridgeはJavaScriptのライブラリであるため、実装でReactを使用することが可能です。

【Reactを使用する場合】

モジュールのインストールをおこない、Reactコンポーネントを参照しながら実装します。

Polaris自体がReactを使用しているので、見通しの良いコードを書くことが可能です。何らかの理由でReactが使えない場合は、HTML内で完結したJavaScriptを利用すれば使用できます。

Shopify 埋め込みアプリ　 App Bridge

アプリ②App extensions

Shopify上で売上や商品データをアプリを通して表示できるアプリです。

従来は、商品在庫や注文状況をアプリを開いて確認しなければいけませんでした。このような煩わしさを解消できるのが、App extensionsです。

業務効率を向上できるので、人材不足に悩む企業に適しています。近年は働き方改革に取り組む企業も多いので、業務効率を目指したいならApp extensionsを導入しましょう。

App extensionsは独自のライブラリがあるわけではありませんが、App Bridgeを使用する必要があります。PolarisやApp Bridgeに比べると、App extensionsの認知度はあまり高くありませんが、上手に活用することで利便性を上げられます。

Polarisを導入するなら、App extensionsの導入も一緒に検討してみてはいかがでしょうか。

Shopify 埋め込みアプリ　 App extensions

まとめ：【Shopify】埋め込みアプリ「Polaris」を使いこなす！

Shopifyの売り上げを上げるには、デザイン性を高めて訪問者が使いやすくする必要があります。

従来は専門的な知識がある人材しかデザインを構築できませんでしたが、今は埋め込みアプリを活用すれば専門知識がなくても洗練されたデザインのサイトを構築することができます。Shopifyの管理画面でも使われているので、初めて使用する方でも操作に慣れるまでにそう多くの時間はかかりません。

またPolarisは複数のデバイスに対応できたり国際的なデザインを構築できたり、初心者でも扱いやすいトークンが多かったりなど、さまざまなメリットがあります。

埋め込みアプリは、必ず導入しなければいけないものではありません。しかしPolarisを導入することにより、デザイン性や機能性を向上したり業務効率を上げられたりします。ぜひShopifyにPolarisの導入を検討してみましょう。