position: absolute;

選択されているタグ : javascript

タグを絞り込む : book css cssnite html5 jquery node nodejs

スマートフォン向けのフォームを作成する際に参考になる書籍


2013年の4月13日にCSS Niteビギナーズ:HTML5+CSS3というセミナー・イベントにHTML5でのフォームについて登壇してお話する予定です。

その中で自分の経験や記憶だけで話すというのは流石に偏ってしまわないか不安になるので、最終的なシナリオの組み立てのために手元にあった書籍(上の写真のもの)をざっと再度確認しました。

どれも参考になりますし、流石に押さえるべき点はどの本も押さえていますが、その中でも「スマートフォン向けのフォーム作成」に関して特におすすめできるんじゃないかというのが2冊ほどありましたので紹介します。

言うまでもありませんが、フォームは重要です!

ECなどのサイトやキャンペーンサイトの応募、Webサービスの登録や利用などなどWebにおいてビジネスを展開する上でフォームというのはとても重要です。その作り方を間違ってしまうと離脱率の上昇を招くことになり、サイトの目的を果たせなくなってしまうという結果を招きかねません。

その割には解説が少ないような気がする

といいつつもいざ書籍などを購入して見てみると、フォームについての記述が結構少ないのです。何故でしょうか?ちょっと考えてみます。

ブラウザ間の実装差が大きく、スタイリングしにくい

こないだまでのIEと他のブラウザとの差異は言うに及びませんが、AndroidとiOSとの差異も結構あるので、しっかりやろうとするとキリがないという面がある。

ブラウザが提供しているものから逸脱しにくい

スタイリングしてしまうにしても、サイトごとにまちまちな形になってしまうとユーザーも混乱しかねないのでなるべくネイティブで提供しているUIを維持したくなる。

などなどの理由が考えられるでしょうか。で、いざ書籍を調べてみると一章どころか…ということが往々にあります。

そういった状況の中ですが、分量が少ないと言えどもやはり参考になるものはあります。

フォームを作る際にどういう点を心がけるべきかを明示している解説

すべての人に知っておいてほしい スタイルシートデザインの基本原則という書籍のChapter8-2の『インターフェイスにこだわったスマートフォンサイト』という記事の中でお問い合わせフォームを例に記載されています。分量は多くないですし、内容も網羅的ではありませんが、ユーザーフレンドリーなフォームを作る際の基本的な考え方が明確になっているので「こう考えて作りこんでいけばいいのか」と再確認できると思います。

その上でもう少し具体的な情報も知りたいということであれば、すべての人に知っておいてほしい スマートフォンサイトデザインの基本原則のChapter2-11『スマートフォンサイトのフォームページ』が参考になると思います。基本的な組み方が紹介されています。スタイリングについての基本的な記述はiPhone+Android スマートフォンサイト制作入門[改訂新版] (WEB PROFESSIONAL)(マカロン本)の第4章の6項『使いやすいフォームのデザイン』が複数のパーツについてのスタイリングの例があるので、参考になります。

外すことができないサーバーサイド・セキュリティについても解説


フォームを作るということはユーザーからの情報を受け取るという事になりますので、当然ながらサーバーサイドでのプログラムやセキュリティへの配慮、バリデーションなどが必要になります。その点に関してはWebサイト制作者のための HTML5+JavaScriptスマートフォンサイト実践講座という本が私の手元にある中では一番充実しています。
スタイリングについてもサンプルソースも交えて解説されていますので、「とにかく一冊でひと通りのことを知っておきたい」ということであればこの本がいいかもしれません。

ちなみに私はこちらのPDF版を購入しました。写真の一番下にあるのが、そのプリントアウトです。

最後に

各書籍どれも参考になりますので、状況が許す限りは参考にしてみてください。OSのアップグレードなどで記事が古くなる危惧があるかもしれませんが、基本はそう変わらないとおもいますので、どうぞ参考にしてみてください。