Yahoo!ショッピングの検索窓デザインが大きくなった

Yahoo!ショッピングの検索窓が大きくなったようです。検索にまつわる話題は最近事欠きませんが、サーチ結果が売れている順になったことで、カテゴリの絞込みをするユーザーが増えたのか、検索窓横のカテゴリ絞込みのプルダウンがやや目立つようになりました。

なお、検索ボタンをクリックした後のサーチ結果画面では、従来の検索窓が使われているようです。

余談ですが、楽天もYahoo!ショッピングもそうですが、なぜ検索窓があんなに横長なのか疑問に思うことがあります。いくら何でもそれほど長い商品名のものって・・・・・と考えるのですが、世の中にはそんな長い商品名のものもあるのかもしれませんね。あるいは検索窓の位置（存在）を分かりやすくさせるために、わざと横長に大きく取っているのかもしれません。

商品基本情報の最上部固定化とカートボタンへのアンカーリンク設置

Yahoo!ショッピングからのアナウンスにより、9月25日より全ストア共通で商品基本情報が最上部に移動し、また、ページ内のカートボタンへ移動するアンカーリンクの設置が実施されるようです。

お客様の利便性および学習機能を向上させ、購買率UPを目指します

というのが変更の理由です。

全ストア共通で一番上にカートボタン、商品基本画像、価格情報などを持ってきて、Yahoo!ショッピングを利用するお客さんに分かりやすくしよう、というのはよく分かります。Amazonみたいなスタイルでしょうか。

購買率アップを目指すのは大いに結構ですし、実際に購買率アップする可能性はあるでしょう。

しかし、この変更によって失うこともあると思います。そんなページ構成をイメージした時、ファッションジャンルや食品ジャンルなどは、お客さんが離れていかないでしょうか？（すぐ注文できる半面）説明不足でお客さんに誤解を招いたりしないでしょうか？そもそも、いきなりカートボタンと値段が表示されて、お客さんは商品を今よりも吟味してくれるでしょうか？

結果はどうなるか分かりませんが、ちょっと「思い切りすぎ」な印象を私は受けました。テスト結果を踏まえたとはいえ、そのページデザインを望まないストアさんもいるのではないでしょうか？

できれば、「商品基本情報を最上部に持ってくる方がいいですよ。一度お試し下さい。」とアドバイス的に案内するのでも良かったのではないでしょうか。それから改めてアンケート取って、意見聞いて、それで全ストア共通化するのでも遅くないと思います。

またカートボタンへのアンカーリンク設置についてですが、これは既に楽天についているやつですね。これは設置した方がいいと思います。現状で、このアンカーリンクだけ設置してくれれば良かったのに、と私は思います。

楽天ではこのアンカーリンク設置のおかげで、業務が少しやりやすくなりました。ボタン1クリックで商品名、品番、価格を確かめることができるので便利です。

先日から始まった検索結果の売れている順へのテスト変更につづき、いろいろまた動いているYahoo!ショッピング。「改善」する姿勢は大変いいのですが、「改悪」にならないことだけは強く願いたいです。

ファーストビューの縦サイズを意識してデザインする

今日はふと気づいたことをご紹介します。

何気なく、いつもアクセスしているYahoo!JAPANのトップページですが、いつの間にかYahoo!ショッピングのおすすめセレクションの位置が下に追いやられていました。

確か、半年前から1年前くらいには、自分の画面環境でも、ファーストビューでYahoo!ショッピングへのリンクが目立っていたような記憶があります。

「え？どういうこと？」と思った方は下のイメージを見てください。

画像付きで表示されるYahoo!ショッピングへのリンクがファーストビューでは表示されなくなっています。

※ファーストビューとは、そのサイトにアクセスした時に最初に目に映る画面の範囲のことです。人それぞれ画面環境が異なりますので、ファーストビューの範囲はユーザーの環境に左右されます。

このファーストビューの検証は、あくまで私の画面環境であり、2048×1152ピクセルです。

4分の３の以上の人は、縦1024以下の解像度で見ている

ある調査によれば、1024×768、1280×800、1280×1024、1366×768という解像度の環境が全体のおよそ4分の3を占めているようです。

今回は太字で表した、「タテ」の解像度がテーマになりますが、私の縦1152ピクセルでも表示されていないので、つまりほとんどの環境の人にとってYahoo!ショッピングの画像付きリンク（おすすめセレクション）が表示されていないことになります。

※ちなみに解像度シェアの調査では、全体の2％の人が1920×1200という解像度のようでした。縦1200ピクセルならちょっと映るかもしれない・・・程度ですね 笑

ファーストビューが、アクセスに影響を与える

こんな話をする理由は、私のストアの商品も（たまに）Yahoo! JAPANのトップページのおすすめセレクション経由で大きなアクセスを生むことがあるからなのですが、ファーストビューの位置に映らなくなったことが、ややアクセスの減少に影響を与えているような気がしています。

確固たる証拠は無いし、表示位置が変更された時期の記憶も曖昧なので、今回のテーマは信憑性に欠けますが、それでもファーストビューに映るのと映らないのでは影響は少なからずあると思います。

ストアデザインでも、ファーストビューに気を配る

これは、何もYahoo! JAPANに限った話ではなく、自分のストアにも同様のことが言えると思います。特にアクセスの多いトップページや人気のカテゴリページは、ファーストビューに何を見せるかが重要ですが、こういった事は結構“忘れがち”だったりします。

商品ページのファーストビューもやはり大事で、最初にアクセスしてくれたお客さんに、「おっ！ちょっと詳しく見てみよう！」と思ってもらえるようなキャッチとか魅力的な商品イメージを目に飛び込ませることが大切だと思います。

こういったファーストビューへの心遣いは、1ページ単位では骨が折れる気もしますが、チリも積もれば何とかで、そういった地道な努力が、お店全体の訪問滞在時間やブックマーク率の増加につながったりするのかもしれませんね。

外部スタイルシート(CSS)は使えない

ストアのデザインを自由に便利にカスタムしたい出店者にとって、大きな壁となるのが、Yahoo!ショッピングでは外部スタイルシート(CSS)の利用が認められていないという事実です。

スタイルシートをHTMLに適用する方法は大きく分けて3つあります。

1. style属性で要素に直接スタイルを指定する方法
2. style要素でまとめてスタイルを指定する方法
3. link要素、@importで外部スタイルシートを読み込む方法

Yahoo!ショッピングで許されるのはこのうち1番の、style属性を直接指定する方法のみです。

楽天市場の場合、GOLDなども含めると上記すべての方法が利用可能です。GOLDでなくても、1番と2番の方法が使えます。比較するとYahoo!ショッピングはいちいちstyle属性を指定する必要があり、面倒・・・だけならまだいいのですが、作りこんだコンテンツページとなると文字数の制限からいちいち指定しているstyle属性が「邪魔」だったりします。これはYahoo!ショッピングを長くやっているほどに感じる点です。

Yahoo!ショッピング的にはストア全体のデザインの統一性を保ちたかったのか、一定レベルのカスタマイズ制限を設けておきたかったのか、そのへんの真相は定かではありませんが、webデザイナーのような方には結構面倒で融通のきかないモールに感じられるかもしれません。

まあ楽天との比較ではそういう感想になるのですが、じゃあAmazonはどうなるんだ？ってなりますので・・・この話はこの辺で。

視覚的、簡単にデザイン構築できる

Yahoo!ショッピングのデザイン設定についてです。

2007年11月30日のYahoo!ショッピング完全リニューアルにより、ストア出店者にとって（特にネットショップ初心者の方にとって）大変分かりやすいものに改良されました。その中でもストアデザインを視覚的に分かりやすく簡単にデザインできるようになったのが大きなセールスポイントではないかと思います。

ストアデザインを設定する画面では、共通設定として「ヘッダー」「サイドナビ」「フッター」、ページレイアウトとして「トップページ」「カテゴリページ」「商品ページ」「カスタムページ」を変更できますが、その変更スタイルがドラグ＆ドロップで視覚的にカスタマイズが可能となっています。Yahoo!ショッピングでは残念ながらJavaScriptやスタイルシートの外部読み込みなどはできませんが、通常のHTMLとスタイルシートは「フリースペース」という項目で使用可能です。上記の共通設定項目やページレイアウトのすべてで「フリースペース」が１個以上容易されているので、デザインの自由度は大きいと思います。

初心者の方やHTMLが分からない方でも、Yahoo!ショッピングのデザイン設定を使えば各必要事項にお店の情報を盛り込んでいくだけでそれなりのデザインが整ったストアが作れるのも魅力の一つです。たとえば「サイドナビ」の設定項目を例に挙げると、自由に編集可能な「フリースペース」が３つ付いている他、「ストア内検索」「人気ランキング」「おすすめ商品」「店長紹介」「カレンダー」「ストアサービス」「ＱＲコード」「トピックス」「ストア内商品カテゴリ」「カスタムページ表示」を表示・非表示を選択でき、並び替えもできます。これが視覚的にドラグ＆ドロップでできてしまうのでネットショップ初心者の方にも好評というわけです。

さらに便利だと感じるのは商品ページやカテゴリページなどのテンプレート設定（パターン設定）をいくつか作れること。これが大きいです。商品ページやカテゴリページの見せ方がすべて同じだとつまらなくなってしまいますが、いくつかパターンを用意しておくことで、「飽きさせない」ストア構築が可能です。ちなみに私はカテゴリページのテンプレートは３つ、商品ページのテンプレートも３つ用意して、扱う商材によってテンプレートを使い分けています。

デザイン設定が簡単で自由度の高い点は初心者の方に特におすすめしたいポイントですね。