コンバージョンしたい
スマートフォンサイトではたいていの場合、フローティングボックスは右側に配置されています。これは一説によると、文章の左頭が欠けて読みにくくなるのを防止している、という見解もあります。
ですが、僕個人としては利き腕側にボタンへのアクティブレンジがあった方が押しやすくていいのではないかとふと思ったりもします。
この記事を参考にしつつ、ABテストを行ってくださったりしていただけると面白いかもしれません。
利き腕側にボタンがあるのが押しやすくて良いのか、それとも利き手と逆にあった方が目に留まってインパクトを得ることが出来るので有効なのか、はたまた、右側に固定にしておいた方が、コンテンツの可読性を妨害することなくてユーザビリティが良いのか。これは議論の余地がだいぶありますが、結局はプランナーやディレクター、もしくはクライアントの好みだったりすることが多いのかもしれません。
実際このサイトに「右利きでスクロールすると右下に配置」「左利きで画面スクロールすると左下に配置」するのをJavaScriptで分岐してみました。どちらが使いやすいですかね？？ちなみにAmazonアプリは右側固定です。
スマートフォンで実際にやって確かめてみてください。一応ソースを置いておきます。無料でお好きに使っていただいて大丈夫です。ご連絡も不要です。
デベロッパーツールのスマホシミュレーターでも出来るので確認してみてください。デベロッパーツールについてはGoogle Chromeデベロッパーツールのショートカットおススメ10選を参考にしてみてください。
ソース
<div id="floating-box">コンバージョンしたい</div>@media screen and (min-width: 801px){
#floating-box {
display: none;
}
}
@media screen and (max-width: 800px){
#floating-box {
display: block;
position: fixed;
background: red;
color: white;
z-index: 100;
bottom: 80px;
right: 4.5%;
}
#floating-box.js-right {
right: 4.5%;
}
#floating-box.js-left {
left: 4.5%;
right: auto;
}
}
// フローティングボックスの要素を取得する
const floatingBox = document.querySelector('#floating-box');
// touchstartイベントで指の位置を取得し、フローティングボックスの位置を調整する
window.addEventListener('touchstart', (event) => {
// 最初のタッチポイントを取得する
const touch = event.touches[0];
// 指の位置を取得する
const x = touch.pageX;
const y = touch.pageY;
// 手の位置を判定する
const isRight = x > window.innerWidth / 2;
const isLeft = x < window.innerWidth / 2;
// フローティングボックスの位置を調整する
if (isRight) {
floatingBox.classList.add('js-right');
floatingBox.classList.remove('js-left');
} else if (isLeft) {
floatingBox.classList.add('js-left');
floatingBox.classList.remove('js-right');
}
});
