← すべてのガイド

はじめてのオンラインストア向けナビゲーションの基本:5つの必須要素

新しいストアオーナー向けナビゲーション監査チェックリスト(10分テスト)

モバイルとデスクトップでストアのナビゲーションをテストするステップバイステップチェックリスト。広告費を使う前に実施しましょう。

あなたは新しいShopifyストアに500ドルのFacebook広告を費やそうとしています。その前に、ひとつ質問があります。初めて訪れた顧客が迷わずに商品を見つけて購入できるかどうかを、実際にテストしたことはありますか?

ほとんどの新しいストアオーナーはこのステップをスキップします。自分でストアを構築しているので、すべてがどこにあるのか知っています。メニューを何度かクリックして「いい感じだ」と思い、ローンチします。しかし、あなたは自分のストアをテストするための最悪のテスター—すでにレイアウトを知っているのです。見ず知らずの人はそうではありません。

この10分間の監査は、コンバージョン率を静かに殺すナビゲーションの問題を明らかにします。スマートフォンを手に取り、プライベートブラウザウィンドウでストアを開き、以下の各チェックポイントを進めてください。分析ツールは不要、コードも不要、開発者も不要—必要なのはあなたと新しい目だけです。

すばやく読む
  • 広告にお金を使う前にナビゲーションをテストすることは、お金を節約し、無駄なトラフィックを防ぎます
  • この監査は5つの分野をカバーします:発見性、モバイルユーザビリティ、速度、アクセシビリティ、信頼シグナル
  • 各チェックポイントは2分以内で、技術スキルは不要です
  • 最も影響度の高い問題から修正してください—ローンチするのに完璧なスコアは必要ありません
  • カタログとトラフィックが増えるにつれて、毎月この監査を再実行してください

テスト開始前の準備

正確な結果を得るために、初めての訪問者の経験をシミュレートします:

  1. プライベート/シークレットブラウザウィンドウを使用します。 これにより、キャッシュされたデータ、保存されたパスワード、またはブラウジング履歴がテストに影響しないようになります。
  2. 実際のスマートフォンでテストします。 Chrome DevToolsのモバイルエミュレーターは開発に便利ですが、現実の状況を再現しません:片手での使いづらさ、親指の到達範囲の制限、画面の眩しさ、または遅いセルラー接続。
  3. 目的を念頭に置きます。 ただ「ぶらぶら見回る」だけではなく、特定の商品を購入したいふりをします。ベストセラー商品(またはベストセラーになるであろう商品)を選び、ホームページから見つけられるかどうか試してください。
  4. 時間を計ります。 ストップウォッチアプリを使用します。タスクに15秒以上かかる場合、問題があります。

可能であれば、友人や家族—ストアを見たことがない人—に同じテストを行わせ、見守ってください。ガイドしないでください。彼らがどこをタップするか、どこで躊躇するか、どこで立ち往生するかだけを観察します。

パート1:発見性(3分)

発見性は中心的な問題です。顧客がホームページから商品ページまで混乱なく到達できるでしょうか?

チェックポイント1.1:3タップ以内で商品に到達できますか?

ホームページから商品に移動します。タップ数(またはデスクトップのクリック数)を数えます:

  • 1タップ: ホームページ → 商品ページ(小規模なカタログやフィーチャー商品に理想的)
  • 2タップ: ホームページ → コレクション → 商品ページ(標準的で許容範囲)
  • 3タップ: ホームページ → カテゴリ → サブカテゴリ → 商品ページ(大規模なカタログには許容範囲)
  • 4タップ以上: 深すぎます。階層を平坦化するか、人気商品を早い段階で表示してください。

モバイルで4タップ以上かかる場合、メニュー構造に問題があります。追加の各タップは、顧客が放棄する可能性がある地点です。

チェックポイント1.2:カテゴリーが顧客言語で命名されていますか?

メニュー項目を声に出して読んでください。初めての訪問者は各カテゴリに何が含まれているか理解できますか?

赤い旗:

  • 内部コードまたは略語(「Summer 2026」ではなく「SS26 Collection」)
  • 一般的なラベル(「Products」、「Shop All」、「Misc」)
  • 重複カテゴリー(商品が論理的に2つの場所に存在する可能性があります:「Casual Wear」対「Everyday Basics」)

クイックフィックス:ランダムに5つの商品を選びます。それぞれについて、見ず知らずの人がどのメニューカテゴリーを探すかを予測します。予測が不確かな場合、ラベルに作業が必要です。

チェックポイント1.3:検索は機能していますか?

商品の1つの名前を検索バーに入力します。表示されましたか?次に試してください:

  • その商品名のよくあるスペルミス
  • 一般的な用語(正確な商品タイトルではなく「青いシャツ」)
  • 素材または属性(「綿」、「防水」、「50ドル以下」)

合理的なクエリで検索に何も返されない場合、顧客はあなたが彼らが探しているものを扱わないと思うでしょう。Shopifyのデフォルト検索は完全一致を処理しますが、タイポと同義語に苦労します—これを今後の改善領域として記録します。

パート2:モバイルユーザビリティ(3分)

トラフィックの60%以上はモバイルデバイスから来る可能性があります。これらのチェックポイントは、ナビゲーションがスマートフォンで実際に機能するかどうかをテストします。

チェックポイント2.1:誤ったタップなしにすべてのメニュー項目をタップできますか?

モバイルメニューを開き、各項目をタップしてみてください。注意すること:

  • タップターゲットサイズ: 親指でクリーンに各項目をヒットできますか、それとも常に間違ったものをタップしていますか?Appleのヒューマンインターフェースガイドラインは、タップターゲットごとに最小44×44ピクセルを推奨しています。
  • 項目間の間隔: 近すぎるメニュー項目は誤ったタップを引き起こします。各クリック可能な要素の間に目に見えるスペースがあるべきです。
  • アコーディオン動作: カテゴリにサブカテゴリがある場合、親をタップすると子が展開されますか、それともメニューから完全に移動しますか?理想的には、シェブロンまたは「+」アイコンはサブカテゴリを展開し、カテゴリ名をタップするとコレクションに移動します。

チェックポイント2.2:カートは常にアクセス可能ですか?

メニューを開かずに、カートアイコンが見えますか?ホームページを下にスクロール—カートアイコンは表示されたまま(スティッキーヘッダー)ですか、それとも消えていますか?

スクロール時にカートが消える場合、ページの中盤を閲覧しながらチェックアウトを決める顧客は、すべての方法で戻る必要があります。スティッキーヘッダーまたはカートタブ付きのボトムタブバーがこれを解決します。

また、確認してください:カートアイコンはアイテム数を示すバッジを表示していますか?カートに何かを追加して確認してください。このバッジは重要なフィードバックを提供します—これなしに、顧客は「カートに追加」アクションが成功したかどうか確信が持てません。

チェックポイント2.3:メニューはランドスケープモードで機能しますか?

スマートフォンを横に回転させます。メニューはまだ機能していますか?一部のテーマはランドスケープ方向で破損します—メニュー項目が重なる、ハンバーガーアイコンが消える、またはメニューが予期しない方法でスクロール可能になります。

これは特殊なケースのように見えるかもしれませんが、タブレットユーザーと横向きでブラウズする顧客が遭遇します。今のうちにクイックチェックを行うと、後で苦情を防ぐことができます。

チェックポイント 合格 不合格 クイックフィックス
商品は3タップで到達可能 ホームページから明確なパス 4タップ以上必要 カテゴリを平坦化するか、人気商品を紹介する
顧客フレンドリーなラベル 明確で具体的な名前 専門用語、略語 顧客言語を使ってリネーム
検索は結果を返す 商品を確実に検出 明らかなクエリに結果なし 商品タグと説明を改善
タップターゲットは44px以上 簡単にきれいにタップできます 頻繁な誤ったタップ テーマ設定でメニュー項目間隔を増やす
カートは常に表示 スティッキーヘッダーまたはタブバー スクロール時に消える テーマ設定でスティッキーヘッダーを有効にする
カートはアイテム数を表示 バッジが追加時に更新 フィードバックなし テーマ設定またはカートアプリを確認

パート3:速度(2分)

ロードが遅いナビゲーションは、存在しないナビゲーションです。顧客は待つつもりはありません。

チェックポイント3.1:メニューは2秒以内に表示されますか?

スマートフォンで、通常のセルラー接続で(WiFiではなく)、ハンバーガーアイコンをタップするか、ホームページに移動します。フルメニューは2秒以内にレンダリングされますか?

メニューが遅く読み込まれる場合、チェック対象:

  • 大きなヒーロー画像 がメニューを下に押す
  • 一度に読み込まれるメニュー項目が多すぎる(50以上のサブカテゴリーを持つメガメニューは重い可能性があります)
  • レンダリングをブロックするサードパーティスクリプト(チャットウィジェット、ポップアップ、分析ツール)

チェックポイント3.2:メニュー読み込み時にページがシフトしますか?

ホームページが読み込まれるときに注意深く観察してください。ヘッダーが移動していますか?要素が位置を変えていますか?これは「Cumulative Layout Shift(CLS)」と呼ばれ、GoogleのCore Web Vitalsの1つです。

レイアウトシフトを引き起こすメニューは見当違いです。タップのターゲットが動いたばかりなので、顧客が間違ったものをクリックするかもしれません。

GoogleのPageSpeed Insightsを使用してCLSを正式に測定することができます(free、pagespeed.web.devで)が、視覚的チェックで十分です。何かが移動している場合、修正が必要です。

チェックポイント3.3:クイックPageSpeedテストを実行する

デスクトップでpagespeed.web.devを開き、ストアURLを入力し、モバイルとデスクトップの両方でテストを実行します。3つの数字に焦点を当てます:

  • LCP(Largest Contentful Paint): 2.5秒以下が良好です。4秒以上は悪いです。
  • INP(Interaction to Next Paint): 200ms以下が良好です。これはページがタップにどれだけ速く応答するかを測定します。
  • CLS(Cumulative Layout Shift): 0.1以下が良好です。

スコアが完璧でなくても心配しないでください。この監査では、赤または橙色のゾーンにある指標をメモします—それらが優先度の高い修正です。

パート4:アクセシビリティの基本(1分)

アクセシビリティはコンプライアンスだけではなく、視覚障害のある顧客、運動困難のある人、または明るい日中にブラウズしている人を含め、すべての人がストアを使用できるようにすることです。

チェックポイント4.1:すべてのメニューテキストが簡単に読めますか?

スマートフォンを腕の長さまで保ちます。すべてのメニュー項目をまだ読めますか?テキストが小さすぎたり、コントラストが低すぎたり、背景に混ざっていたりする場合は、修正してください。

コントラストを確認します。メニューテキストは背景に対して最小4.5:1のコントラスト比を持つ必要があります。WebAIMのコントラストチェッカー(webaim.org/resources/contrastchecker)を使用して確認します。

チェックポイント4.2:キーボードのみを使用してナビゲートできますか?(デスクトップのみ)

デスクトップでマウスを脇に置きます。Tabキーのみを使用して、メニュー項目を移動できますか?Enterキーを押してカテゴリを開きますか?検索、カート、アカウントに到達できますか?

多くの顧客がキーボードナビゲーションを使用しています。スクリーンリーダーを使用している顧客、運動障害のある人、キーボードショートカットを好むパワーユーザーを含みます。Tabスキップが機能しない場合、テーマはARIAラベルの改善が必要な場合があります。

パート5:信頼と明確性(1分)

ナビゲーションは商品を見つけることだけではなく、正当性とプロフェッショナリズムを伝えます。

チェックポイント5.1:「About」と「Contact」ページは見つけやすいですか?

新しい訪問者—特に広告から来た人—はよくあなたのAboutまたはContactページをチェックして、ストアが合法的かどうか確認します。これらのページはメインメニューまたはフッターから1クリック以内でアクセス可能であるべきです。

「About Us」を3階層のフッターメニューの後ろに隠している場合、安心を望む顧客はそれを見つけません。

チェックポイント5.2:顧客は送料と返品ポリシーを見つけることができますか?

「50ドル以上で送料無料」と「30日間返品」は購入不安を軽減する信頼ビルダーです。これらは以下に属します:

  • トップアナウンスメントバー(すべてのページで表示)
  • フッターナビゲーション
  • または両方

これらのポリシーページが存在し、フッターからリンクされ、正しく読み込まれることを確認してください。

チェックポイント5.3:言語スイッチャーは表示されていますか?(該当する場合)

複数の市場または言語にサービスを提供している場合、言語/通貨スイッチャーが見つけやすいことを確認します。通常、ヘッダーまたはフッターにあります。間違った言語バージョンにランディングし、切り替えられない顧客はすぐに去ります。

監査後結果を影響度でランク付けします。カート可視性と壊れた検索を最初に修正してください—これらは直接収益に影響します。ラベルの明確さと速度の改善は後に続くことができます。今日すべてを修正する必要はありません。一貫した毎週の改善は急速に複合しています。

監査のスコアリング

合格したチェックポイントごとに1ポイントを自分に与えます。スコアの解釈方法は次のとおりです:

  • 11-12ポイント: ナビゲーションは堅牢です。オーバーホールではなく最適化に焦点を当てます。
  • 8-10ポイント: 良い基礎にいくつかの隙間があります。失敗したチェックポイントを収益影響でランク付けします(カートアクセス > ラベルの明確さ > キーボードナビゲーション)。
  • 5-7ポイント: 販売を減らしている可能性が高い重大な問題。パート1(発見性)とパート2(モバイル)の失敗に最初に対処します。
  • 5以下: ナビゲーションは広告にお金を使う前に深刻な改善が必要です。トラフィックを混乱したストアに駆動するために費やすすべてのドルは部分的に無駄になります。

この監査を再実行するタイミング

ナビゲーションは設定して忘れるタスクではありません。このチェックリストを再実行します:

  • 最初の広告キャンペーン前(非交渉)
  • 10以上の新しい商品を追加した後(新しい商品には新しいカテゴリが必要な場合があります)
  • テーマを変更した後(すべてのShopifyテーマはナビゲーションを異なる方法で処理します—Dawn、Refresh、Senseはそれぞれ独自のメニュー構造と設定を持ちます)
  • 最初の6ヶ月は毎月(カタログと顧客の行動は進化するでしょう)
  • その後は四半期ごと(分析でエンゲージメントの突然の低下が示されない限り)

これをより簡単にするツール

上記の手動チェックポイントについては、スマートフォンとブラウザ以外のツールは必要ありません。しかし、さらに深く掘り下げたい場合:

  • Google PageSpeed Insights(無料):正式な速度とCLSテスト
  • WebAIM Contrast Checker(無料):テキストの読みやすさを確認
  • Hotjar or Microsoft Clarity(無料トレ):セッション記録は、顧客がどこで立ち往生するかを正確に示します
  • Navi+ Menu Builder:監査により、テーマの組み込みメニューにモバイルカスタマイズが不足していることが明らかになった場合(タブバーなし、スティッキーカートなし、限られたアイコンサポート)、Navi+ではコード変更なしにモバイルとデスクトップのナビゲーションを個別に構成できます

広告ローンチ前にこの10分間の監査を実行することは、新しいストアオーナーとして実行できる最も高いROI活動の1つです。修正は通常シンプルです—カテゴリの名前変更、スティッキーヘッダーの有効化、カートアイコンの表示—しかしコンバージョンへの影響は大きいです。

この記事は、より大きなガイド「はじめてのオンラインストア向けナビゲーションの基本:5つの必須要素」の一部です。

シェア Facebook X

Navi+ AI Menu Builder で始めましょう

プラットフォームを選択してください — 無料でインストール、数分でライブ。