【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

「javascript」を有効に利用したサイトの事例

  • 2011.08.17
  • 2019.06.21
  • 技術
「javascript」を有効に利用したサイトの事例

■はじめに

スマートフォンサイトって?今あらためて考えてみる」にもあるように、javascriptの利用は、PCと比べて小さいスマートフォンの画面で、たくさんの情報を効率良く見せるのに最適です。

今回は、javascriptを有効に利用したサイトの事例を紹介します。

■AKB48 Official Shop( http://festa.tv/q?i=akb48/index&v1=smt_top_sp )

「AKB48 Official Shop」は、javascriptを利用することにより、従来型携帯電話向けのサイトでは、実現できないインターフェースになっていて、画面の遷移を少なくしたり、動きのあるリッチなページを実現しています。

下図をご覧ください。
商品カテゴリーをタップすると、同一ページ内に商品カテゴリが表示されます。

javascriptを利用することにより、ユーザの画面遷移を減らすことができ、快適なWEB閲覧が可能になります。

また、商品ページでは下図のように、折りたたみコンテンツ表示をすることによって、シンプルな商品ページを実現しています。

また、下図のように、TOPページ上部の商品画像をタップすると、中央に大きめの商品画像が表示され、その画像をタップすると商品ページへ遷移する。
デザインも優れていると思います。

■まとめ

今回の事例のように、javascriptを利用することにより、デザインが優れていて、かつ使い勝手のよいサイト作成が可能になります。

「aiship」でも今回の事例のようなサイトのユーザーインタフェースの実現が可能です。

しかしながら、javascriptの知識が必要になるので、若干ハードルが高いと感じられている方も多いのではないでしょうか。

「aiship」では、ユーザー様が簡単にスマートフォンらしいユーザーインターフェースを利用できるように、HTML テンプレートを用意しています。

例えば、aishipのサイト作成画面で、HTMLソース内に以下を挿入するだけで、簡単に今回の事例のような「折りたたみコンテンツ表示」が可能になります。

 <div class="sp-toggle">ここをクリック</div>
<div>コンテンツを記述します</div>

sp-toggle および .sp-slideToggle を追加することで折りたたみ表示ができます。
.sp-toggle は即座に表示され、.sp-slideToggle はスライドして表示されます。
上記のクラス名が追加された兄弟要素が表示/非表示できるようになります。

このように、スタイルシートで使用するクラス名を指定するだけで、システム側で用意したスクリプトを利用することが可能となります。
なのでユーザー様はスクリプトを意識する必要がありません。

ぜひ一度、お試しいただければと思います。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+