ヤフースマホサイトのJQueryアコーディオン使用について

Question

いつもお世話になります。
Y!ショッピングのスマホ向けページにて、トリプルを使って「お買い物ガイド」のインフォメーションページを設置しようと思っているのですが、設置方法に関して疑問に思いましたのでご質問させていただきます。

「お買い物ガイド」は、注文時の注意点、配送や支払い等、全部で8項目の構成になっており、ページのトップにナビゲーションメニューのボタンをタテに並べて、ページ内の各セクションにリンクさせる構造にしようと思っています。

ページを作成してみたところ、ページのトップから8項目目の最後までとても長くなってしまい、とてもスマホページではそのままの状態で設置できそうにありません。

そこで、JQueryのアコーディオン機能を使って、目的の項目のみ表示させ他の項目を隠す、ということを思いつきました。
そして、いざ設置の段階になって、「ページ全体はかなりのボリュームがあるので、読み込むのに時間がかかったり、離脱したりするのでは？」と疑問に思いはじめました。

各項目にはそれぞれ、テキストの他、2枚〜6枚程度のキャプション画像(1枚50KB~100KB程度)も使ってあり、ページ全体にしますと30枚以上の画像があります。

それとも、今のスマートフォンは、そのような事はあまり気にぜずにPCサイトを同じように作っても良いものなのでしょうか。

もし、上記のやり方で問題があるようでしたら、素直に項目ごとに別ページにしてしまおうか、とも思っています。

アドバイスをよろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

スマホ向けのお買いものガイドページでも、
「お支払いについて」や「送料、お届けについて」といった項目を
アコーディオン形式で内容を隠して表示しておりますので、
同様の構造で問題ないと思います。

下記URLを一度ご確認いただけますでしょうか。

http://store.shopping.yahoo.co.jp/ショップURL/info.html

＞各項目にはそれぞれ、テキストの他、2枚〜6枚程度のキャプション画像(1枚50KB~100KB程度)も使ってあり、ページ全体にしますと30枚以上の画像があります。
単純に計算して1.5~3MB程度となりますが、
たとえば、Yahoo!ショッピングのトップページを最初に読み込みますと
ページのパーツ（主に画像ファイル）約2.5MB分のダウンロードが発生いたします。
100KBの画像が30枚程度であれば、
ページの読み込みに支障をきたすようなサイズではありません。

Answer

さっそくご回答ありがとうございました。
なるほど、規定のinfoページでも、同様に要素を隠して、一部のみ表示する方法で構成されているのですね。
安心しました。

さっそくアコーディオンの線で設置を進めていきたいと思います。
ありがとうございました。

今後ともよろしくお願いいたします。