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

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

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

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

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

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

aishipご利用ショップ様を、aiship導入事例ページでご紹介させて頂いています。

スマートフォンから商品購入ページをご覧頂くとページの上部に買い物かごに入れるボタンが付いていて、下までスクロールしてもついてくる…
こちらはaishipではCSSとjavascriptを使って実現しています。

最近の携帯電話向けサイトをご覧いただくとよく解りますが、いずれのページも商品の説明文が細かく紹介されており、ページ全体の長さも縦に長い、というページが多いです。
特にランディングページ(LP)ではこの傾向が顕著に表れています。

携帯電話ではカーソルキーを使ったページスクロールになるため、買い物かごのある場所に一気に飛べるリンクを商品説明の間に挟んでおくことが、ユーザビリティ上、また制約率を高める上でも重要なポイントになりました。
ところがスマートフォンの場合、指でタッチしてさっとスクロールするとしばらくは惰性で画面が動き続けます。なのでページの一番下に購入ボタンがあったとしてもすぐにその場所に移動することが可能です。

でも、そうして移動させる手間を省いてあげるとどうでしょう。
商品説明をきちんと読みこんで納得した上で購入したいというニーズはモバイルユーザにもあると言われています。
ですが長い説明文を、全て読む前に購入を決意する人もいれば全て読んだ上で購入を決意する人もいるでしょう。もちろん衝動的に購入する人だっているでしょう。

どこまでページを見たか、に関わらずいつだって商品をカートに入れることができればページスクロールの手間もなく、購入がより簡単になります。

少し前置きが長くなりました。
ではaishipではどのようにこれを実現するのか?をご紹介します。

先ほどjavascriptとCSSで実現している、とご紹介しましたが既にjavascriptとCSSはaiship内に登録済みです。あとは買い物かごに入れるボタンにclass名を指定することで
すぐに動かすことが可能です!

実際はモバイルサイト作成画面で操作をします。
aishipでは商品購入ページのテンプレートをご用意しています。そこには<機能カード>と呼ばれるものがあり、これをページ内に配置することでテンプレートを形成しています。
※機能カードについて、詳しくはマニュアルなども見て下さいね!

商品をカートに入れるボタンを表示させる機能カードはこちらです。

これをテンプレートのHTML側から見るとこんな具合です。

これにaiship指定のclass名を設定してあげるのですが、機能カードには直接class名を指定することができません。
なので、まずはdivタグで機能カードを囲んで

そのdivタグにclassを指定します。

class名は下記の通りです。(デフォルトCSSにも記載があります!)

[CSS] .sp-fixed-top

あとはデザイン画面に戻して保存すれば作業は完了です。実際に商品の購入ページに移動して動作を確認してください。

このclass指定のみでは、ボタンのデザインは特に変わりません。過去の記事もご参照頂きながら、ショップ様のデザインに合った思わず押したくなるボタンを作成してみて下さい。制約率の向上が期待できますよ!

( スマートフォンECクラウド型ASP『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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+