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

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

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

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

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(5)~

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(5)~

前回の記事(スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(4)~)では「スマートフォンらしい動き」として折りたたみコンテンツのお話をしました。今回もスマートフォンサイトらしい動きとして「スライドコンテンツ」のお話をさせていただきます。
スライドコンテンツは、例えば画像を表示するエリアの左右に矢印が表示され、それをタッチすることで前の画像や次の画像をその場で表示させることができます。画面を遷移する必要がないので、見ている人にいちいちページを移動させたり画像をダウンロードさせたりするストレスがありません。
aishipでは、あらかじめ定められたHTMLにそって内容を作成していただくことで、スライドコンテンツを簡単に設定することができます。
さて、定められたHTMLの構成とは下記の通りです。

<div class="sp-slide">
  <span class="sp-slide-nav-left"><<</span>
  <div class="sp-slide-frame">
    <div class="sp-slide-wrap">
      <div class="sp-slide-content">コンテンツ1</div>
      <div class="sp-slide-content">コンテンツ2</div>
      <div class="sp-slide-content">コンテンツ3</div>
    </div>
  </div>
  <span class="sp-slide-nav-right">>></span>
</div>

厳密には「div class=”sp-slide-frame”」の中が固定になります。
「div class=”sp-slide-wrap”」というdivを1つ含めて、その中に「div class=”sp-slide-content”」で囲まれたコンテンツをいくつか並べます。「div class=”sp-slide-content”」で囲まれた内容が、実際のページ上でスライドされて表示されます。
上下には、左右にスライドさせるための矢印が表示されていますが、これは「div class=”sp-slide-frame”」の下部に併記しても問題ありません。
また、矢印を含むスライドコンテンツ全体を「div class=”sp-slide”」で囲む、というのもポイントです。
あらためてポイントをまとめると

この通りです。
ポイントとして、「div class=”sp-slide-frame”」には横幅と高さの指定が必須となります。

です。
指定はCSSで行います。管理画面内の下記メニューでユーザCSSに追加をして下さい。
また、スライド表示させたいコンテンツはここで指定された高さを超えないようにしておきましょう。「div class=”sp-slide-frame”」の高さを100pxとした場合、表示させたい画像が120pxだったりすると、20px分が欠けないように自動的に圧縮され、画像が荒くなってしまうことがあります。事前に気をつけておきましょう。

さて、aishipの携帯サイト作成画面で上記のHTMLソースをaiship内にコピー&ペーストしていただくと、スライドして表示されることをご確認いただけます。

左図のように表示できたでしょうか。
このままでも動作としては問題ないですが、これはちょっと味気ないですね。せっかくなので今までの記事でご案内したCSSを利用して、少し遊び心を持たせたレイアウトにしてみましょう。

今回はaishipのサンプルサイト「コスメガール」にスライドコンテンツを追加してみました。

こんな感じで遊ばせてみました。
CSSを色々と操作・編集することで更に様々なレイアウトをお楽しみいただけますよ!

まとめ
いかがでしたか? スマートフォンらしい動作の代表でもある「スライドコンテンツ」は、イチから作成するのは少し難しいですが、aishipならすぐに利用することができます。様々なポイントを集約して、スマートフォンらしいサイトの構築を頑張っていきましょう!

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+