Shopifyのアプリ化は必須!スマホ対応サイトの作成方法

こんにちは。中川瞬(@shun01224)です。

中川
この記事ではShopifyストアのモバイルアプリ化について知りたい
という方のために、スマホ対応サイトの作成方法について解説をします。

この記事を読むことで、

  1. Shopifyストアのモバイルアプリ化の必要性がわかる
  2. Shopifyストアのモバイルアプリ化のメリットがわかる
  3. Shopifyストアのモバイルアプリ化の方法がわかる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それでは、スマホ対応サイトの作成方法について解説をしていきます。

 

スマホでサイトを閲覧しようとしても、パソコン用に作成されたままでは見にくく、

読みにくいことが多いものです。

Shopifyストアもスマホユーザーが閲覧していることも多く、

サイトの見やすさや操作のしやすさが重要です。

Shopifyストアのモバイルアプリ化の必要性

スマホを使う人が増えれば、オンラインショッピングもスマホで行う人が増えるでしょう。

しかし、パソコンで閲覧するように作成されたサイトをスマホで見るのは、

非常に見にくいものです。

ECサイトのモバイルアプリ化は必須とされている中で、

Shopifyストアのアプリ化も必要なことです。

モバイルアプリ化の必要性について、改めて認識しましょう。

スマホユーザーの増加

周りを見ればわかるように多くの人がスマホを使っています。

ニールセンデジタルの調査によると、

2018年にはスマホからのインターネット利用者は7,009万人、

スマホからのTwitterの利用者は3,000万人超え、Instagramは2,200万人を超えています。

ネットショッピングはいつでも、どこでも買い物ができるのがメリットですが、

携帯できるスマホならそれこそどこからでも買い物をすることが可能です。

パソコンも持ち歩くことはできますが、重さを考えるといつでも、というわけにはいきません。

やはりスマホを利用して買い物をする人は多いでしょう。

さらに、アプリをダウンロードするだけでポイントがもらえるなどのサービスも増え、

ますますスマホユーザーは増えています。

2022年以降、ガラケーの3G回線のサービスが終了していくことも、

スマホへの乗り換えに拍車をかけています。

今後はさらにスマホユーザーは増えていくでしょう。

スマホで閲覧・注文しやすいサイトが必要

スマホユーザーが増えるということは、スマホで閲覧し、

さらに注文しやすいサイトが必要となります。

スマホユーザーが増えてはいても、パソコン仕様で作成されているサイトも少なくありません。

情報量は変わりませんが、画面の大きさの関係で文字が小さくなっていたり、

クリックしにくくなっていたりします。

スマホ対応になっていないと、SEO対策の面でもデメリットが生じる可能性も。

2018年、Googleではすでに、

パソコンサイトよりもスマホサイトを基準に評価する方針を示しています。

検索順位はShopifyストアにとっても大きな課題です。

Shopifyストアのアプリ化、モバイル用サイトが必要になってきます。

アプリ化されていないとサイト離脱しやすい

アプリ化されていないサイトは、ユーザーが離脱しやすいものです。

文字が小さい、クリックボタンが小さくて使いにくいなど、

アプリ化されていないサイトはストレスが生じます。

タップしにくいと思い通りにサイトを閲覧できず、イライラしてしまうでしょう。

隙間時間などを利用してネットで買い物をしたくても、

サイトが思うように操作できなければ時間がかかってしまい買い物ができません。

そのようなサイトからは離脱してしまうのも仕方ないでしょう。

サイトデザインがオシャレでも、魅力的な情報を掲載していても、

閲覧できないまま離脱してしまうと売上にはつながりません。

Shopifyストアをアプリ化するメリット

Shopifyストアをモバイルアプリ化することで、

ユーザーのサイト離脱を防ぐことができます。

見やすいサイトであれば、それを理由に離脱することはなくなるでしょう。

ほかにも、販売チャネルが増えるなどのメリットもあります。

Shopifyストアをアプリ化するメリットを把握しておきましょう。

販売チャネルが増える

販売チャネルが増える点がメリットの一つです。

販売チャネルが増えれば、アプリにおけるユーザーとのコミュニケーションが増えます。

ユーザーとのコミュニケーションは、ストアの売上に大きく影響します。

コミュニケーションを取っていないと、

ストアの信頼性が失われてしまう可能性があります。

数多くあるネットショップの中で、

特定のストアを選ぶ要素は商品のラインナップや価格だけではありません。

このお店なら安心して利用できる、という信頼が大切なのです。

信頼を得るためには、ユーザーとのコミュニケーションが必要です。

販売チャネルが増えることで、ユーザーとのコミュニケーションの機会も増えるでしょう。

スマホ機能が使える

スマホ機能が利用できて便利です。

パソコンが使えない場合でも、

Shopifyの管理画面で行う操作をほとんどスマホで操作できます。

新規の注文があれば通知が来たり、在庫管理をしたりすることも可能です。

新規注文はそのまま注文処理ができます。

外出先で商品データの編集ができれば、効率的に作業ができます。

プッシュ機能でキャンペーンやイベント情報を配信することも可能です。

リアルタイムで情報配信ができるのはメリットです。

返品や返金処理などは早い対応が大切。

顧客からの連絡にも迅速な対応が可能です。

サイト離脱を防げる

起動や動作も早いので、使い勝手がよく、サイト離脱も防げます

なかなかサイトが開かない、動作が遅い、などが多いとストレスが溜まってしまいます。

ストレスを感じれば、途中で閲覧をストップしてしまうこともあるでしょう。

時間がなくてサイトを離脱してしまうかもしれません。

便利にサクサク使えないようなサイトには、二度と訪問しない可能性もあります。

そのようなリスクをなくしてくれるのもメリットです。

ストア側も使いやすい

アプリ化することで、ストア側も使いやすくなります

商品の追加や編集、注文のフルフィルメントや払い戻し、商品タグの管理など、

さまざまなことができます。

パソコンがないと何も操作できない、というストレスがなくなるでしょう。

Shopifyの管理画面とほとんど同じように使えるので、

管理画面を熟知していればアプリ化しても操作が難しくなることはありません。

最初から使い方を確認して覚えるという手間も必要ないので、手軽に利用できます。

IOSとAndroidに対応しているので、ほとんどのスマホで使用可能です。

Shopifyストアの「ネットショップ作成」アプリでできること

「ネットショップ作成」アプリは、PCと変わらない機能が利用可能です。

「ネットショップ作成」アプリで利用できる機能について紹介します。

注文処理では、

• 注文のフルフィルメントや払い戻し
• 下書き注文の新規作成と顧客への送信
• タグの管理
• 明細書と配送ラベルの印刷
• タイムラインのコメント追加

などができます。

お客様からの注文処理を迅速にできるのは、ストアの信頼性が高くなりますね。

商品とコレクションの管理では、

• 商品とバリエーションの追加と編集
• 商品タグの管理
• 販売チャネルの商品とコレクションの表示/非表示の定義

などが可能です。

どこでも商品に関する編集ができるのは便利です。

外出先でも作業ができれば、ストアの充実にもつながります。

また、ブログを書いたり、Facebook広告を作成したりすることも可能です。

サイト分析などのマーケティング機能もあります。

顧客への連絡などもスピーディにできるので、

顧客に安心感を持ってもらうこともできるでしょう。

モバイルアプリを構築できる「Plobal-Mobile App Builder」

Shopifyには「Plobai-Mobile App Buidder」というアプリがあり、

モバイルアプリの構築に役立ちます。

「Plobai-Mobile App Buidder」とはどのようなアプリか、

機能や設定方法について解説します。

Plobal-Mobile App Builderとは

Plobai-Mobile App Buidderは、ShopifyストアのOSアプリを作成できるアプリです。

ドラッグアンドドロップするだけで、モバイルアプリが作成可能。

コーディングなど、Web制作に関する専門知識がなくても、モバイルアプリを構築できます。

Shopifyストアをアプリ化の必要性がわかっていても、

難しい方法ではなかなか作業が進まないものです。

簡単に構築できるアプリがあれば便利でしょう。

Plobai-Mobile App Buidderアプリは日本語対応していないのですが、

操作がそれほど難しくないので英語が得意ではない人でも大丈夫です。

Plobal-Mobile App Builderの機能

Plobai-Mobile App Buidderでは、コレクションや在庫をリアルタイムで同期、

新商品のキャンペーンなどのプッシュ通知、パフォーマンスの分析などができます。

会社概要や利用規約、プライバシーポリシーなどのページ設定も可能。

通貨の設定や商品レビューの表示もできます。

レイアウトでは、ストア名やロゴの表示位置の設定やメニュー画面の編集も可能です。

ヘッダーメニューの色や表示位置、アイコンの色、

カートを利用したときのアイコンカラーとテキストカラーが編集できます。

また、バナーなどのコンテンツを挿入することもでき、バナーにはコレクション、

登録商品、URLを選択し挿入することが可能です。

設定方法

アプリをインストールし、「試行を開始して通知を有効にする」を選択。

必要な情報を入力し、アプリを起動させます。

必要に応じて、メニュー画面を編集し、ストア名やロゴを設定します。

会社概要や利用規約、プライバシーポリシーページを設定し、保存。

プレビューでアプリ画面を確認しましょう。

スマホ重視でテーマを選ぶなら「District」がおすすめ

Shopifyには数多くのテーマがあり、無料テーマはレスポンシブデザインです。

その中でもスマホユーザー向けを重視して選ぶなら、「District」がおすすめです。

「District」のおすすめ理由や機能について紹介します。

ストアに合っているかどうか、チェックしてみてください。

Districtがスマホ対応に適している理由

Districtの特徴の一つは、パソコンとスマホで画像を選別し、適した画像を設定できることです。

アプリ化されていないサイトのデメリットは、テキストが読みにくいだけではありません。

画像サイズが合っていないと、魅力的な画像であってもメリットが伝わない可能性もあります。

スマホ用の画像にすることで、魅力をきちんと伝えられたり、

パソコンとは違った印象を与えることができます。

また、読みやすいブログ記事を作成できるのもおすすめの理由です。

サイトではサイドバーも重要な役割を担っています。

サイドバーで使いにくさや便利さが分かれると言っても過言ではありません。

Districtでは、サイドバーのあるページ作成ができ、検索しやすいページができます。

動画やスライドショーなどさまざまな機能も利用できるので、

商品のアピールもしやすくユスマホユーザーも見やすいサイト作成が可能です。

主な機能

Districtの主な機能は次のとおりです。

• プロモーションバナー
• スライドショー
• マーケティングポップアップ
• ホームページの動画
• 色の見本
• 選択可能な商品受け取り場所

プロモーションバナーは、ストアの上部にセールやキャンペーンなどを宣伝できるものです。

ユーザーの購買意欲をかきたてることができるでしょう。

商品やストアの画像をスライドショーで見せられるのも、魅力が伝わりやすいです。

動画メッセージも利用可能。

画像や動画を効果的に使用して、インパクトのあるファーストビューを展開することができます。

3種類のデモサイトをチェック

Districtを使ったストアをチェックしてみましょう。

トップページに動画を使用したサイト、さまざまな商品を異なる角度で並べたページ構成、

商品をシンプルにわかりやすく掲載したサイトなど、

最低でも3種類くらいはチェックしてください。

画像のズームインができる機能や、クリックすると商品の色が変わったり、

商品の詳細がわかったりする機能を利用しているものもあります。

それぞれの機能がどのように利用されているかを確認してみてください。

タイトルの付け方やレイアウトも参考になるはずです。

見せ方のアイデアも生まれてくるでしょう。

SNSはInstagramのみ

バラエティに富んだレイアウトができ、

見やすくわかりやすいページ作成ができるDistrictですが、

SNSにおいてはInstagramしか表示できません。

ストアにおいて、SNSの表示は集客や売上につながる重要なものなので、

標準で表示できるとより充実したページが作成できるでしょう。

Shopifyでスマホ対応ストアを構築する際のポイント

スマホ対応のストアを構築する際、注意したいポイントがあります。

どのような点に注意して、スマホ対応のShopifyストアを作成すればよいのでしょう。

Shopifyでスマホ対応ストアを構築する際の注意点とポイントについて解説します。

見やすいデザイン

スマホ画面はパソコン画面に比べてかなり小さいサイズになります。

小さい画面でも見やすいデザインやレイアウトであることが必要です。

パソコン画面では横幅を取ったレイアウトが多いものですが、

スマホは縦方向を意識したレイアウトが必要です。

指でタップしながら操作するスマホは、タップボタンが小さかったり、

タップボタン同士が近い位置にあったりすると、タップしにくくなります。

ボタンのサイズや位置関係には注意しましょう。

また、スマホユーザーは通勤や通学など移動中に利用する人も多く、

たいてい片手で操作します。

そのため、親指だけで操作できる方が便利です。

タップする回数が多い、重要なボタンなどは親指でタップできる位置にレイアウトしてください。

画面サイズは固定しないリキッドレイアウトがおすすめです。

スマホの種類によって横幅が異なることがあるので、

どのサイズでも対応できるようにしておきましょう。

記事や説明文が読みやすい

記事や説明文などのテキスト作成にも注意が必要です。

文字ばかりのページでは、読む気力もなくなってしまいます。

スマホでも読みやすい記事作成にするポイントの一つは、

一段落の文章を長くしないことです。

1行の文字は20文字程度を意識し、文章は2~3行程度で改行した方が読みやすいです。

ただし、文章の途中などで改行されてしまうと、読みにくく見た目もよくありません。

改行より段落で区切るようにしましょう。

文字サイズが小さくならないようにすることも大切。

文字サイズは見る側で変えることも可能ですが、手間は増えてしまいます。

わかりやすく読んでもらうためにも、企業や罫線など装飾などを使うのもおすすめです。

見やすくなるほか、メリハリのある画面になるでしょう。

機種依存文字を使うと、文字化けの原因になるので注意が必要です。

また専門用語などを使う際には、意味や解説を入れておいてあげると親切です。

パソコンであれば、コピーアンドペーストで簡単に調べられますが、

スマホではそれほど簡単に調べることができません。

意味がわからないままでは理解できないこともあります。

解説を入れておくか、リンクを張っておきましょう。

表示速度に注意

パソコンでも同じですが、表示速度が遅いとストレスになります

とくにスマホは短時間で情報を入手したい場合も多く、

ページが表示されるのに時間がかかっていてはサイトが開く前に移動してしまうでしょう。

常に電波状況がよいとも限りません。

検索エンジンの順位にも影響するため、表示速度には注意が必要です。

画像の最適化などを図り、読み込む速度が遅くならないようにしましょう。

スマホ用に最適化できるアプリ「Mobile Converter」

「Mobile Converter」はサイトをスマホ用に最適化できるアプリです。

コンバージョンドライバー機能で、アクションボタンを固定できたり、

商品画像をスライドでチェックできたりする機能があります。

モバイルギャラリーでは、Sticky Add-to Cartボタンの設定が可能で、

カートに商品をすぐい追加できるのも便利です。

さらに、アクションバーの位置や背景のテーマ、ボタン・テキストの色など

さまざまな設定ができます。

Shopifyで簡単にインストールでき、コーディングなども必要ありません。

アプリの動作も軽く、使いやすいのもメリット。

料金も無料です。

アプリ化でスマホユーザーの集客につなげよう

スマホユーザーの増加に伴い、スマホでも見やすいサイト作成が求められています。

スマホで見にくいサイトからは、ユーザーは離脱しやすくなり、売上にもつながりません。

Googleでは、スマホ向けであることをランキング要素に入れるようになりました。

このような状況の中、サイトのモバイルアプリ化は必須と言えるでしょう。

モバイルアプリ化の方法を把握してShopifyストアを構築し、

スマホユーザーの離脱を防ぎ集客アップを目指してください。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。