2009/09/11(金)電子パーツ屋にみるネットショップデザイン
WebShopのシステム設計についての考察。比較対象は電子パーツ４大ショップ（多分）。
秋月電子
使用システムはASP。秋月は商売志向は薄利多売です。取り扱い点数は少なめで特定の商品に力を入れ、安く大量に仕入れて安く売るという特徴があります。その価格は、正規代理店経由で最小ロットを購入する価格を下回ることもあります。その他、スポット商品を扱っています。
お店の志向性は安さですので、初心者にはちょっとしきいが高め。とにかくいつでも混雑していて、店員が丁寧に対応してくれることもあまり期待できません。
webshopのインターフェイス
- シンプルなデザイン
- 右上に常に検索ボックスが表示される上が固定表示になっています。
- 通販コードによる注文も可能です。
- 上部固定ヘッダー下にカテゴリ階層が表示され、また左サイドにもカテゴリ表示が出ます。
- カテゴリは３階層。左サイドバーでカテゴリが開いていくため分かりやすい。
- 各カテゴリ内の表示は単純にリスト表示です。
商品にたどり着くフローは「カテゴリから辿る方法」と「検索による方法」の２つにしぼられています。カテゴリ内の表示はだらだらとリスト表示でとくに工夫があるわけではなく、並び順も基本的にばらばらですが*1、扱っている品数が比較的少ないためこれで問題にはなりません。*2
評価
検索やリスト表示の面で多少みつけにくい問題はあるものの、品数がさほど多くないため問題なく利用できるというこの一言に尽きます。扱っている商品数やジャンルに対して十分に扱いやすいネットショップの実装であるといえます。
千石電商
使用システムはPHP。秋月ほど安くはないものの、秋月よりはるかに多くの商品を扱っている千石。とにかく電子工作に必要なものは何でもあります。ある時期まで秋葉原では「秋月・千石で探しそれで見つからないものを他のショップで探す」というのが定番でした。
ちなみにレジ店員のクオリティの高さ（愛想のなさ）はなかなかのものです（笑）*3
webshopのインターフェイス
2009年にリニューアルしました。基本システム的にはそんなに変わってませんが、使いやすくなってます。
- シンプルなデザイン
- 秋月同様、右上に常に検索窓があります。
- 上部固定ヘッダーで、右部にもサイド表示が固定されています。
- その他、商品コードや、条件を絞り込んだ商品検索の画面もあります。
- 個別商品を大きな写真で表示させる画面が基本ですが、リスト風の表示にもできます。
秋月同様、フローは「カテゴリから辿る方法」と「検索による方法」の２つにしぼられています。非常に細かく商品が分類されており、目的の商品カテゴリにたどり着くのは簡単です。表示を切り替えると秋月の標準表示のように、多数の部品を俯瞰することもできます。
評価
カテゴリ内の表示はだらだらとリスト表示出てきて、これはやや見づらく探しにくいのが問題です。例えばコンデンサでは、容量ごとに画像を出さずコンデンサの種類ごとに容量別で表示してほしいものです。
それ以外は大量の商品がある割に綺麗に階層分類されており、扱いやすくなっています。扱っている商品数を整然とならべた混乱のないネットショップの実装であるといえます。
マルツ電波
使用システムはPHP。パーツのコンビニを標榜するマルツ。店員の対応は丁寧らしいです。秋葉原店は広くありませんが結構な商品を扱っています。全国にお店があるのが強みですね。天井近くまである前面小箱に部品がたくさん納められており、１つ１つにバーコードが付いています。最初、秋葉原らしからぬ、POSによる在庫管理というのはちとびっくりでした。*4
値段は一部除き高め（比較対象は千石）。最近はオペアンプに力を入れており、やっと色分けができてきたのかなという感じ。千石と似た志向性では価格で勝らない限り必ず埋没する。
webshopのインターフェイス
- 結構派手なデザイン
- トップページを見ると、カテゴリから探す方法のほか、分離からメーカーまで指定して絞り込む方法、商品名やメーカー名、フリーワード、メーカー名５０音など多くの方法で商品を探すことができる。
- カテゴリ画面では左サイドに常に検索窓があり、その下にカテゴリ表示が出る。
- さらに詳細カテゴリの中からターゲットカテゴリを見るものの「定格表」「商品名と写真」アイコンばかりが目立ってしまい、ターゲットカテゴリが探しにくい。
- ページのレスポンスが遅い。詳細画面では商品抽出と表示が遅く（約１秒。Webページの快適な表示は0.2～0.3秒程度）、カテゴリ画面ではサーバレスポンスは悪くないものの出力HTMLの構造が悪くレンダリングが重いため。
問題点
評価が長くなりそうなので分けました。
- 目的の商品にたどり着くためのフローが多いため、ユーザーにどれを使わせたいのかよく分からない。昔、なんでも設定できるようなシステムを作ったことがありますが、機能を増やすのは製作者の自己満足で誰も使いませんでした。ユーザーは本当に必要な機能がきちんと提供されている方が嬉しい。
- フリーワード検索がGoogleに飛ばされるため使いくい。この手の「検索はGoogle」は印象としても非常にしょぼく感じます。
- メーカーからの検索に力を入れている理由がよくわからない。大多数のユーザーはいきなりメーカーから検索することはあまりないはず。
- 目的カテゴリに到達したあとのDigikey風のテーブル表示が、テーブルサイズを限定する細工をしているため結果的に全く使えない。
評価
とにかく比較すると突っ込みどころが満載です。レスポンスが悪いのが致命傷か。実際問題、千石でまず商品を探します。
共立エレショップ
使用システムはASP。店舗は行ったことがないので省略。
webshopのインターフェイス
- シンプルすぎず、それでいて見易さに力点の置かれた実用性。
- 上部ヘッダへの検索窓+プルダウンでのオプション選択。
- サイドバーのカテゴリ階層表示。
- 階層表示が上のどれよりも見やすい。
- 商品表示も分かりやすい。
- サイドバーの商品検索はいまいち分かりにくい。*5
評価
実用性を優先するとどうしても簡素になりがちな表示を適当に綺麗にデザインされており、４サイト中１番よく出来ています。使いやすさと分かりやすさに苦心して作られており、千石の通販ページリニューアルはここを意識して作られたようです。
考察
PCパーツショップでも同じことができますね。店の数多くて大変そうですが。検索やセキュリィティについては（表向きだけでは分からないところもあり）今回は省略しました。
分かりやすいサイトの基本は画面上に多くの情報を出すことではなくて、いかに余計な情報を削除するかにかかっています。Digikeyなんかは個人的に最も優れたインターフェイスだと思いますが明らかに玄人向け。分かりやすくするには、Digikey的な考えのほかに初心者向けにどうするかという考えが必要になります。
共立1度しか使ったことなかったんですけど、かなり使いやすそうですね。一部レスポンスが悪いページもありましたが、今度またみてみるかなあとか思いました。みんなは通販どこを使ってるんだろ。