採用率との関係性

エディターのコンテキストメニューだけでもデザイン案を作成することはできますが、入力フォームのような難易度の高いページでは、エディターにJavaScriptを直接入力することで、コンテキストメニューでは再現できないデザイン案を作成することができます。

デザイン案の幅が広がると、チャレンジできるオファーやデザインのバリエーションが増え、着実に採用数も増やすことができます。

今回も皆さまのお力になれますよう、JavaScriptを使ったデザインについてご紹介して参ります。

JavaScriptについて

今回はJavaScriptの一種であるjQueryを使ってデザインいたします。
JavaScriptとjQueryの関係性や、jQueryの基礎知識についてはこちら「中級編 jQueryの書き方」をご参照ください。

※両表記による混同をふせぐため、本ページの表記はJavaScriptに統一いたします。

デザインポイント

• JavaScriptを使って「要素を移動、追加、複製」する
• コメント機能を使って「どこに何が書いてあるか」見やすくする
  • 見やすいと「他のデザイン案に活用しやすい」「問題箇所を見つけやすい」

作成方法

テストオファー：練習用オファー④
テストページ：入力フォーム
デザイン変更：見学予約フォームの入力エリアを「見学希望日」「お客様情報」「希望条件」の3つに分ける

1. 練習用オファー④の「デザイン案を作成する」ボタンをクリックしエディターを開く
   
2. JavaScriptタブとCSSタブに下記コードを入力
   • JavaScriptタブの1行目
     

     //　見学予約フォームのテーブルにクラス「table02」を追加
     //　テーブル（table02）に小見出しを追加
     $('form.reserve > table').addClass('table02');
     $('.table02').before('<h3>お客様情報をご入力ください</h3>');

   • CSSタブの1行目
     

     /*　見学予約フォームの小見出しに余白を指定　*/
     form.reserve h3 {
       margin: 0 0 10px 0;
     }

3. 上記コメントがデザインに反映されていることを確認
   
   
   • 見学予約フォームのテーブルにクラス「table02」を追加
   • テーブル「table02」に小見出し「お客様情報をご入力ください」を追加
   • 小見出しとテーブルの間に余白を指定
4. JavaScriptタブに下記コードを入力
   • JavaScriptタブの4行目
     

     //　テーブル（table02）の前に新しいテーブル（table01）を追加
     //　「見学希望日」「その他入力」項目をテーブル（table01）に移動
     $('form.reserve > h3').before('<table class="table01"></table>');
     var $kibouday = $("#tomorrow").parent().parent();
     $kibouday.appendTo('table.table01');
     var $freeans = $("th:contains('その他、ご要望などご自由にお書きください')").parent();
     $freeans.appendTo('table.table01');

5. 上記コメントがデザインに反映されていることを確認
   
   
   • テーブル（table02）の前に新しいテーブル（table01）を追加
   • 「見学希望日」「その他入力」項目をテーブル（table01）に移動
6. JavaScriptタブに下記コードを入力
   • JavaScriptタブの14行目
     

     //　テーブル（table02）の後ろに新しいテーブル（table03）を追加
     //　新しいテーブル（table03）に小見出しを追加
     //　「予算」「年収」「間取り」「面積」「人数」「入居時期」項目をテーブル（table03）に移動
     $('form.reserve > table.table02').after('<table class="table03"></table>');
     $('.table03').before('<h3>希望条件をご入力ください</h3>');
     var $kibougaku = $("th:contains('ご希望の購入額（予算）は？')").parent();
     $kibougaku.appendTo('table.table03');
     var $nensyu = $("th:contains('世帯年収は？')").parent();
     $nensyu.appendTo('table.table03');
     var $kiboumadori = $("th:contains('ご希望の間取りは？')").parent();
     $kiboumadori.appendTo('table.table03');
     var $kiboumenseki = $("th:contains('ご希望の専有面積は？')").parent();
     $kiboumenseki.appendTo('table.table03');
     var $nyukyoyoteinum = $("th:contains('ご入居予定人数は？')").parent();
     $nyukyoyoteinum.appendTo('table.table03');
     var $yoteijiki = $("th:contains('ご入居希望時期は？')").parent();
     $yoteijiki.appendTo('table.table03');

7. 上記コメントがデザインに反映されていることを確認
   
   
   • テーブル（table02）の後ろに新しいテーブル（table03）を追加
   • テーブル「table03」に小見出し「希望条件をご入力ください」を追加
   • 「予算」「年収」「間取り」「面積」「人数」「入居時期」項目をテーブル（table03）に移動
8. JavaScriptタブとCSSタブに下記コードを入力
   • JavaScriptタブの32行目
     

     //　テーブル（table02）の後ろに申し込みボタンを複製
     $('form.reserve .button').clone().insertAfter('form.reserve > table.table02');

   • CSSタブの6行目
     

     /*　複製した申し込みボタンに余白を指定　*/
     form.reserve .button {
       margin: 0 0 20px 0;
     }

9. 上記コメントがデザインに反映されていることを確認
   
   
   • テーブル（table02）の後ろに申し込みボタンを複製
   • 複製した申し込みボタンに余白を指定
10. JavaScriptタブとCSSタブに下記コードを入力
    • JavaScriptタブの35行目
      

      //　必須項目のth要素にクラス「th-required」を追加
      var $required = $("form.reserve th .must").parent();
      $required.addClass('th-required');

    • CSSタブの11行目
      

      /*　必須項目のth要素に背景色を指定　*/
      .th-required {
        background: #fff1f1;
      }

11. 上記コメントがデザインに反映されていることを確認
    
    
    • 必須項目のth要素にクラス「th-required」を追加
    • 必須項目のth要素に背景色を指定
12. 最後にプレビューを開き上記変更箇所を全て確認、問題なければデザイン案を投稿
    

採用率を上げる・修正を減らすTips

• 第1弾「投稿前の検証URLチェックが、採用率を上げる!?」
• 第2弾「オリエンシートのレスポンシブ表記に迫る」
• 第3弾「気づくと築く、投稿前のプレビュー表示」
• 第4弾「ブラウザ幅のブレイクポイントとは!?」
• 第5弾「アコーディオン要素に潜む落とし穴」
• 第6弾「JSで差をつける入力フォーム改善」