スマートフォン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（アイシップ）』　松井　）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン＆モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/1557
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝