第31回「ネットショッピングサイト構築の注意点とその事例」
更新日：
こんにちは。森川です。
当社は、以前から楽天、Yahooなどのショッピングモールのサイト構築およびシステムによる運営サポートを行っていますが、実はいろいろやっているサービス中でも一番長くやっているかもしれません。
今回は、ネットショッピングモールのサイト構築およびサイト運営について書いてみたいと思います。
ネットショッピングモールとは
ネットショッピングサイトや会員制サイトを運営するのに、一番難しいことは集客です。
いくら良いものを販売しても、すばらしいサービスを提供してもお客さんが来てくれなければどうしようもない。
ネットショッピングや会員制サイトの一番大変なところは構築するところではなくて、どうやってお客さんを集めて、どのように普及させていくかです。
例えば、「食べログ」のような皆さんがよく使っているサービスはどのように普及したかというと、全国に代理店を設置して営業活動を展開して普及させています。
一つのサービスを全国区にしようと思うとそれぐらいお金と時間がかかり、簡単なものではないのです。
サイトを作っておいておいたら勝手にお客が増えたなんてことはありえないです。
ネットショッピングサイトに話を戻すと、この集客の問題を解決してくれるサービスがあります。
それがAmazonや楽天やYahooのようなネットショッピングモールと呼ばれるものです。
自分に問ってみてください。
商品を購入するときに一番初めに見るサイトはどこですか？？
楽天のモールに出店しているショッピングサイトと個人で運営しているショッピングサイトはどちらが信頼できますか？？安心して購入できますか？？ポイントが溜まったりとお得ですか？？
答えは明白でしょう。
我々にくるご相談
2018年11月現在、日本の3大ショッピングモールと言えば、「Amazon」、「楽天」、「Yahoo」です。
この中でAmazonだけはちょっと形態が異なっています。
楽天とYahooはモール内に自分達のショップを作成してその中で商品を販売しますが、Amazonにはショップ自体がないです。単純に商品を登録するだけです。
ネットショップを運営される多くの方はこの3モールは利用するのではないでしょうか。
そのような背景もあり、Amazon、楽天、Yahooへの出店や運営についてのご相談を受けることは多いです。
我々にどのような相談がくるかと言うと、
1.楽天やYahooへのショッピングサイト構築
楽天やYahooはWEBサイト構築に詳しくない人のために簡単にサイトを作れるような仕組みを準備しています。
しかし、それでは物足りないからデザインのしっかりしたサイトを構築してほしいという相談を受けます。
2.在庫管理の一元化
ショッピングモールで販売している会社さんは、おおよそAmazon、楽天、Yahooの3つすべてで販売しているところが多いです。
そうなってくると3モールのシステムが連携しているわけはないので、在庫管理などで問題がでてきます
誰もがモールをまたいで在庫を一元管理したいと思うはずです。
3.業務の効率化
これらの販売サイトの受注管理画面は万人が使えるように使いやすいGUIで操作します。
販売数が少ないうちは問題ないのですが、多くなってくるとGUIでいちいち操作すると時間がかかってしょうがないことになります。
誰もが業務を効率化したいと思うはずです。
※GUI
マウスでクリックしてグラフィカルに操作する操作方法です。
このようにいろいろなご相談をいただくのですが、今回は1の「楽天やYahooへのショッピングサイト構築」の話にしぼって、その特徴と制作事例をのせたいと思います。
上記で書いたように楽天やYahooのモールでは、サイト制作に詳しくない人のためにGUIで簡単にサイトを構築できるページ制作ツールが準備されています。
しかし、この簡易制作ツールを使うとHTML4時代のテーブルレイアウトで構築されたり、使用できない禁止タグがあったり、Javascriptが使えなかったりと自由度が低いことが足枷となります。
特に我々のような比較的ページ制作を熟知している人にとっては、これが窮屈でなんとかならないのかなと思ってしまいます。
そのようなニーズに応えるために、楽天市場には、「楽天GOLD」、Yahooストアには「Yahooトリプル」と言ったサービスが用意されています。
これらのサービスを使うと我々が日常の仕事で行っているようなHTMLをコーディングしてFTPでアップロードして公開という流れで制作できるようになります。
デザイン力の高いショップにはおおよそこのサービスが使われています。
しかし、簡易制作ツールと比較して、Javascriptが動いたりと比較的自由度は高いですが、制限が全くなくなったというわけではありません。
できないことは何を知っておかないとデザインはしたけど実際やってみると実装できなかったという事態になります。
サーバーサイトスクリプトは仕様できない
WordPressもそうなっているように通常のサイト制作では、ヘッダーやフッターやサイドナビなどの全ページで共通で使われるパーツは、phpなどサーバーサイトスクリプトを使って共通化します。
楽天GOLDやYahooトリプルは、サーバーサイドスクリプトが使用できません。
ショッピングサイトのような比較的形式化しているサイトでこれが使えないとなると非常に痛いです。
ではどうするかというと「iframe」ですよね。
普通に考えればそうなると思う。
例えばheader.htmlやfooter.htmlのように各パーツごとのhtmlファイルを作成して親ページからiframeで読み込ませます。
しかし、このiframeがデザインに制限を作ってしまうのです。
通常ヘッダーの中にはグローバルナビがありますが、グローバルナビにマウスをのせるとプルダウンでメニューが表示されるレイアウトよく見かけると思います。
ヘッダーをheader.htmlにパーツ化するとプルダウンメニューもheader.html内で展開されてしまいます。
どうなるかというと、header.htmlを読み込むiframeの大きさを十分にとっておかないと、途中で切れて全部表示されないです。
iframeの大きさをはみ出るようになるとはみ出た部分は表示されません（以下は楽天、Yahooのサイトではありません）。
Javascriptでこねくり回せばなんとかなりそうな気がしますが、楽天GOLDは各パーツ間（htmlファイル）をまたいでJavascriptで操作できないようになっています。
楽天GOLDを使えば、Javascriptが使えるようになるので、動的なサイトを作ることができます。
しかし、上記が代表的な例ですが、楽天GOLDではframeをまたいでJavascriptで別のhtmlファイルを操作できないので注意が必要です。
ヘッダーのところにマウスをのせるとコンテンツ部分に何か変化が起こるような仕組みは難しいです。
結構普通にぶつかる問題ですのでご注意を。
では最後に、ずいぶん前の仕事ですが制作事例です。
以上