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

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

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

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

スマートフォンサイト作成時に気をつけること(select編)

  • 2012.05.18
  • 2012.05.17
  • 技術
スマートフォンサイト作成時に気をつけること(select編)

スマートフォンサイト作成時に気をつけることはいろいろあるのですが今回はセレクトボックス(select)についてです。スマホサイトを作成する際にはPCとも従来型携帯電話とも違う「タップ」「フリック」などの操作を意識する必要があります。「タップをし易く」というところでボタンやリンクを大きくするというのはもはや常識となっています。

ボタンをいつもより大きめに作ったりリンクをブロック要素に変更したりといったことはどのノウハウ集にも書いてあり簡単に導入が可能です。ところが、このセレクトボックス(select)の場合はちょっとだけ注意が必要となります。

セレクトボックス(select)はスマートフォンではタップすることで選択肢一覧がポップアップのように表示されて選択することができるようになっています。選択肢を選択する際にはスマホのブラウザ側でタップしやすいようにしてくれているのですが、最初のセレクトボックス(select)をタップする部分はサイト作成者のレイアウトに依存します。

必要なのはセレクトボックス(select)を大きくタップし易くすることです。これを実現するのには2つあります。1つは文字を大きくする。2つ目は文字以外を大きくするです。この際に気をつけなればならないのは1つ目の「文字を大きくする」です。実は Android2.1 以前の端末では文字だけ大きくなってセレクトボックス(select)の『枠』は大きくなってくれません。その為文字がはみ出すということになってしまいます。

なのでセレクトボックス(select)を大きくタップし易くするためには「文字以外を大きくする」ことで対応しましょう。では具体的にどのように文字以外を大きくするのか。ここは単純にセレクトボックス(select)の高さを指定します。高さは44pxがタップし易いといった説があります。セレクトボックス(select)の高さを44pxくらいに設定しましょう。

実は、この場合も気をつけることがあります。セレクトボックス(select)の高さの指定は Android2.1 以下の端末では無効となります。従って大きくすることができません。文字を大きくしてしまえば文字がはみ出て不自然なので、残念ながら Andorid2.1 以下の機種ではセレクトボックス(select)を大きくすることは諦めます。今後発売される Andorid 端末は4.0が主流になるので(2012年5月現在)下位機種は切り捨ててもそれほど影響がありません。

余談ですが、セレクトボックス(select)の高さの指定は Android, iOS, ie, Chrome などそれぞれのブラウザで挙動が微妙に異なります。スマホ対応だけであれば height 指定だけで構いませんが、クロスブラウザを意識した場合はline-height も同時に指定しておくとよいかもしれません。

( スマートフォン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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+