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

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

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

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

スマートフォンのキーボードを最適化してフォーム入力の手間を激減する方法

スマートフォンのキーボードを最適化してフォーム入力の手間を激減する方法

スマートフォンサイトで商品を購入する際に、郵便番号やメールアドレス、住所などをフォームに入力します。例えば郵便番号を入力しないといけない時にきちんと郵便番号用のキーボードになってない事が多くて、特段気にはなりませんが少しストレスを感じてしまいます。

モバイルユーザーは画面遷移や入力の手間を嫌い、できるだけ早く目的にたどり着きたいと考えているので、今回はそんなストレスを解消する「ソフトウェアキーボードの最適化の方法」をご紹介します。

inputタグのtype属性で切り替える

方法は至って簡単で、inputタグのtype属性を使って切り替えることができます。
サンプルサイトはコチラ。
formsampleQR_Code
以下のキャプチャは左側が英語キーボード、右側が日本語キーボードを表示しています。

普通のテキスト
<input type="text" />


数字
<input type="number" />


どちらのキーボードもデフォルトで数値入力になっています。

検索
<input type="search" />


右下がそれぞれ「Search」「検索」に変化しました。

電話番号
<input type="tel" />


こちらは数字しか入力が出来なくなっています。

URL入力
<input type="url" />


英語キーボードでは「.」「/」「.com」が、日本語キーボードでもアルファベット入力がデフォルトになっています。

メールアドレス入力
<input type="email" />


英語キーボードでは「space」「@」「.」で表示されています。(日本語キーボードでは何故かうまくいきませんでした…)

ざっとご紹介すると以上になります。

探してみると他にも「password(パスワードを●●で表示)」や「date(日付入力)」など様々な入力方法を指定することができるので、お試し下さい。

ちなみに、「text」などはもともとHTML4.0より用意されていましたが、「url」や「tel」などはHTML5から追加されています。

参考:HTML5タグリファレンス|フォームを構成する様々な入力部品を作成する

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