よむよむカラーミー
ECサイト開設・運営のヒントが見つかるWebメディア

スマホサイトの見せ方を改善!【さこっち先生のネットショップ診断(第1回)】

この記事は…
さこっち先生こと、ECコンサルタントの酒匂 雄二さんがショップオーナーさまのお悩みを聞いて、ネットショップの改善点やサイト最適化についてアドバイスをする連載です。
今回は、兵庫県神戸市の洋菓子店「ラクソン」さまからのご相談にお答えいただきました。
※ラクソンさんはカラーミーショップをご卒業されました。

さこっち先生のごあいさつ

昨年からいまだ続くコロナ禍。2020年4月に発令された1回目の緊急事態宣言以降、ネット通販の伸びは目を見張るものがありました。
しかし、最近はショッピングモールや繁華街への人出も増え、ネット通販への追い風も少しずつ微風へと落ち着いてきたようです。

ステイホーム需要できっかけを掴み、その後につなげたお店と、特需を限定的な効果で終わらせてしまったお店の違いは、どこにあったのでしょうか?

カラーミーカレッジ、カラーミーカレッジオンライン、Webコンサルティング業務などを通じて、さまざまネットショップと伴走した私の経験が、少しでもみなさんのショップ運営のヒントになれば幸いです。

スマートフォンで見たトップページの改善点を知りたい

記念すべき第1回のショップ診断は「ラクソン」さん。兵庫県神戸市からフランスのお菓子やジャム、お茶、製菓用品を販売されているお店です。
事前にお送りいただいた質問からいくつかピックアップして、お答えと診断を行っていきたいと思います。

まずは、「スマートフォンで見たトップページのコンテンツやレイアウトについて、改善点を知りたい」という質問です。

スマホから見た場合、PCに比べて買い物がしにくいという意見をもらうことがある。スマホサイトでは「カテゴリー」や「コンテンツ」メニューが下にあるので、回遊しにくいのではないか?

ということでした。

2020年、日本国内のインターネットトラフィックの約75%はスマホからというデータがあります。私がお手伝いしているレディースアパレルやベビー用品などのネットショップでは、20代~40代の女性が顧客層の中心であるため、スマホ利用率が95%~98%を占めるケースもあります。

また、Googleのモバイルファーストインデックス(※)を考慮しても、やはりスマホでのアクセシビリティを意識したサイトづくりは不可欠になっています。
※モバイルファーストインデックス…Googleが検索結果への登録と評価をする際に、モバイル版のコンテンツを基準にする方針。

ショップオーナーさまは制作や受注業務をPCで行いますので、お店の見え方、使い勝手もPC側から判断してしまいがちですが、やはり顧客の利用環境を意識することはとても重要です。

スマホでの見え方、その初見の印象というのはとても大事ですので、ネットショップを開店したら真っ先に作り込みをしていきたいところです。

ファーストビューを改善する

まずは、ファーストビュー、ATF(※)とも呼ばれる部分が重要です。
※ATF…Above the fold(アバブ・ザ・フォールド)の略。ユーザーがWebページを訪れた際、スクロールしないで閲覧できる画面内に表示された領域のこと。

ラクソンさんのネットショップを直近1年で発売されたiPhone、Androidの計4機種で見たときのファーストビューは、以下のようになりました。段階的にファーストビューが異なるのがおわかりいただけると思います。

最も表示領域が狭いRakuten Miniでは、お菓子の型の写真、ジャムのような写真、フランスの文字から、フランスのお菓子に関する商品が販売されていることは伺えますが、初回訪問者には、どこをクリック・タップしていいのか不明瞭な印象があります。
どこに何があるかある程度わかっているリピーターと違って、初回訪問者の直帰率や離脱率はシビアです。

ある程度の表示領域で

  • ・お店の特徴
  • ・商品ジャンル
  • ・お店の強みの商品
  • ・初めての方へ

という情報が見切れていると、2ページ目に遷移してもらえる可能性が高くなるでしょう。

上図は改善の一例です。
トップページの情報をこのようにリニューアルしたショップでは、実際に直帰率の低下、滞在時間と転換率の向上が見られました。

検索エンジン経由の訪問者はトップページから来るとは限りません。検索上位を獲得している強いカテゴリーや商品ページがある場合は、そのページのヘッダーからトップページに移動できること、上図にあるような全ページ共通の追従バナーがあると、初めての方でも回遊がしやすくなると思います。

子供のころ、落ちたものでも3秒以内なら食べられるという謎のルールがあったと思いますが、Webサイトにも似たような3秒ルールがあります。
それは、訪問者が次のアクションに移れず考え込む時間が3秒を超えると、離脱率が50%を超えるというものです。初訪問でも何のショップかわかることや、次のアクションに移るまでの思考時間を3秒以内に抑えることを心がけましょう。家族や友人に「何か買ってみて」とテスト購入してもらうと、気づきや課題が見つかりやすいです。

商品ページに入れるべき内容を知りたい

続いてのご質問は「商品ページに入れるべき内容を知りたい」です。

画像や商品説明文の内容、ページの長さなどについてアドバイスがほしい。特に、「サヴォワ型」の商品ページについて診断してほしい。

というご要望をいただいていますので、実際のページを見ていきましょう。

こちらがサヴォワ型のページのファーストビューです。
写真はありますが文字情報が一切なく、サヴォワ型に対して予備知識がない方には何が販売されているのかがわかりづらい印象です。

商品画像にも文字を入れる

Googleレンズなどのアプリをお使いの方ならご承知かと思いますが、「Googleは画像の文字を読めない」は既に過去の話。現在のGoogleは画像の中の文字も認識します。
画像の文字は検索エンジンに対する「対電脳的なSEO」にも、訪問者に対する「対人的なSEO」にも非常に重要になっています。

上記のページでも、最初に表示される商品画像に「サヴォワ型」の名称を入れればSEO的な効果が違ってくるでしょうし、この商品はテレビ番組に取り上げられたという大きな実績があるので、商品画像や商品名にその旨を入れるだけでもイメージアップに繋がりますね。

<title>タグの開始から30文字を工夫する

商品の場合は商品名がページタイトルになり、検索結果でクリックできる箇所として表示されることがほとんどです。ここに「〇〇(番組名)で紹介されました」とあれば、類似品が並んでいても目を引きますし、類似品と差別化ができます。
番組で紹介されたという記載は番組側の許可が必要ですが、ラクソンさんはすでに明記されているのでその点はクリアされているでしょう。ぜひ、商品名にも採用していただきたいところです。

検索結果に表示される文字数は約30文字、それ以降は「…」と省略されますので、より目を引く文言を前半にもってくることが大切です。

ちなみに、現在の商品名は

絶版型を復刻「サヴォワ型 」☆当店だけのオリジナル・シンプルな材料でふっくら美しく焼き上がりビスキュイ・ド・サヴォワ

となっており、検索結果に表示される<title>タグには

【ビスキュイドサヴォワ型】|フランス美味しい伝統菓子型 当店だけのオリジナル

と設定されています。一例ですが、<title>タグを

【ビスキュイドサヴォワ型】Eテレ「グレーテルのかまど」で紹介されたフランス美味しい伝統菓子型

と設定すると「紹介された」までで30文字です。商品がテレビで紹介されたこともわかりますし、番組を知っている訪問者であれば、「グレーテルのかまど サヴォワ」などで検索するかもしれません。

表記ゆれに対応する

また、長い横文字の商品名は正式名称の記憶が難しく、記憶の断片で検索されることもあるため、「サヴォア」「サボア」「サボワ」などの表記ゆれに対応しておくことも重要です。
最近の検索エンジンは表記ゆれにも強く、サヴォワと検索するとサヴォア表記のサイトも上位に表示されますが、表記ゆれの学習進度はキーワードによります。「ウェディング」と「ウエディング」の微細な違いならともかく、「ひき肉」と「ミンチ」、「サロペット」と「オーバーオール」、「長ネギ」と「白ネギ」のように、呼び名が違っても同じものを指す場合は、商品説明に併記することもSEOのひとつと言えるでしょう。

当該ページでは診断時に画像のリンク切れも確認しました。画像が表示されていないことは訪問者を不安にさせますので、小さなことですがケアしておくとよいでしょう。

メルマガ配信の活用方法を知りたい

最後の質問は「メルマガ配信の活用方法を知りたい」です。

開封してもらえるメルマガの作成方法 、ファンになってもらえるメールの作り方を知りたい。

ということですので、上記の2点についてお答えします。

コロナ以前はSNSの普及により、メルマガを古い手法のように紹介する書籍や「今さらメルマガ」という声を聞くことが少なくありませんでした。

しかし、コロナ禍によるステイホームが増えたことで、多数のネットショップでメルマガの開封率が劇的に上がるのを見ました。もっとも顕著なショップでは、転換率が2.5%から4.8%とほぼ倍になり、メルマガ経由の売上が2019年比で400%になりました。
こちらのネットショップで大切にしていたのは、購入してくれた人との【その後】です。

アフターフォローを大切にする

ただセールや新着情報を送るだけではなく、購買期間を絞り込んで、「はじめまして」「あらためまして」「そういえば」の、3ステップのニュースレターを送りましょう。

1.はじめまして

初めて購入いただいた方を対象に、1ヵ月単位などで区切って送るニュースレターです。セールやキャンペーンのお知らせではなく、自己紹介のお手紙のような内容に留めます。

テレビなどメディアで商品が紹介されているのを見て購入いただいた場合、お店のことを知る間もなく購入したパターンが多いため、このケアを怠ると一度きりのお付き合いになりかねません。

2020年の緊急事態宣言下、巣ごもり需要でおしなべて売上を伸ばしたネットショップですが、2021年になって更に売上を伸ばしたショップは、この「はじめまして」メールが効いていました。

2.あらためまして

こちらは「はじめまして」よりも少し長い期間でセグメントして、お店のあらまし、コンセプト、こだわり、スタッフ紹介などを中心とした近況伺いの内容です。

3.そういえば

そしてこちらは、更に長い期間に絞ったリピーター向けのニュースレター。サザエさんの家に「ちわーっす、三河屋です」とやってくるサブちゃんのような御用聞きのイメージです。
実はこんな商品がある、今こんな試作品を作っている、こんなアレンジレシピがある、この季節にはこんなコーディネートがおすすめ、スタッフやお店の近況を交えながら商品紹介をする内容です。

この3つのステップは、友だちづくりに当てはめるとわかりやすいかと思います。「はじめまして」で出会い、仲良くなってしばらくすると「あらためまして」で出身地や趣味など、意外な一面をあらためて知ることはありませんか?
そして、「そういえば」と時間が経ってから話し合うことも少なくないですよね。

ページに書いているから、トップページにバナーを掲載しているから、訪問者は見て知ってくれていると思いがちですが、これはショップ側の都合です。
訪問者は自分の必要な情報以外は見てくれてはいないという意識でショップ運営をすると、随分違う答えが出てくると思います。
見ていないかもしれない、知らないかもしれないの「かもしれない」に寄り添うことが、ネットショップ運営でもメルマガでも大切なことではないでしょうか。

件名にこだわる

メールマガジンは件名も大事です。多くの方がスマホでGmailなどを使っていると思いますが、こちらの通知画面で表示される文字数は全角18文字程度。プッシュ通信の画面に映し出される領域で目を引く件名にすることが必要です。

一例としてかなり極端な比較にはなりますが、10%OFFのクーポンをお知らせする件名として、

こんにちは!いつも当店をご利用いただ(全角18文字)

今だけ!誰でも使える10%OFFクーポン!(全角18文字)

では、どちらが「お!」と思ってもらえるでしょうか?
メルマガを送る場合もスタッフや友人に協力してもらい、数パターンをテスト送信して内容を決め、実際に送ったメルマガの反応を記録していくとよいでしょう。その際は、Googleが無料で提供しているカスタムURL作成ツールなどを使うと便利です。
参考リンク:カスタム URL でキャンペーン データを収集する

いかがだったでしょうか?
今回は第1回ということで、どのショップにも共通するような、あるあるの質問3つにお答えしました。次回からも毎回2~3つのご質問にお答えしていこうと思っています。

この記事が少しでもネットショップ運営のお役に立つことができれば幸いです。
それではまた、第2回でお会いしましょう!ありがとうございました。

この記事を書いた人
酒匂 雄二 (さこう ゆうじ)
株式会社ユウキノイン 代表取締役
D2CアパレルECの店長・生産管理・実店舗・卸売を統括。SNSを活用し、広告費をゼロにしながら自社店舗の売上を2年で400%に成長。セミナー講師、他社ECサイトの構築、企画・運営代行などを手掛けるように。ECサイト、コーポレートサイトのSEO、 コンテンツマーケティングやSNSの運用支援、社内のWEB担当者の育成、 クラウドファンディングによる資金調達の支援から売上計画の立案、戦略業務まで WEBを活用した総合的なコンサルティング業務を伴走型で支援。カラーミーカレッジの講師も務める。