楽天のページはなんで、縦に長いの?

普段どこのECサイトで買ってますか?

普段どこのECサイトで買ってますか?と聞かれると、多分、多くの人がAmazonと言うと思います。

若い人とかでは、楽天を使ってるは、あまり聞きませんからね…。

楽天を使わない理由として、Amazonより、ページが長く見にくいということがあると思います。

なんで、楽天のページは、あんなに縦に長いの?とよく聞かれます

私の予測で書かせていただきますが…

楽天には、楽天大学というものがあり、出店者だけが通える学校があります。

楽天大学に通った時に誰かが、「商品ページにはストーリーが重要です!物語です!!」と熱弁していました。

だから、「商品ページにストーリーが大事だから、ページ長くなってもいいから、いっぱい語らないと!!」と思うようになったんだと思います。実際、この私も、その人の本読んで、いっぱい書かないと思い、当時ページを作ってました。

一部しか紹介できていませんが、こういうのが、俗に楽天メソッドと言われています。

楽天メソッドって何?

簡単にまとめるとこの2つが重要なポイントです

・ひとけ(いっぱいのお客さんが買っているよ!アピールの演出)

・商品を使うであろうユーザーの悩みや物語や歴史やこだわりを書いて、商品の背景にあるストーリーを描く

長いページ作成時の悩み

・RMS(楽天管理画面)の使えないタグ多すぎ

・RMS(楽天管理画面)の文字数制限オーバー

長い商品ページだと、文字数オーバーになっちゃうんだけど?

運用代行会社で働いていた時に学んだことですが、これらを解決するために、タグ壊しという技を使います。

通常の使えないタグは、こういう風に書きます

通常のタグ壊し

そして、特殊なJSやCSSを商品のページに読み込ませるには、この=””を繰り返し書きます

JSとCSSのタグ壊し

この、タグ壊しを使うことで、通常はできないスマホでのiframeも可能になります。

PCもスマホも通用する、便利な技なので、覚えていただけたら嬉しいです。

[応用編]ページが長いから、アンカーリンク貼りたいんだけど?

楽天の商品ページでは、iframeにすると、アンカーリンクができなくなります。

アンカーリンク

↑こちらのタグをRMS(iframe置いた場所と同じ場所)に貼り、iframeの中のHTMLに、通常のa hrefを、コーディングの際に指定してください

iframeは、楽天のFTP(ゴールドサーバー)に置きます

なにかとECモールは使いにくいですが、こういう技もあるんだということを頭に置いていただければ幸いです

この記事を書いた人

tsubochi

EC業界のWeb/UIデザイン歴7年程度携わってきました。高校中退後、約4年間ほど飲食店で働きながら、高卒認定を独学で勉強し、合格した後に職業訓練でパソコンの基礎とWebデザインを学びました。
EC業界のデザインを得意とし、新規ECサイト制作・ECサイトリニューアル/LP作成/バナー作成/サービスの管理画面UIデザイン/アプリUIデザイン等さまざまな経験を積んできました。これからは、経験を生かしながら、ユーザーのために面白いものや楽しいものを作っていきたいです。