トップページは店舗の『顔』となる箇所です。ユーザーはこのページから商品ページやイベントページへ遷移していくことになります。当記事では、トップページに必要な考え方や役割を紹介していきます。
Contents
楽天市場でも『ユーザーファースト』が鍵
いきなり結論となりますが、企業のコーポレートサイトやホームページと同様、楽天市場のトップページでも『ユーザーファースト』を意識したページ作りが必要です。
ユーザーファーストなページとは
それでは、ユーザーファーストなページとは何かということですが、下記３点が考慮されているページだと私は思います。
- ユーザーが知りたいことが記載されている
- ユーザーが商品を購入したいと思える
- ユーザーが安心できる
当たり前と思われることばかりかもしれませんが、これらができていない店舗がいくつもあります。見た目ばかりに凝って、ユーザーに何をつたえたいかがわからないのが、一例です。たくさん挙動などがあるページはオシャレと思われるかも知れませんが、ユーザーが本当に知りたいことを意識して、ページを作成する必要があります。
ペルソナの設定
ユーザーファーストなトップページを作成するにあたって、“ペルソナ”の設定も大切です。
ペルソナとは、“ユーザー中心設計やマーケティングにおいて、サイト、ブランド、製品を使用する典型的なユーザーを表すために作成された仮想的な人物像のことである。” (Wikipediaより引用)
つまり、性別、年齢、居住地域、年収、家族構成などの項目を考えて、ページを構成することです。トップページにおいても、どこかのグループに対してではなく、特定の誰かに向けて作成することで、ユーザーファーストなページを作成できるようになります。
レイアウト構成前にペルソナの設定を行い、刺さるページができるようにしましょう。
ユーザーファースト＝スマホファースト
ここまでユーザーファーストに必要なことを説明してきましたが、レイアウトを構成する際は、スマホファーストになっているかも重要な要素となります。楽天市場において、スマホ・アプリ経由の購入率は90%以上と言われております。このことから、なぜスマホファーストでトップページを作成する必要があるか、お分かりになると思います。下記の点を意識することでスマホファーストなページを作成できると考えられます。
- レスポンシブデザインになっているか
- 文字が見やすい(小さすぎないか)
- 画像が見やすい(スマホで見た時も十分な大きさか)
レスポンシブデザインとは、デバイスに応じてページのレイアウトを最適化することです。PCと同じレイアウトをスマホでも利用すると、スマホの画面幅以上になったり、それぞれのパーツが小さくなってしまう現象が発生します。そのような事態を防ぐために、スマホにはスマホのレイアウトで構成しましょう。また、レスポンシブデザインはコーディングが始まる前、フレームを作成する段階で作成することで、無駄な工数が発生することを防げます。
コーディングをする際は、PCで行うためどうしてもPC中心でページを作成してしまいますが、少なくとも楽天市場ではスマホが主流です。常にスマホで見やすいかを意識して、ページ作成を行いましょう。
トップページの構成
ここまでトップページ作成にあたって重要な考え方ユーザーファーストについて説明をしてきましたが、ここからはトップページがどのように構成されるかを説明していきます。
楽天市場のトップページも企業のコーポレートサイトなどと同様下記３つから構成されるのが基本です。
- ヘッダー
- メインコンテンツ
- フッター
ヘッダー(ハンバーガーメニュー含む)
ヘッダーに入れるべき項目は下記です。
- 店舗ロゴ
- キャッチコピー
- 会社概要
- 支払・送料について
- 楽天市場トップ
- 商品カテゴリ
- 検索窓
- メインコンテンツ
- イベント内容
トップページを訪問したユーザーが最初に目にする場所ですので、店舗ロゴ、キャッチコピーなど店舗イメージについて訴求できるようにしましょう。
また、楽天市場では毎月「お買い物マラソン」(３の倍数の月は「スーパーセール」)が実施されますので、イベントバナーなどもヘッダーに設置し、今商品を買うべき理由を伝えられるようにしましょう。
しかし、スマホの場合、ヘッダーに情報が多すぎると、ユーザーが混乱に陥る可能性があるので、「使いやすさ」と「見やすさ」のバランスを考えることが大切です。スマホでは、ハンバーガーメニューを活用して、ボタンをクリックするとメニューが出てくるなどして、工夫をしましょう。
メインコンテンツ
メイン部分は店舗が載せたいコンテンツを載せるのが基本ですが、頻繁に使用されるのは下記です。
- 店舗内売上ランキング
- おすすめ商品
- 新商品
- 商品一覧
- おすすめカテゴリー
メインカラムには店舗が最もユーザーへ伝えたいことを表示させるのが効果的です。ランキングや新商品などの情報は知りたいユーザーも多いので、積極的に有効活用しましょう。
フッター
お問い合わせや店舗の情報、商品への導線を設置されることが多いです。ヘッダー同様、ページ全体のナビとなるようにし、ページ最下部までスクロールされたユーザーが迷子にならないよう工夫をしましょう。
また、フッターの最下部には著作権情報を表示します。これは記載することで、著作権保護の対象となりますので、必ず記載しましょう。
(PCのみ)レフトナビ
ECサイトでPC特有のレイアウトとして、レフトナビがあります。レフトナビの役割は、店舗全体のナビゲーションです。「商品カテゴリ」、「価格別商品」、「特集」など、どのような商品があるかを一覧で表示させます。
回遊性を意識したページ構成
楽天市場においては、トップページから商品ページへ誘導することも非常に大切です。ほとんどの店舗が売上を上げるために店舗運営をしていると思います。そして、その売上は商品ページからしか発生しません。どれだけ素晴らしいトップページがあったとしても、最終的に商品ページへユーザーに遷移してもらわない限り、売上は増加しません。ユーザーに商品ページへ遷移していただくために必要なことは、下記２点です。
- ユーザーのインサイトを突き動かす
- ボタンをボタンと認識できる。
1.について、“気になる”、“なにこれ”などユーザーの”心”を動かす画像や動画を設置し、商品ページへ誘導しましょう。
2.について、ボタンかどうかがわからないということはよくあります。せっかくユーザーのインサイトを突き動かすことができても、肝心な商品ページへのボタンが正しく認識されないと、大きな機会損失となります。
ボタンの色は周囲の色と区別するなど工夫して、しっかりとボタンをボタンと認識していただけるようにしましょう。
楽天市場で動きのあるページを作成するには
楽天市場で動きのページを作成するには、“楽天GOLD”という楽天が提供をしているサービスを利用する必要があります。
楽天GOLDとは、“店舗様が作成したHTMLなどのファイルを自由にアップロードできるディスクスペースを提供するサービスです。”(店舗運営Naviより引用)
楽天GOLDでできること
このサービスを利用することで、HTMLだけでなく、CSSやJavaScriptを利用できます。
これで、スライダーやヘッダー部分の固定、ハンバーガーメニューなど動きのあるページを作成できるようになります。
また、RMSでは画像サイズが2MB以内のものしか格納できませんが、GOLDではその制限がありません。そのため、画像サイズが2MBより大きいものも格納可能です。
楽天GOLDのデメリット
ここまで動きのあるページを作成できるようになるなど、メリットをお伝えしてきました。しかし、楽天GOLDには１点欠点があります。それは、RMS管理外のためRMSでデータ分析をできないということです。
つまり、GOLDで作成したページは、どれくらいアクセスがあったのか、どこから流入をしてきたのかRMSで追うことができないです。
GOLDで作成したページを分析する方法はこちらの記事(外部サイト)で紹介されていますので、必要でしたらご覧になってください。
弊社では楽天市場で売るためのトップページ作成を行います！
昨今の通販サイト、ネットショップ運営代行会社の特徴としては、「分業」をし、作業系の仕事は下請けの会社や人件費の安い新興国に外出しをするケースが増えています。それであればまだしも、デザインやコーディングといった売上を上げるために非常に大事な仕事も自社でやらない会社が多くなってきています。確かにその場合、人件費は削減でき、高い利益を担保することが出来るでしょう。
一方で、なぜ弊社は高い人件費をかけても全員正社員で自社内完結をさせてるか説明をさせてください。
それは、「仕事に対しての温度感」に尽きます。我々はもちろんお取引先様の売上を上げることが仕事です。そのため、売上が上がるためなら、それこそなんでもします。深夜に対応をすることもあれば、休日問わず徹底的に戦略を練ることもあるでしょう。LP制作1つを取っても、納得のいく転換率が出るまで何度でも直します。
ですが、一方で、下請けの方々は「タスクとして仕事を処理します。」誤解を恐れずに言えば、売上を上げるという熱量を持たずに作業をしてOKな仕事のため、どこかで意識のズレが生じます。LPの制作を制作会社に依頼をした際に、「修正は2回までです」など制限をされた経験はありませんか？それは「売上を上げること」がゴールではなく、「納品すること」がゴールであるためです。
弊社では、ネットショップ売上向上のために妥協をしたくないため、完全自社完結で、売上に責任を持ってお仕事をする体制を作り上げました。
このように弊社ではトップページ作成においても一貫して、業務を承ります！
ネットショップの運営でお困りだしたら、以下の問い合わせよりご連絡くださいませ。
