WD Online

課題解決のためのUI実装講座 Web Designing 2016年3月号

コンバージョン率アップを目指せ! ユーザビリティの高い入力フォーム(2/2) 使い勝手のいいフォームは、地味な部分に少しの手間をかけることから

ここでは、実際のサイトで使われているフォームをアレンジしたものを例にして、具体的な実装方法を紹介していこう。フォームはユーザーとの接点であり、コンバージョンに直結するパーツでもあるため、少しの手間が大きな成果につながってくる。

サンプルファイルダウンロードのご案内
このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。

[FORM USABILITY 01]細部にこだわるコーディングで操作性を高める

ここからは、ユーザビリティの高い入力フォームをどのように実装するのか、ソースコードを見ながら解説していく。使い勝手のいいフォームを実装するには、地味な部分に少しの手間をかけることが重要だ。なお、ここで用いるコードはEDIMOのサイトで実際に使われているものを、今回の執筆に合わせてアレンジしたものである。

ブラウザのバリデーションを停止する

JSで独自のバリデーション機能を実装したい場合は、ブラウザ側が標準で備えているバリデーション機能を停止させる必要がある。そこで、form要素にnovalidate属性を付与する。

label要素でクリックエリアを広げる

input要素の入力エリアは比較的広い。しかし、マウス操作が難しいユーザーや、スマートフォンなどで閲覧するユーザーからすると、十分なエリアが確保できているとは言えない。そこで、label要素を利用する。

通常、label要素は、checkboxやradioボタンのクリックエリアを広げる目的で使われることが多い。今回のフォームでは各入力項目のラベル部分に対してlabel要素を用いて、クリックエリアを広げている(01、02)。

<!-- 中略 -->
<label class="form-table-text" for="js-form-company" onclick="">
	会社名
	<span class="mark">任意</span>
</label>
<!-- 中略 -->
<input class="input" id="js-form-company" type="text" placeholder="株式会社LIG" name="company" data-key="company">
<!-- 中略 -->
01 HTMLの抜粋(sample/index.html)。このようにfor属性とid属性をひも付けておくことで、label要素部分がクリックされたときもinput要素にフォーカスが当たるようになる。また、一部のタブレットとスマートフォンではlabel要素に対してタッチイベントを検知できないことがあるので、それを回避するためにすべてのlabel要素にonclick属性も設定している
290e957e2e09d3d251c34b15079be9a3.jpg
02 label要素でクリックエリアを確保
各項目のラベル部分をクリックすると、入力欄にフォーカスされるようにしている

type属性で入力しやすくする

input要素の属性で特に重要なのはtype属性だ。HTML5ではtype属性のバリエーションが豊富になり、メールアドレス入力用の「type="email"」や電話番号入力用の「type="tel"」などがある。これらの属性を項目内容に応じて使い分ければ、ユーザーがデータを入力する際の助けとなる(03)。

07fb24dd88b1adf6a95ddc5d3eb2f396.jpg
03 type属性に対応したスマホ での入力の様子
電話番号欄では、入力キーが電話番号仕様になった状態から入力できる(図は、iOS9&Safariでの画面)

textarea要素に文字数制限を設定する

textarea要素にはinput属性に設定した属性のほか、maxlength(最大入力可能文字数)とminlength(最小入力可能文字数)の属性も加えた。これにより、ユーザーは設定された文字数の範囲内でしか入力できないため、長文による迷惑メールに対する防止にもなる(04)。

bd5a6c5ca48fb279c6a7445e9f139cbe.jpg
04 テキストエリアでの文字数制限
maxlengthを「3000」に設定しており、3,001文字以上は入れられないようになっている

[FORM USABILITY 02] jQueryで簡易的なバリデーション機能を実装する

続いて、「必須項目が未入力のときはエラーを表示し、すべての必須項目が入力されたら送信ボタンが有効になる」という簡易的なバリデーション機能を追加する。この機能をJavaScriptで実装することで情報が入力されたタイミングでエラーの有無を返すことができるため、スムーズにユーザーを送信まで導くことができる。

(function () {

    'use strict';

    var $form = $('#js-form'),
        $data = $form.find('.js-require'),
        $button = $form.find('.button');

// ↓--------------------------------------------------↓ F
    var validations = {
            user: false,
        comment: false
    }
// ↑--------------------------------------------------↑ F

// ↓--------------------------------------------------↓ A
    function setError(elm){
        elm.addClass('is-error');
    }
// ↑--------------------------------------------------↑ A

// ↓--------------------------------------------------↓ B
    function removeError(elm){
        elm.removeClass('is-error');
        elm.addClass('is-success');
    }
// ↑--------------------------------------------------↑ B

// ↓--------------------------------------------------↓ C
    function keyHandler(self){
        var dataKey = self.data('key');
        var $target = $('#js-form-' + dataKey);
        var val = self.val();
        if(val === ""){
            setError($target);
        } else {
          removeError($target);
        }
    }
// ↑--------------------------------------------------↑ C

// ↓--------------------------------------------------↓ D
    function checkValidations(self) {
        var dataKey = self.data('key');
        var key = self.attr('id').substr(8);
        var val = self.val();
        if(val === ""){
            validations[key] = false;
        } else {
          validations[key] = true;
        }
    }
// ↑--------------------------------------------------↑ D

// ↓--------------------------------------------------↓ E
    function allowButton(){
        if(validations.user === true &&
            validations.comment === true
        ){
            $button.removeClass('is-disable');
        } else {
            $button.addClass('is-disable');
        }
    }
    allowButton();
// ↑--------------------------------------------------↑ E

// ↓--------------------------------------------------↓ G
    $data.on('change keyup focusout', function(){
        keyHandler($(this));
        checkValidations($(this));
        allowButton();
    });
// ↑--------------------------------------------------↑ G
})();
01 JavaScript(sample/assets/form.js)

エラー時の処理を用意する

まずは、エラー時に入力欄の見た目が変わるように、JS側でclass属性を付与する関数setError(A)を用意する。後ほど詳しく解説するが、任意のタイミングで呼び出され、class属性「is-error」を付与し、入力欄をオレンジ色にする。

エラー解除時の処理を用意する

次に、入力欄に情報が問題なく入力された際、エラーのスタイルを解除し、成功したとき用のclass属性を付与する関数removeError(B)を用意する。任意のタイミングで呼び出され、class属性「is-error」を外して、class属性「is-success」を付与し、入力欄の見た目を変える。

バリデーションを行いclass属性を付与する

続いて、入力欄に情報が入力された際、それをエラーと見なすかどうかの判定を行う関数KeyHandler(C)を用意する。今回は「必須項目に情報が入力されているかいないか」のみの判定を行っている。具体的には、入力欄に何も情報が入力されていなければ関数Aを呼び、入力されていれば関数Bを呼ぶという仕組みだ。

バリデーションを行い内部的なチェックを行う

内部チェックを行う関数checkValidations(D)を用意する。ロジックは関数Cとほぼ同じだが、ここではすべての必須項目の入力状況を調べ、エラーの有無をオブジェクト「validations」に記録している(F)。この関数Dは後の関数Gで使う。

ボタンの有効化・無効化を行う

さらに、ボタンが押せるかどうかの関数allowButton(E)を用意する。内部的なバリデーションを行う関数Dによって、全入力欄が問題なしと判定されればボタンが有効化され、
エラーが残っていれば無効化される。

関数実行のタイミングを設定する

最後に、これまでに用意した関数を呼び出すタイミングの命令を記述する(G)。今回は3つのイベント「change」「keyup」「focusout」を設定した。こうしておけば、ユーザーがデータを入力しているタイミングで関数が実行され、リアルタイムにバリデーションを行える。

 

c51597a601ca7de519da12628e56deb3.jpg
Text:尾谷真希子
デザイナー。京都工芸繊維大学を卒業後、グラフィックデザインやコピーライティングの仕事を経て、WebサイトやアプリなどのUIデザインに携わる。2015年、株式会社LIGに入社。
ff886f4fee47b637b2bbc9187c9917ce.jpg
Text:堀口誠人
フロントエンジニア。ずっと日本で暮らしたかったため、ベトナム出張のあるWeb制作会社の内定を辞退し、2012年に株式会社LIGに入社。2015年、フィリピンに派遣される。 http://liginc.co.jp/

掲載号

Web Designing 2016年3月号

Web Designing 2016年3月号

2016年2月18日発売 本誌:1,559円(税込) / PDF版:1,222円(税込)

デジタル時代の「リピーター&ファンを生む」新法則/SimilarWeb活用講座

サンプルデータはこちらから

■ 特集:デジタル時代の「リピーター&ファンを生む」新法則
 「また、このサイトに来てしまった!」には理由がある

「自社サービスのリピーターを増やしたい!」「自社商品のファンを生み出したい!」というのは、売上を安定して伸ばすためには欠かせない命題です。しかし、スマートフォンの普及でネットが当たり前になった「デジタル時代」の消費者動向は、以前とは明らかに変わってきています。では、この時代にリピーターやファンを生み出すには、どのようなポイントを押さえて施策を打っていく必要があるのでしょうか。リピーターやファンを生むために必要な「エンゲージメント」の仕組みから、実際の成功事例の考察まで、さまざまな切り口の「法則」を紹介していきます。

 Part1 デジタルサービスにおけるエンゲージメント向上とは
  なぜエンゲージメントを高めるのか?
  「エンゲージメントの高い顧客=リピーター」ではない
  顧客がそのサービスを仕方なく使っている「悪い売上」
  単なるリピーターではなく、ファンをつくる
  顧客からの愛着度を高めるためには?
  よい体験を生むための重要なポイント
  エンゲージメントを高める上での指標
 Part2 成功の理由はコレだ! エンゲージメント四賢人の事例分析
  Case Study 01 斬新なポイント制度でユーザーを巻き込むタイムズカープラスの戦略
  Case Study 02 LOHACOだからできるメーカーの垣根を越えた販売
  Case Study 03 顧客満足度を高め継続性を促進するOisixのECショップ戦略
  Case Study 04 ワイン特有の悩みを自社の強みで解決する京橋ワイン
  Case Study 05 稼働率の上昇プロセスを重視するスーパーホテルの徹底的“おもてなし”

■ 集中企画:業界潮流、競合動向もまるわかり!「SimilarWeb」活用講座
 競合Webサイトを徹底分析して、自社Webサイトの運用・施策を改善しよう

Webサイトの運用では、アクセス解析と時流に即した改善は成果を上げるために必須のポイントです。また、自社Webサイトの分析と同時に、競合他社や市場トレンドの動向についても目を配る必要があります。ここでは、そうした分析を効率的に行える「Web競合解析ツール」の効果的な活用法について紹介します。

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
PRIUS! IMPOSSIBLE GIRLS/Act of love/SHIFTBRAIN.Inc./Google Performing Arts/NHKプロフェッショナル「私の流儀」公式アプリ/沖縄ラリー 360°/ミュージックビデオ「愛が降る街」/aircord/オカモト「LOVERS 研究所」/Web体操第一/ワコール リボンブラ

■ ビジネス・EC
 □ ECサイト業界研究
 LTV(顧客生涯価値)――顧客エンゲージメントを高め、収益につなげる効果指標

 □ 月刊店舗設計
 イスム:新しい価値観の提案で市場を作り出す

 □ モバイルビジネス最前線
 TimeTree:今さら共有カレンダー? その成功に見る「チーム文化醸成」というグロースハック

 □ 知的財産権にまつわるエトセトラ
 人工知能に著作権は認められるか?

 □ Bay Area Startup News
 シンプルを極めた「Amazon Dashボタン」。IoT製品の成功は“一つにつき一つ”

■ マーケティング・プロモーション
 □ サイト改善基礎講座
 コンバージョン率改善の近道は意思決定ボタンにあり

 □ ハギハラ総研
 増えつづける「モバイルオンリー」ユーザー

 □ デジタルプロモーションの舞台裏
 りんご農家と歯科医院のタッグが生んだ、新しいりんご販売のカタチ

 □ 行動デザイン塾
 ビギナーにこそ“行動の継続化”を働きかけよう

 □ 課題解決のためのUI実装講座
 コンバージョン率アップを目指せ! ユーザビリティの高い入力フォーム

 □ 解析ツールの読み方・活かし方
 来店につながる指標を見抜く! 集客型Webサイトにおけるアクセス解析データの活用

■ クリエイティブ・コラム
 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
 [バズ施策]ユーモア倍返し:Burglars Just Want Tacos 眞鍋海里
 [デジタルプロモーション] LOVERS 研究所:コンドーム vs. 現代日本 築地 Roy 良
 [Webサービス]桃の花は咲くのか:Peach 土屋尚史
 [IoT]日常系センシング:Nima 神谷憲司

 □ モノを生むカイシャ
 ケイズデザインラボ:挑戦する人たちがその門を叩くカイシャ!

 □ 清水幹太の「Question the World」
 レイ・イナモト:「広告界のイチロー」の楽しい性癖

 □ ツクルヒト
 科学の力で未来の錨を引き上げる:増田光弘(錨研究者)

 □ 最果タヒの「詩句ハック」
 第21回 詩の着せ替え

 □ デザインにできることMonologue
 Vol.146 デザイニング・プログラム

 □ エキソニモのドーン・オブ・ザ・ボット
 信用も権力も分散型データベースが管理する、そんな未来はディストピアか優しい世界か?

■ インフォメーション
 □ Topics
 VIEWS/東京ビジネスデザインアワード 2016/mamorino Watch/「Awwwardsカンファレンス」特別レポート

 □ Movement&News
 世界200万人が熱狂したゲームの展覧会「GAME ON」/オンラインマガジン「SHIFT」が主催する「DOTMOV FESTIVAL 2016」作品募集/村上隆のスーパーフラット・コレクション展 ほか
 東京ミッドタウンで「デジタルメディア展」開催/Twitterが会話型広告機能を追加/Facebookがライブ動画機能をリリース/UX/UI デザインを本気で学ぶオンラインスクール「Delight U」開講 ほか

編集部よりお詫びと訂正のお知らせ

本誌目次、WD SELECTIONにおきまして誤記がありました。お詫びするとともに、以下に正しい表記を掲載いたします。

aircord

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています