みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

<form> <input type="tel" placeholder="電話番号"> <button type="submit">送信</button> </form>

確認・完了画面付きのフォームを簡単に実装できるWordPressプラグイン「MW WP Form」をカスタマイズしたいときに毎回ど忘れしたりググったりしているので備忘録です。 エラー文言の変更やエラーをまとめて表示するなど、エラー表示周りのカスタマイズ時のものになります。 紹介している内容は、MW WP Form Ver 3.2.1で検証した内容になります。 「MW WP Form」についての基本的なインストール・使用方法については割愛しているので、使用したことない場合などはプラグインの詳細も含め「MW WP Form」で確認してください。 formタグにエラー用classを付与する 「MW WP Form」は、入力画面では.mw_wp_form_input、確認画面では.mw_wp_form_previewというように現在の状態によってform部分に特定のclassが付与される作りになっ

MW WP Form 条件分岐サンプルフォーム1.まずは何もせずに「確認」を押す ・・・テキストボックスはエラーにならない 2.「その他」「メール」を選択して、「確認」 ・・・テキストボックスが必須に切り替わっている 3.テキストボックスに入力して「確認」 ・・・バリデーションエラーがなくなる という流れで確認してもらうとわかりやすいでしょう。 こちらのページをご覧ください。 MW WP Form 選択項目による条件分岐・必須切り替えサンプルフォーム フォームタグはこちら（HTML省略）お問合せ項目(複数選択可) 必須 [[mwform_checkbox name=”お問合せ項目” children=”項目1,項目2,項目3,その他”]] [[mwform_text name=”その他詳細” placeholder=”その他の場合は必須に切り替える”]] ご連絡方法 必須 ※電話番号は別途

MW WP Form の管理画面にはたくさんの機能が用意されていてとても便利です。 エラーメッセージの文言変更やエラーメッセージの表示位置を変更させたいと言った更なるカスタマイズには、管理画面だけでは設定できない範囲となるので、その設定方法を説明したいと思います。 今回は例として、MW WP Form の管理画面の本文に下記内容を入れました。 ※分かりやすくする為、あえてHTMLタグはほとんど使用していません。 氏名 [mwform_text name="名前"]<br> 例：山田太郎<br> <br> メール [mwform_text name="メール"]<br> 例：test@example.com<br> <br> 内容 [mwform_textarea name="内容"]<br> <br> [mwform_submitButton] エラーメッセージの文言を変更する デフォルト

皆さんのアプリやサイトを利用するモバイルユーザーには、特定の目的があります。そして多くの場合、ユーザーとその目的の間に立ちはだかっているのはフォームです。 実際には、フォームは目的を果たすための道のりにおいて、最後のステップであると考えられることが多いです。だからこそ、ユーザーが戸惑うことなくできる限り早くフォーム入力を完了できるようにすることが重要なのです。 次の７つのルールに従って、素早く簡単に完了できるフォームを作りましょう。 ルール１：フォーム表示をふさがない キーボードなどのインターフェース要素により、フォーム表示がふさがれないようにしましょう。ユーザーがフォームへの入力を完了したら、入力フィールドを自動的に画面の上へ送るようにしましょう。

この記事はGoodpatch Advent Calendar 2018 14日目の記事です。また、2018/10/08に開催された技術書典5にGoodpatchの有志で出展したブックパッチの内容を省略・改変した内容となっています。 今回はマイクロインタラクションはよく知らない方やマイクロインタラクションは知っているけど実際にコードを書いたことが無い方向けにマイクロインタラクションの基本的な知識と実装方法についてご紹介します。 マイクロインタラクションの理解 マイクロインタラクションとはどういう意味なのでしょうか。Dan Saffer氏の著書「マイクロインタラクション ー UI/UXデザインの神が宿る細部」によると、マイクロインタラクションについて以下のように書かれています。 マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのことです。

インフラエンジニアの中野(etsxxx)です。今回はWebのフロントの話です。稚拙な部分はご容赦を。 はじめに 前提知識 解決案の候補 解決案1: 手でspanタグをつける 解決案2: サーバーサイドの処理 解決案3: クライアントサイドの処理 クライアントサイドで文節区切り 実装 結果と考察 さいごに 2024/05/16追記 はじめに 2020年12月、リブセンスにQ by Livesenseという広報ブログが誕生しました。このブログは明朝体と縦書きと長文にアイデンティティがあります。 Q by Livesenseはこういう見た目のブログです。 Q by Livesenseは縦書きということで、漢数字を使っていたり、写真やイラストを使わずに純粋な文体で記事を書いていたりと、書籍のような日本語らしさが求められるデザインとなっています。 縦書きはWebエンジニアにとっても珍しい実装ですが、

200以上あるデザインのテクニックをカテゴリーやシーン別にまとめた検索ページを作りました。アイデアが浮かばない...ここどうしよう？なんてデザインの疑問を解決します。制作中に役に立てる情報をたくさん集めました。