またワイヤーフレームのお話 ~大手通販サイト比較編~

Web制作 山本圭介

真・New Shineの山本です。
文字通り、マインスイーパー界の”新たな光”となるべく、日々頑張っております。

またワイヤーフレーム(以下WF)のお話です。
そろそろWFって言いたいだけちゃうんかと思われ気味ですかね。

今回は、みんなも知ってるおっきい買い物サイトの構造を、素人目線で見てみます。

用意するモノ

● 大手通販サイト ×2
これがなくちゃ始まりませんよね。
具体的には、Amazon楽天市場を題材にしたいと思います。

● WF      ×2
今回は先ほどのサイトを骨組み(WF)に変換しちゃいます。
それを見ながら構造を比較していきましょう。

● 前回の記事  ×1
見てください。いいね!もしてください。
セルフいいね!はしました。

● 寛大な心   ×2 or 3
どんな過程・結果が目に飛び込んできても、
決して心を乱さないでください。荒げないでください。
仏の顔も三度まで、三度目の正直って言いますよね。
仏陀のようなマインドを準備しましょう。

さあ、次のページから始まりますよ。
準備はいいですか。

僕は資料の準備ができていない状況で今この記事を書いています。

骨にする

まずは与えられたサイトを骨(WF)の状態にしたいと思います。

※左がAmazon、右が楽天市場です

amazonrakuten
Before

Amazonの右側、Flash動いてないけどまあいいか。

amazonwf2rakutenwf4
After

うわ!汚い!
これは仏の顔がひとつ減っても文句言われへんわ!

まあそれは置いといて、ここで見てほしいのは「最近チェックした商品」です。
「扇風機」と「水」ですね。

もうおわかりですよね?(おかわりじゃないよ!)

『夏』が来たんですよ。

『NATSU』 が…。

前回同様、どこまで詳しく書いていいものか悩みました。
Amazonを書き終えた時点ではスッカスカだったので、少し書き足し、
その反省を生かして楽天に挑んだため、書き方に一貫性がありません。
しかも楽天の前半の密度がとんでもない。

比較だって言ってるのに同条件で用意できないとか、
一流マインスイーパーに有るまじき行為ですね。

さて、きったない骨に変換したところで、
次からは拡大して見ていきたいと思います。

拡大してみる

amazonwf4
~~~~~~~~~ 中略 ~~~~~~~~~
amazonwf5

こっちがAmazon

rakutenwf6

こっちが楽天市場

色分けして囲んであるのは、以下の要素の配置を比較するためです。

青: 検索スペース
赤: 商品カテゴリ欄
緑: 買い物カゴやお気に入りなど
水: アカウントの登録・ログイン
紫: 最近チェックした商品

楽天の紫が少しおかしいのは、
WFを書いていた段階では何も商品をチェックしていなかったので、
最近チェックした商品が表示されていなかったためです。

ほんと、救いようがないですね。
でもこんなことで仏の顔を使っていては、この先もちませんよ。

パッと見たところ、検索スペース商品カテゴリ欄は配置が似ています。

似ていますね。じゃあ次です。

 

今、「考察とかないのかな」って思いましたよね?
じゃあ一応考察してみます。

検索・カテゴリについて比較しちゃう

検索するというアクションは、広告をクリックするなどの突発的なアクションとは違って、
ハッキリと目的意識を持って行われます。

つまり、「検索したい」と思った時に
「どこだどこだ」と探し回らなければいけないようでは、
ストレスが溜まって仕方ないですよね。

ならばAmazon・楽天のような配置だと迷わないのか、ということについてですが、
これはWebサイトが「F字構造」となっていることに関連していると思われます。

簡単に言うと、Webサイトを開いたとき、だいたいの人の視線はF字に動くよ
ってことです。

f
こんな感じで見ちゃうらしい。

これを見てもわかる通り、検索と商品カテゴリ欄をガッツリ通っています。
ファーストビューでもあるこの画面を毎回F字で見ていれば、
どこから検索できるのかなんて刷り込まれちゃいますよね。

もう少し言うと、ただ見てほしいものをF字に配置すれば良いのではなく、
F字に見てもらって何に誘導したいのか、ということが大切。

ハッキリと「扇風機が欲しい」と思ってる人は、
「扇風機」というワードから検索をすればいいですよね。

「iPhoneの充電器」が欲しいけど、ちょっと検索ワードを決めづらいなー
という人は商品カテゴリから徐々に絞り込んでいけばいい。

特に何も探してないけど良い商品ないかしら
という人が最終的にオススメ商品や広告に誘導される、
といった形で、順番に誘導されるようになっています。たぶん。

どうでしょう。考察っぽくなったでしょうか。

じゃあ次いきます。

アカウント関連項目についての比較

続いて、買い物カゴやお気に入りアカウントの登録・ログインについてです。

amazonwf4rakutenwf6
おさらい。

Amazonはアカウント関連のスペースはひとまとめにしていることがわかります。

一方、楽天は、検索スぺース上部に買い物カゴやお気に入りスペース
検索スペースから広告を挟んでアカウント登録・ログインスペースがあります。

なんでかなあ…

楽天のアカウント登録・ログインスペースはわざとF字コースから外しているのかな?
一度ログインしてしまえば、その回のショッピング中はもう必要ないだろうと。
しかし、1回は絶対にログインしなければならないため、周りに広告を配置…
なんて巧妙な…
勝手な考察だけど…

考察が雑になってきましたよ。
そろそろ2つ目の仏の顔を使うときかもしれませんね。

さて、ラストは最近チェックした商品です。

扇風機欲しい

amazonwf4
~~~~~~~~~ 中略 ~~~~~~~~~
amazonwf5

Amazon

rakutenwf6
楽天市場

おさらいです。親切ですね。

さあ、最近チェックした商品ですが、
Amazonさんは中略の後、フッタの真上にきています。
と言っても、サイト自体がそんなに長くないので、気になるほど下部ではありません。

一方、楽天さん。
何か商品をチェックしたタイミングでズアッ!っと図の位置に挿入されます。

実はこの位置、ファーストビューには入りきらないんです。
ディスプレイを縦長に使ってれば入るんでしょうけど。

つまり、最近チェックした商品ってそんなに重要じゃないの?
たしかにあんまり使わないかもしれませんね。

最近チェックした商品からあなたにオススメの商品をピックアップしてくれたりするので、
特に探すモノないなーって人に最後の手段として見せたいのかな。

もはや考察じゃなくて、感想やん。

まとめ・感想

今回の感想。

Amazonはショッピングモール。
楽天市場はまさに市場って感じでした。

おそらく利用者がこんな感想を抱くような設計・デザインにしているのだと思います。
見事に術中にはまってしまいました。

でもWFにする意味あんまりなかったよね。

タイトルに「~編」とかつけちゃったからシリーズ物みたいになっちゃいました。
続くかどうかはわかりません。