2015年4月版 input size について

2015年04月03日UP
  • このエントリーをはてなブックマークに追加

このブログ、長いこと放置で、すごーーく更新をしていなかったのですが、
過去に書いた「input size はブラウザによる幅の違いが生まれる」という記事にそれなりの数のアクセスをいただいていることに気づき、その記事を2015年4月版にリライトします。

まずはその記事の簡単なおさらいから・・・

1、<input size=”30″>というHTMLのsizeでの指定は、
  ブラウザによって幅に違いが出る
2、CSSのwidth指定では違いがでない
3、だからCSS(もしくはstyle=”width:000px”)で書け!

ざっくり、こんな感じのお話でした。

該当記事は内容が古いもの(以前の記事は2010年9月22日の投稿・・・。5年も前・・・。)となっていますので、IE8が最新とか、firefox3とか、macでなくMacintoshと書いているとか、、、突っ込みどころ満載な記事になっていました。

これを期に書き直す、と言いますか、あなたが疑問に思っている答えを書いてみます。

ただ、主に「input size」関連のキーワードでのアクセスが多かったので、なにを求めてきてくださったのかイマイチわかりませんでした・・・。

なので、「input size」について今思いつくものをありったけ書いていきます。

単純にHTMLでinputの書き方を知りたい

「<input size=”30″ name=”〇〇〇” value=””>」
です。

size=””の数値は何を表している?

だいたい「半角文字での文字数」です。
※ 昨今のブラウザでは変わってきているので『だいたい』とつけました。

inputにsizeは必要?

絶対ではありません。
CSSで記述する場合は特に書かなくても大丈夫です。

「<input name=”〇〇〇” value=”” style=”width: 200px;”>」
こんな書き方でもOKです。

inputにsizeを書かないとどうなる?(CSSでも書かない場合)

どうにもなりません。
今のブラウザでは「size=”20″」を指定したときと同じサイズになります。

これが無いからといって送信できないということはありません。

input sizeが効かない!

おそらくCSSでも指定しているのではないでしょうか?
CSSの記述のほうが優先されます。

CSSで記述されているかがわからない・・・

該当のページを開いて、
Windowの場合は「F12」、macの場合は「option + command + U」を押してみてください。
(mac firefoxは「F12」かも・・・)

ブラウザの下か、横か、別ウィンドウで、ソースコードが表示されますので、虫眼鏡マークかポインタみたいなマークか、要素を選択できるボタンを押して、該当のinputにカーソルを合わせてください。

すると、右側に適用されているCSSが表示されます。

※ OSやブラウザによって若干違いがあります。

inputをスマホに対応したい

是非してください。
デザイン諸々はCSSで書くことをおすすめします。

inputをレスポンシブWebデザインにするには?

「<input name=”〇〇〇” value=”” style=”width: 80%;”>」
とか、widthを%値で指定すれば自動でサイズを拡大・縮小します。

※ 範囲内に収めるには親要素の幅が決める必要があります。
※ スマホではタップしづらくなるため、極力100%に近い値にすることをおすすめします。

具体的なCSSでの書き方を知りたい

■HTML
<input name=”〇〇〇” value=””>

■CSS
input{ width: 80%; }

@media screen and (max-width:568px){
input{ width: 100%; }
}

こんな感じです。

↑の書き方だと全部のinputが変わっちゃうじゃないか!

■HTML
<input name=”〇〇〇” value=”” class=”re-width”>

■CSS
input.re-width{ width: 80%; }

@media screen and (max-width:568px){
input.re-width{ width: 100%; }
}

これでどうでしょう?


このようなところでしょうか。

まぁ、昨今ではスマートフォン&タブレットという素晴らしい端末が尋常じゃないスピードで広まってきていますので、inputの横幅もCSSでの指定することは当たり前になっているかと思われます。

input size につきまして、
他にわからない点がありましたらどうにかお伝えください。
(4年ぶりにこのWordPressにログインしたらなぜだかコメントが使えなくて。。。)

あ、
おそらく、このブログの更新は、5年後になります(笑)
※ 要望が多かったら近いうちにまた書くかもしれません。

現在もサイト制作やEFO施策、Webコンサルタント的な仕事をしていますので、
このようなノウハウや技術を大量に持ちあわせています。

何か聞きたいことやご依頼がありましたら直接連絡を下さいましたら幸いです。(連絡は無償です。笑)

筆者桐山の連絡先
メール : kiriyama@ht-produce.com
facebook : https://www.facebook.com/h.t.p.kiriyama

ちなみに、
会社サイトやEFOツール「フォームキーパー」サイトも例によって全く更新していません。
(もちろんスマホ対応もできていません)

これ、今のところ、更新する気も必要もないと思っているので、
「これだけ言っておいて、お前のとこのサイトは出来てないじゃん」
とかは一切受け付けません。

何卒よろしくお願いいたします。

toyota.jpを解析するなら…のフォーム内改善を考えて見ました。

2011年01月14日UP
  • このエントリーをはてなブックマークに追加

久々の更新です。

フォーム改善情報をお探しにきているユーザ様には、最新情報をお伝えできず大変申し訳御座いません。


本日は興味深い記事を発見しましたので、私もひとつ考えてみようと思いました。

その記事とはこちらです。
http://web-tan.forum.impressrd.jp/e/2011/01/13/9509

「もしもtoyota.jpを解析するなら(後半:カタログ請求フォーム編)」
と題しまして、トヨタサイトの改善案を出すという記事です。

本日はカタログ請求を取り上げていまして、簡単ですが、上記サイトではトヨタのカタログ請求について、以下のように指摘されていました。

  • 『カタログ請求をだけにも関わらず、請求を完了させるまで7つもステップがある』
  • 『なかなかステップアップしていかない』
  • 『地図が意味をなしていない(地図をクリックしても地域の選択がされない)』
  • 『確認作業だらけにも関わらず、(販売店等の)確認方法が困難』
  • 『入力フォームに余計な項目が存在する』

注目は最後の指摘です。フォーム改善についても少しだけ書かれていました。
私はそこを掘り下げ、フォーム改善での送信率アップ(コンバーションアップ)についてを考えてみようと思います。
(フォーム以外の話は書きませんので詳しく知りたい方は上記サイトへご訪問ください。)

まずは、おさらい・・・と言いますか、フォーム改善の基本で、「ユーザのストレスを軽減することによりフォーム送信率がアップする」ということが言えます。

ストレスが商品購入や資料請求の意欲をそぐ原因となってしまいます。そしてフォームからの離脱原因となり、コンバーションにも繋がらない原因となってしまいます。

フォーム内改善は、ユーザにストレスを感じさせないフォームを作ることが第一です。

これを踏まえて、
「トヨタのカタログ請求フォームはどの箇所でストレスを与えてしまうのか!?」
を考えていきたいと思います。


フォーム改善の前に・・・
記事を読んでいるだけではわからないと思い、実際に使用したのですが、私も同じような感想を頂きました。※ 確認に使用したブラウザ:IE8

確認が多すぎて、かなりのクリックをしないと次ステップまで辿りつかないし、地図も何の意味があるのかわからない上、販売店の指定画面では地図は表示されなくなってしまう。

この時点でストレスはMAXを迎えようとしていました・・・

販売店に関しましては、地図がなくなった代わりに
ご希望の販売店名が不明の場合は、まず「お近くの店舗検索」にて店舗・販売店をお確かめください。
と書かれていました。

このシステムがあるのなら連動させれば良いのに・・・。と思いつつも、問題のフォームページへ(やっと)辿り着きました。


パッと見で気になった箇所は、「ひとつで良い入力欄が分割されている」というところです。

例えば、『苗字と名前』、『郵便番号の3桁-4桁』といったところです。

そのような管理をされているのでしたら仕方ない(管理方法を改善する余地もある)のですが、これはユーザがストレスを感じる部分です。

ユーザによっては、2,3文字のタイピングで表示される候補から名前や郵便番号を入力するということも考えられます。もし以前フルネームで入力していた場合は、余計なストレスを与えることにもなります。

また、例えば、『苗字』→『名前』と移動する際に、マウス(またはTabキー)で移動しますが、これが余計な一手間となりストレスに感じるユーザも少なくありません。

次に気になった箇所は、「必須項目が分かりづらい」というところです。

※アスタリスク(*)のある項目は必須です。
と書かれてはいますが、アスタリスク自体見づらいです。

また、ここではアスタリスクと書くよりも、『コメ印』というような表現がわかりやすいかとも考えられます。

(もっと良いのは 必須項目印の例 このような画像を使用することです。)

次に、元となるサイトにも書かれていますが、「余計な項目がある」ということです。

カタログの請求に誕生日や職業は全く関係ありませんので、そのような項目はいらないなと思いました。

ユーザに、入力箇所が少ない、簡単だと思わせることもストレスの軽減に繋がります。必要のない項目を削除することでフォーム内が短くなり、簡単に終わるということを表す効果もあります。

また、これも元サイトに書かれていましたが、年式や車検日項目は車検書等が必要となってきますのでストレスを感じるユーザは多いのではないでしょうか。
必須で無いことがせめてもの救いかとも思いますが、そもそも必須項目がどこかが分かりづらいですので、駐車場に走ってしまうユーザもいるのではないかと考えられます。

最後に、郵便番号入力で自動住所入力の機能ぐらいは欲しいところです。

この機能はユーザの面倒を大幅に減らすことが出来ますので、住所入力欄を置いているフォームには必ずと言っていいほど使用したほうが良い機能です。


恐らくEFOには取り組んでいませんので、離脱ページ/項目の分析や、それに伴う改善もしていないかと思われます。

トヨタのサイト担当者と話す機会があれば(ないかと思いますが、、)まずは、解析システムの導入を提案し、どれほどの見込客を取りこぼしているかを認識させたいです。

ただのカタログ請求フォームと思うかも知れませんが、購買意欲をそぐわせないためにも大事な配慮です。

最近では、フォームキーパーをご使用ユーザ様より、
「申し込み安いから楽天よりこっちのネットショップで買い物をしている」
とお客様の声を頂いた、という喜びの声を頂きました。

フォーム改善には、送信率をアップさせコンバーションに直接結びつける効果があるのはもちろんのこと、顧客満足度も向上させる効果もあります。

この記事を通じて、フォーム送信率を向上させるための改善方法を知り、Web上に万人が使用しやすいフォームが増えてもらえたらと思います。

「備考」や「お問い合わせ内容」等のtextareaのサイズに注意

2010年10月30日UP
  • このエントリーをはてなブックマークに追加

最近、一ユーザーの立場で、1日に100サイト程度のフォームを観覧・送信をしているのですが、ふと同じ点が気になったので今日この記事を書くことを決めました。


それは何かと言いますと、複数行入力欄(<textarea>)の縦・横幅サイズです。

以前にも少しお話したことがある(→ フォーム離脱原因6~textareaのサイズを大きくする
のですが、
例えば お問い合わせフォームの【問い合わせ内容】のような、textareaを使用する入力欄のサイズが小さすぎて非常に見づらく、確認するのも一苦労ということを感じました。

仮に確認ページを用意していても、“確認ページへ移動する前の確認”ですので意味をなしません。

サービスの内容を詳しく知りたい場合やビジネスメールなどを送る際には、必ずと言っていいほど送信ボタンクリック前に見直します。

また、特に目的もなく置いているお問い合わせフォームでしたらまだ良いのですが、重要な役割を果たしているフォームでtextareaを使用している場合はコンバーションにも影響します。

送信前にユーザーのストレスを溜めていては、そこで離脱するユーザーはもちろんのこと、お問い合わせに対しての返信メールにもマイナスの影響を与えかねません。

ユーザーのことを考えても、売上のことを考えても、サイトのことを考えても、複数行入力欄のサイズは、まず見直したほうが良いフォームパーツの一部と言えます。

そもそもの原因を考えてみました。

なぜここまでtextarea使用欄のサイズが小さいのかを考えてみました。

1、サンプルフォームをそのまま使用している

フォームシステムは大半のサイトがどこかのサービスを使用しています。

そして自動生成されたHTMLをそのまま貼りつけて使用しています。

これが最大の原因でして、お世辞にもサンプルフォームのHTMLはユーザーのことを考慮しているとは言えません。

今回問題に挙げているtextareaだけでなく、labelを使用していないサンプルも多いです。

是非、サンプルフォームはそのまま使用するのではなく、少しの修正を加えて使いやすい・送信率の高いフォームを制作しましょう。

2、入力しない人が多いと思い込んでいる

【備考】などの、形式上で表示させているような入力欄は、入力しない、または少しの入力、と思い込んでいるサイト運営者が多いようです。

しかし、私がそうだったように、中にはサイトの感想や商品の感想を送るユーザーも存在します。

入力欄を設置している以上、いつ、誰が、どのような目的で使用するかはわかりませんので、設置しているからにはユーザーのことを少しでも考えたフォームにしましょう。

3、修正がめんどくさいと思っている

・・・。

是非めんどくさがらずに修正してください。。。

細かく考えますとまだありそうな気がしますが、一番が1の【サンプルフォームをそのまま使用している】ということからだと考えられます。

確かに自動生成してもらえるのは楽だと思いますが、そのまま貼り付けるだけではなく、数字の修正だけで終わりますので、改善してもらいたいと思います。

実際にユーザーの立場になってみてください。

こんな説明をしようとも全く意味が無い(と言いますか、読んで終わり)と思いますので、ユーザーの立場となって下のフォームに記述してみてください。

(上の文章をなんでもいいので5行程度コピーして貼りつけてみますと確認する際の見やすさの違いがわかります。)

●よく見るテキストの小さいフォーム例

お問い合わせ内容

次に・・・

●ほんの少しの手を加えたフォーム改善例

備考

5行程度の文章を入力しますと、どちらがストレスが溜まらず確認できるかが一目瞭然です。

さらに10行程度の文章を入力しますと、スクロールした際に最上部・下部まで進みますと、全体的な画面まで上下に移動し、大変ストレスになることがわかると思います。


是非この記事を皆様が読んで、少しでもユーザーのことを考えたフォームが増えて貰えたらと思います。

では、今日もお読みいただきましてありがとうございました!

EFOで間違えやすい4つの注意点

2010年09月28日UP
  • このエントリーをはてなブックマークに追加

当サイトでも数々のEFOテクニックを公開してきましたが、今日はその中でEFOの注意点をお伝えします。

※ 当サイトのEFOテクニックをご覧頂いた上での注意点です。

1、チェックを忘れない

EFOだけでなく、すべての物事において基本中の基本です。

各種WEBサイトフォームはコンバーションの一歩手前のページですので『結局送信できませんでした』というのが一番最悪なパターンです。

(実は私も過去に送信できないフォームを提供してしまった経験があるのですが、その時はキツいお叱りの言葉を受けました。。いつも入ってくるはずの注文メールが来ないのですからそれはそうですよね・・・今でも反省しています。。。)

特に、メールフォームシステム以外にフォームキーパーのようなEFOツールを導入している場合は注意が必要です。

システムと支援ツールが喧嘩しあうのはよくある話でして、それが元で送信までたどり着けないということが多々あります。

多くの方は支援ツールを導入していないと思いますが、導入していなくてもフォームシステムの不具合や設定の間違いがありますと送信できなくなりますので、フォーム作成後は“必ず”最低2回はテスト送信するように心がけましょう。

2、ユーザー属性を見極める

EFOを施策しているつもりが逆効果になることもあります。

特に当サイトで公開しているようなHTMLとCSSのみのEFOはユーザー属性に依存されるものが多いです。

「男性か女性か」「10代か40代か」「PCを熟知している方か初心者か」等で全く同じフォームでも送信率が大幅に変化してきます。

例えば、10代・20代女性は小さい文字を好むのに対し、40代・50代男性は大きい文字を好みます。この『文字の大きさとユーザー属性』ということだけでも送信に関わってきます。

あなたのサイトのユーザー属性を見極め、ベストなフォームを制作することを心がけましょう。

3、一気に修正しない

例えば、10個の項目のうちに離脱している(と思われる)項目が3項目あったとします。その場合は、3項目一気に修正せずに、1項目ずつ修正していきましょう。

なぜなら、離脱率が高い(と思われる)項目だからと言って、100%その項目“だけ”のせいではない可能性があるからです。

離脱率の最も高い(と思われる)項目を、見た目は何も変えずに一番初めに持ってくることによりその項目で離脱することがなくなる場合もあります。

逆に3項目修正したのに全く送信率が変わらない場合もあります。

問題の項目をいっぺんに修正してしまっては原因を判別できない上、時間の無駄にもなってしまいますので、フォーム改善はひとつづつ順を追って行うようにすることをおすすめします。

4、思い込まない

EFOはあくまでもサイト運営者が使いやすいようにフォーム改善するのではなく、ユーザーが送信しやすいようにフォーム改善する対策です。

サイト運営者の考えでのフォーム改善・修正は、本当にユーザーにストレスを与えないものなのかというのはわかりません。

運営者の思い込みだけで改善を判断するのではなく、使用者の声や第三者の声を聞いて施策することをおすすめします。


EFOの注意点は大まかには4つのことが挙げられます。

細かく言いますとまだまだあります。当サイトの各記事にも注意点は散りばめられていますので気になる記事を読んでみてください。

では、今日もお読みいただきましてありがとうございました!

フォーム【入力欄】改善8つの方法

2010年09月23日UP
  • このエントリーをはてなブックマークに追加

以前、「【項目】改善8つのこと」という記事を書きましたが、今日は【入力欄】の改善についての8つの方法になります。


1、<input>、<textarea> 等のサイズを考える

入力欄のサイズは、入力中にストレスを与えるか、わかりやすく入力することができるかを分ける非常に重要なポイントとなっています。

サンプルソースは必ずと言っていいほど入力サイズが小さいですので改善が必要になります。

2、2つの余白を考える

ひとつは、入力欄を置いている場所の余白です。

枠から入力欄までの余白

ふたつめは、入力欄(input や textarea)自体の余白です。

入力欄自体の余白

この部分は、余白の欲しいinputやtextarea自体に、 <input style=”padding: 3px;” /> という指定をしますと変更することが出来ます。

3、文字色を考える

意外と知られていないのですが、入力欄内部の文字色を変更することも可能です。

これも入力欄 <input> タグ自体に <input style=”color: #色の指定;” /> というような指定をすると変更することが出来ます。

4、背景色を考える

文字色と合わせて背景色も考えましょう。

<input style=”background-color: #色の指定;” /> で変更することが可能です。

5、文字サイズを考える

ユーザー属性によっては、入力欄・文字サイズが大きい方が見やすい方もいらっしゃいます。

特に年代によって左右されやすいのですが、4,50代がターゲットのフォームは文字サイズが大きい方がストレスが溜まらないと言えます。
反対に10代などの若年層がターゲットの場合は文字サイズが小さいほうがストレスが溜まらないようです。

6、フォーカス時は背景色を変更する

input や textarea のフォーカス時(入力欄をクリックしてポイントを合わせた時)は背景色を変更させることによりどこに入力しようとしているのかが一目でわかるようになります。

※ 主要ブラウザであるIE以外の対策になります

7、<lavel>タグを使用する

<label>タグを使用することによりストレスを大幅に軽減させることが可能になります。ですので、必ず使用するようにしましょう。

<input type=”text”>の場合は項目と合わせて使う形になります。
type=”radio”、type=”checkbox” の場合は<input>タグに使う形になります。

設定方法につきましては → 以前の記事「labelタグの必要性」を参考にしてください。

8、補助するテキストは入力例も

例えば、



(全角)例:山田太郎

この時に(全角)や(必須)等だけでなく書き込み例を表示しておくことにより、入力する側はわかりやすくなります。


基本的に項目欄も入力欄も同様の対策、もしくは少し応用した対策になります。

HTMLやCSSで設定できるEFOは、ユーザー属性に依存されるような対策ばかりですので、送信率を測るテストすることをおすすめします。

では、今日もお読みいただきましてありがとうございました!

input size はブラウザによる幅の違いが生まれる

2010年09月22日UP
  • このエントリーをはてなブックマークに追加

この記事は2010年9月に書かれたものになります。
2015年4月版 input size について
という続記事を書きましたのでそちらも参考にしてください。


多くの方は<input size=”30″ />のように入力欄inputのサイズはsize属性で指定をしていると思います。

ASPのサンプルフォームなどは必ずと言っていいほどこのように指定していますので、当たり前と言っては当たり前です。

ですが、この指定の仕方はちょっとした欠点があります。

それは、
ブラウザによってサイズが異なってくる
ということです。

そもそもこのsize=””で指定しているサイズは、pxなどのように「入力欄の幅の指数」を決めているのではなく「半角文字での文字数の収まる範囲」を決めているのです。

つまりどういう事かと言いますと、例えば「size=”30″」という指定は、「半角文字数が”30文字”収まる幅」に設定されている」というわけです。

ここに問題があります。

それは、ユーザーのブラウザ環境によって左右されるということです。

ブラウザとはIE(Internet Explorer)やFirefoxなどのWEBサイトを観覧するためのソフトのことを言います。(ただしくはウェブブラウザと言います。)

  • あなたのサイトに訪れたユーザーは、あなたと同じブラウザを使用しているとは限りません。
  • あなたのサイトに訪れたユーザーは、あなたがサイト制作時に確認しているブラウザを使用しているとは限りません。
  • あなたのサイトに訪れたユーザーは、Macintoshを使用しているかWindowsを使用しているかはわかりません。

これらのことを考慮しますと、どのブラウザで見ても同じように表現するには「input size=””」を使用するのではなく、「style=”width: 000px;”」というスタイルシートを適応させる記述をする必要があります

実際にどの程度違うのか、12のブラウザでスクリーンショットをとってみましたので一気にご覧ください。(画像になりますので、実際に入力することは出来ません。)
※ ここでは、『input size=”34″』と『style=”width: 200px;”』を比べてみました。


Windows IE8
WindowsIE8

Windows IE7
WindowsIE7

Windows IE6
WindowsIE6

Windows Firefox3
WindowsFirefox3

Windows Opera10
WindowsOpera10

Windows GoogleChrome
WindowsGoogleChrome

Windows Safari3
WindowsSafari3

Macintosh Safari4
MacintoshSafari4

Macintosh Firefox2
MacintoshFirefox2

Macintosh Opera9
MacintoshOpera9

Macintosh Camino
MacintoshCamino

Macintosh Seamonkey
MacintoshSeamonkey


ご覧いただいてわかりますように size=”” 指定のほうはかなり大きな違いがあります。
それに比べて width: 200px; 指定のほうは狂いもなく200pxになっています。

スタイルシート記述を適応させ、異種ブラウザで同じ表現ができるということは、Webサイトのデザインが崩れるのを防ぎます。

まれに入力欄が枠線をはみ出していたり、サイドバーエリアまで突き抜けているサイトを見ることがあります。

これはsize指定していることが原因である場合が多いです。

きっと制作している方も気づいていないと思いますが、このように知らないところでフォーム離脱率をアップさせる造りになっていることもありますので、必ずチェックすることをおすすめします。

サイト更新時にブラウザチェックをしていない方や、してもWindowsだけという話をよく耳にしますので今回の対策を怠らないようにしましょう。

では、今日もお読みいただきましてありがとうございました!