on:2019年12月24日sponsorsフォームのデザインや実装が苦手という人は少なくないと思います。スマホ時代における、ユーザーにとって利用しやすいフォーム実装のテクニックを機能・ビジュアルデザイン・実装コードごとに詳しく解説したフォーム制作実装ガイドを紹介します。さまざまなプロジェクトで利用できるフォーム制作の知識をしっかりと身につけることができます。Patterns」の翻訳版。洋書だと実例が英語のままで、日本語環境ではあまり参考にならないということがありますが、本書は可能な限り日本語環境に適するように翻訳されています。本書は本日発売!書店で見かけたら、ぜひ手にとってみてください。300ページ超で、かなりのボリュームです。出版社:株式会社ボーンデジタル発売日:2019/12/24Amazonで掲載されている表紙画像の色味がかなり薄い、、、楽天の方がまし。紙面のキャプチャで、中身を少しだけご紹介。本書は10章の構成で、WebサイトやスマホアプリのUXの要であるフォームについて、そのパターンごとに300ページ超のボリュームで徹底解説された一冊です。フォームのデザイン、フォームの機能、フォームの実装のアイデアとテクニックがぎっしり詰まっています。登録フォームやログインフォームといったシンプルなフォームから、決済や予約や検索といった少し複雑なフォーム、アップロードやフィルターといった高機能なフォームまで、パターンごとに詳しく解説されています。各フォームごとに、適切なデザイン、デザインで注意すべき点、使いやすくするための機能、そしてアクセシブルな実装方法、機能それぞれの実装コードがすぐに分かります。パスワードの入力欄に「パスワードを表示するボタン」があると便利ですよね。パスワードの確認用に2つ入力欄を用意するのではなく、パスワードを表示する機能をつけることでユーザー体験を向上させます。次ページにはこの実装方法がJavaScriptベースで詳しく解説されています。Eコマースに欠かせないのが、決済フォームです。決済フォームが使いづらいと、それだけで売上が下がってしまいます。本書ではスマホでのフォームが中心となっており、フォームのパターンによってはデスクトップのものもあります。ユーザーになんらかの情報、例えばメールや電話番号の入力を求めるには、なぜその情報が必要なのか説明する必要があります。メールであれば「ご注文の確認メールをお送りします」、電話であれば「配送に関するお知らせをお送りします」のような感じです。この一文があるだけで、入力率はぐっとアップします。サービス系では、ログインフォームが欠かせません。単純なように見えますが、実はユーザビリティの問題を抱えているログインフォームを使用しているサイトやアプリは少なくありません。標準的なログインフォームだと、ユーザー名とパスワードのフィールドで構成されています。ユーザー名がメールアドレスであれば、このラベルには「メールアドレス」、もしくは「ユーザー名またはメールアドレス」と記載するとユーザーは戸惑わずに入力できます。「パスワードをお忘れの場合」リンクもその配置場所によって使い勝手が変わります。すべての人が利用する機能ではなく、最近ではパスワードマネージャーで管理している人も増えています。検索フォームは多くのサイトやアプリで使用されています。ユーザーにとって見つけやすくて使いやすく、シンプルで便利な検索機能を提供しましょう。検索フォームのデザインで重要なのが、そのスペースです。通常はすぐ見つかるようにヘッダに配置しますが、ヘッダの土地は競争が非常に熾烈です。最近増えてきたラベル非表示の検索フォーム、ボタン非常時の検索フォームなど、省スペースのテクニックもデザイン・機能・コードの面から詳しく解説されています。特殊なフォームについても、同様に詳しく解説されています。アップロードフォームは写真共有やメッセージや事務管理系のアプリで、画像や文書をアップロードするためのフォームです。画像や文書ファイルをアップロードするためのファイル入力、Ajaxで強化した機能、キーボードユーザーやスクリーンリーダーユーザーにも対応したドラッグ&ドロップのインターフェイスの実装方法なども詳しく解説されています。フォームには、完了までに長い時間がかかるものもあります。長くて複雑なフォームを管理しやすくするためのパターンが具体的に紹介されています。よいのは、長くて複雑なフォームは避けるですけどね。経費フォーム|応用1:大量に追加する項目があるフォーム長くて複雑なフォーム|応用2:入力に長時間を要するフォームWebサイトやアプリで避けて通れないのが、フォームです。インタラクションの中心にあるのも、フォームです。最後に、献本いただいたボーンデジタルの担当者さまに御礼申し上げます。当サイトでは随時、献本を受け付けています。お問い合わせは下記よりお願いいたします。