採用率との関係性
エディターのコンテキストメニューだけでもデザイン案を作成することはできますが、入力フォームのような難易度の高いページでは、エディターにJavaScriptを直接入力することで、コンテキストメニューでは再現できないデザイン案を作成することができます。
デザイン案の幅が広がると、チャレンジできるオファーやデザインのバリエーションが増え、着実に採用数も増やすことができます。
今回も皆さまのお力になれますよう、JavaScriptを使ったデザインについてご紹介して参ります。
JavaScriptについて
今回はJavaScriptの一種であるjQueryを使ってデザインいたします。
JavaScriptとjQueryの関係性や、jQueryの基礎知識についてはこちら「中級編 jQueryの書き方」をご参照ください。
※両表記による混同をふせぐため、本ページの表記はJavaScriptに統一いたします。
デザインポイント
- JavaScriptを使って「要素を移動、追加、複製」する
- コメント機能を使って「どこに何が書いてあるか」見やすくする
- 見やすいと「他のデザイン案に活用しやすい」「問題箇所を見つけやすい」
作成方法
テストオファー:練習用オファー④
テストページ:入力フォーム
デザイン変更:見学予約フォームの入力エリアを「見学希望日」「お客様情報」「希望条件」の3つに分ける
- 練習用オファー④の「デザイン案を作成する」ボタンをクリックしエディターを開く
- 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; }
- JavaScriptタブの1行目
- 上記コメントがデザインに反映されていることを確認
- 見学予約フォームのテーブルにクラス「table02」を追加
- テーブル「table02」に小見出し「お客様情報をご入力ください」を追加
- 小見出しとテーブルの間に余白を指定
- 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');
- JavaScriptタブの4行目
- 上記コメントがデザインに反映されていることを確認
- テーブル(table02)の前に新しいテーブル(table01)を追加
- 「見学希望日」「その他入力」項目をテーブル(table01)に移動
- 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');
- JavaScriptタブの14行目
- 上記コメントがデザインに反映されていることを確認
- テーブル(table02)の後ろに新しいテーブル(table03)を追加
- テーブル「table03」に小見出し「希望条件をご入力ください」を追加
- 「予算」「年収」「間取り」「面積」「人数」「入居時期」項目をテーブル(table03)に移動
- JavaScriptタブとCSSタブに下記コードを入力
- JavaScriptタブの32行目
// テーブル(table02)の後ろに申し込みボタンを複製 $('form.reserve .button').clone().insertAfter('form.reserve > table.table02');
- CSSタブの6行目
/* 複製した申し込みボタンに余白を指定 */ form.reserve .button { margin: 0 0 20px 0; }
- JavaScriptタブの32行目
- 上記コメントがデザインに反映されていることを確認
- テーブル(table02)の後ろに申し込みボタンを複製
- 複製した申し込みボタンに余白を指定
- 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; }
- JavaScriptタブの35行目
- 上記コメントがデザインに反映されていることを確認
- 必須項目のth要素にクラス「th-required」を追加
- 必須項目のth要素に背景色を指定
- 最後にプレビューを開き上記変更箇所を全て確認、問題なければデザイン案を投稿
0 コメント