マンガで納得! インターネット販売 売れるネットショップ開業・運営
マンガで納得! インターネット販売 売れるネットショップ開業・運営

ページのデザイン・レイアウトはわかりやすさを重視しよう

コツ26:ページのデザイン・レイアウトはわかりやすさを重視しよう

川村トモエ, 湯鳥ひよ+トレンド・プロ(マンガ)

2014年11月5日 7:00

この記事は「マンガで納得! インターネット販売 売れるネットショップ開業・運営」の一部を、特別に公開しているものです。

登場キャラクター

さいとうさん

さいとうさん お味噌専門の通販サイトを運営している。

ゆめのさん

ゆめのさん WEB制作会社のスタッフ。

さいとうさん「レイアウトとか見たことないくらい変わったやつにしたいなぁ」
ゆめのさん「ちょ、ちょっと待ってください。人気店を参考にしながらお話ししましょう!! 例えばこのサイト、意外とフツーじゃん!とお思いになるかもしれませんが、情報がきちんと整理されててユーザーからすると使いやすくていいサイトなんですよ」
さいとうさん「確かにユーザー視点は大切だね。かっこつけてMISOとかって表示しようかと思っていたけど、読みにくいだろうからやめておこう。このレイアウトデザインの候補もやめます」
ゆめのさん「すごいセンスだな……」

トップページは「玄関」ではない

「ネットショップを作る」というと、まずトップページを凝った作りにしたいという人も多く、デザインを外注しても、トップページに気合の入った提案をされることも少なくありません。しかし、ネットショップでは、トップページ以外から来店するケースの方が多いです。実店舗に例えると、「正面入口以外に、たくさんの入口がある店」。接客のために正面ばかりを掃除していたら、実際はほとんどの来店客は通用口を使っており、そこはゴミ捨て場状態だった……という事態がよく起こっています。

特にショッピングモールでは、検索やメルマガ、広告を経由して、ユーザーはいきなり商品ページに入ってきます。購入するかどうかも、その商品ページ内の情報だけで決めてしまうので、「トップページをまったく見ないまま購入完了」するケースも珍しくありません。

だからトップページを「わざわざ」見にくる場合は、何か別の理由があってのこと。ここでは、ユーザーの行動を踏まえて、トップページに求められる「3つの役割」を紹介します。

ほかにどんな商品があるか把握するため
ユーザーは、目当ての商品を買い物かごに入れ、「ついで買いできる商品を探す」場合にトップページに来る。だから、店舗の「目次」としての機能を持たせ、「もう1品」を探しやすい構成にしたい。
まともな店かどうか確認するため
商品ページだけでは安心感を得られず、トップページを見に来るユーザーもいる。店舗紹介ページ(コツ23)の内容を抜粋し、トップページに転載するといいだろう。マスコミ掲載やランキング入賞実績も、安心感の演出に有効。
SEOで重要な「店舗内リンク」のリンク元として
店舗内の各ページでリンクを張り合うのは、SEOの定番手法。特にトップページから各ページへのリンクは、非常に重要。詳しくはコツ27を参照。
トップページに求められる役割

レイアウトは「普通」が一番

思い入れのある自分のネットショップだから、独創的なレイアウトを追求したくなるかもしれません。でも、ユーザーにとっては、一番慣れている「定番」なレイアウトが一番使い勝手がいいものです。変にひねらずに、業界内の主要店舗などを見て「周りに合わせる」くらいの気持ちでデザインに臨みましょう。

よく言われている通り、Flashを使った複雑な演出などは、ナビゲーションなどがわかりにくくなることが多いので、ショップ運営に慣れるまでは控えた方が賢明です。

見栄えのいいページにしようとしてレイアウトに悩む人も多いですが、写真を使えば簡単です。サイズの大きい「アップの商品写真」をトップページの中心や商品ページの上部などに置くだけでイメージが変わります。

さいとうさん「レイアウトとか見たことないくらい変わったやつにしたいなぁ」
お客さんがどこをクリックしていいかわからないようなデザインになってしまっては本末転倒だ。

ナビゲーションは日本語表記が基本

バナーやボタン、リンクのテキストは、日本語表記が基本です。「店舗紹介」や「こんなお店です」と書くべきところを「information」「about us」などと書いてしまうと、来店客は何のことか気付かずに素通りしてしまいます。おしゃれにしたくてついつい英字にしてしまう気持ちはわかりますが、何のためにナビゲーションがあるのか、を先に考えれば、どっちがいいかはおのずとわかるはずです。

海外のブランド名など、どうしても日本語にできない場合も、カタカナにするか、アルファベットとカタカナを併記するようにしましょう。複雑な英単語は視認性が低い(ぱっと見てすぐわからない)ものです。一方、漢字の羅列も同じようにわかりにくいもの。ひらがなを混ぜるなど、わかりやすさを心がけましょう。

さいとうさん「レイアウトとか見たことないくらい変わったやつにしたいなぁ」
お客さんがどこをクリックしていいかわからないようなデザインになってしまっては本末転倒だ。

 

看板画像
  ・キャッチフレーズを載せる(コツ24参照)
  ・商品に関連する写真やイラストを載せることで直感的に何を売っているかわかりやすい
  上部ナビゲーション
  ・基本情報
  注文方法、決済/配送、買い物かご、よくあるお問い合わせ、店舗紹介(コツ23参照)
  ・主要カテゴリ
  来店客の属性(メンズ、レディース、キッズ)で分けるなど大きな分類
  ・おすすめの商品や特集ページ
  ページ左のナビゲーション(レフトナビ)
  ・検索ボックス
  ・ユーザーの「購入動機別」のリンク(コツ27参照)
  ・細かい商品カテゴリ
  ・商品が少ない店ならなくても可
  ページ下部(フッター)
  ・決済配送と店舗情報の要約
  エンタメゴルフショップ ENJOYGOLF http://www.rakuten.co.jp/henkaq/
基本的なページレイアウト

こんにちは、著者の川村トモエです。

マンガで納得! インターネット販売 売れるネットショップ開業・運営』は、ネットショップ運営に役立つ、52のコツが全て読みやすいマンガになっている書籍です。

キャッチコピーのコツや、運営で困った時のためのコツ、扱う商材別の成長パターンなどや、役立つコラムまで、今すぐ無料で立ち読みができますよ。

この記事をシェアしてほしいタヌ!

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

「サムソナイト」「グレゴリー」のEC改善事例。CVR改善+購入完了率が最大45%増の成果をあげたアプローチとは 11月12日 7:00 スマホゲーム「モンスト」ファンがお得にアイテムを購入できる「モンストWebショップ」はなぜ「Amazon Pay」を選んだのか。導入効果+UI/UX向上に向けた取り組みを聞いた 10月30日 7:00 アンドエスティが「3Dセキュア2.0」の超効率的運用に成功したワケ。オーソリ承認率大幅改善、売上アップにつながった不正対策アプローチとは? 10月28日 7:00 EC業界で市場価値を最大化する――「全体を見渡せる人材」になるためのキャリア設計 10月27日 7:00 転売ヤーが引き起こすEC市場の混乱に立ち向かう! Shopifyパートナー・フラッグシップが提案する最新対策 9月29日 8:00 14か月で累計売上30億円超え。 韓国のネイルブランド「ohora」の急成長を支えたEC戦略とは 9月22日 8:00 生成AI検索が変える消費者の購買行動。UGC活用でサイト流入を最大化する 9月10日 8:00 ほしい商品が見つからないイライラを解消し、CVRを向上! 検索機能強化と顧客満足度アップを実現するBtoB-ECサイト改善のポイントとは? 9月9日 7:00 B向けEC担当者必見。BtoBビジネスを成功に導くサイト内検索の最適化戦略 9月3日 8:00 クリック率3倍、セッション数2.3倍を実現したECサイトの取り組みとは? リアル店舗のような“ワクワク感”を再現するPLAZAの事例 9月2日 7:00