通販の魅力の１つは「お店まで買いに行かなくてもいいこと」だと思います。そしてそう考えるとECサイトも簡単に購入できることというのはかなり魅力的なことではないでしょうか。

スマートフォンでスクロールせずに購入できるというのは結構魅力的なもので、position:fixedを使った購入ボタンの実装されたサイトは個人的にかなり好きだったりします。

というわけでそんな購入ボタンを持つサイトを紹介しつつ、簡単に実装サンプルを作ってみました。

サイト名	Peatix
URL	http://peatix.com/?lang=ja
QRコード

３つのポイント

１：手札を眺めるような感覚の画面スクロール

これはモバイルアプリでの画面ですが、ページをスクロールするのではなく「カードをずらす」という動きになっています。

カードを一枚ずつ眺めていく様な感覚で動かすことができるため、スクロールに対する抵抗が少なくなっています。

２：スクロール無しで購入ができるボタン表示

Web版では画像のようにスクロール無しでカートボタンが常に表示されています。

カートボタンを探さずとも気に入ったタイミングですぐ購入ができるため、衝動買いがしやすい仕掛けとも思えます。

また、購入画面でも「枚数を入力→決済方法が表示される」という流れのため「次に何をすべきか」がとてもわかりやすいくなっています。

３：購入後のチケット管理も簡単

購入が完了すると、モバイルアプリでチケットの管理を促す画面に遷移します。

アプリからスケジュールや運営側からの案内メール・特典紹介などをプッシュ通知で行えるため、アプリダウンロードへの自然な動線作りができているように思えます。

aishipRで実装する

せっかくなので、aishipRのformタグに合わせてCSSだけで再現させてみました。

CSSコードサンプル

タブレットやPCサイズのブラウザでもそのまま使ってしまうと、少し間延びした印象が出てしまうと思います。

なのでレスポンシブに運用される場合は、mediaqueryでタブレット・PC幅の表示を調整しつつ使用してください。

#sysNumber {
    position: fixed;
    bottom: 0;
    width: 50%;
    background: #ddd;
    padding: 5px;
    height: 50px;
    text-align: center;
}
#sysNumber .sysNumArea {
    display: none;
}
#sysNumber select {
    padding: 10px;
}
#sysSubmit {
    position: fixed;
    bottom: 0;
    width: 50%;
    right: 0;
    height: 50px
}

#sysSubmit input {
    display: block;
    width: 100%;
    background-color: #53C354;
    color: #fff;
    padding: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    border: 0;
    height: 50px;
}