スマホ用アンケートページを作った時のマークアップのメモ

アンケートフォームのついたキャンペーンページを作成した時に気になって調べた、マークアップ側のメモです。サイト自体はすごくシンプルな作りなのですが、少し良くする為に入れた情報をまとめてみました。

こんな感じの、アンケートを設置して、プレゼントの応募をするといったタイプのキャンペーンページです。
wire

調べたこと目次

数字を入力できるようにする。

プレゼントに応募できるように住所と名前を入力してもらう部分です。
住所入力
郵便番号の部分は最初から数字が入力できるようにしたいです。

数字を入力できるようにする方法について

type=”number”は数字を打つのに最適ですが、

patternを利用すれば数字だけのキーボードが出てきますので、type=”text”が利用できるので、こちらを利用したほうが良さそうですね。


iPhoneでボタンを押したときの色を設定

iPhoneでボタンを押したときの色をつけるCSSをいれておきます。

上のrgbはグレーな感じですが、これがベストなわけではないので、色に関しては、検討が必要です。
もちろん色はrgbじゃなくてもいけます。


フォントファミリーを考える

まずはスマホで表示できるフォントのおさらい。
iPhoneとAndroidに入っているフォントは、
  • iPhoneは、ヒラギノ角ゴ W3、ヒラギノ角ゴ W6、ヒラギノ明朝 ProN(iSO 5のみ)
  • Androidは、Droid Font ※日本産のAndroidは各メーカーオリジナルの日本語フォントが入ってる場合もあるらしい。
なので、フォントファミリーを設定すること自体があまり意味がなさそうです。

とはいえ、全く入れないというのも心配なので、PCで見られた場合などを想定して、入れておくのもよさそうです。
なお、今回利用したフォントファミリーは、

このような、別案件で利用されていたフォントファミリーを入れておきました。

iPhoneを横にした時に、文字を自動で大きくさせないCSS

iPhoneを横にした時に、文字を自動で大きくさせないCSSを入れておきます。

これをいれておくだけですが、結構大切ですね。

viewportの設定

今回はズームをさせないパターンだったので、このように書いておきました。
ユーザビリティ的には、無効化させないほうがいいだろうけど、ですね。

端末の画面幅と同じ幅を viewport の幅とする

初期ズーム倍率を1倍にする。

拡大縮小のズームを無効化する


例えば、Appleのサイトで利用している

横幅はwidth=1024です。とだけで、ズームなどに関する指定はありません。

基本デバイスに委ねるという考え方が自然な気もしますね。


以上、とりあえず、マークアップ側で気になって調べたメモでした。