コンペに参加させていただきますinshuu(インシュウ)の岡村です。 下記URLより、ページ全体をコーディングした実際の見えに近い状態でweb上でご確認いただけます。 ご検討の際はぜひ下記よりご参照いただければ幸いです。 ▼デザインプレビュー https://inshuu.jp/test/crowdworks/231015_1/ ※コーディングはしていませんのでデザイン画像一枚が表示されている状態です。一般的なノートパソコンで見て等倍の見えとなります。 -------------------------------------- ~デザインにつきましてのご説明~ ■デザインは、オレンジをベースに、シンプルにわかりやすく親切に、男女共に受け入れられるデザインにしています。フォントサイズも大き目にして、視力や年代を問わずご利用いただきやすいフォームとなるようにしました。 ■入力項目が多いので、ユーザーが迷わず、飽きず(途中の離脱防止)、スムーズに入力を進めることができるように意識しましました。 ■具体的には、下記の大きな入力のまとまりの上で、アリアちゃんが都度、入力補助として発言(吹き出し)でしているような形で統一しています。 ①初めてご利用の方 ②お振込先の情報 ③使用カード名称 アリアちゃんにサポート(アシスト)してもらいながら、 その通りに入力していっているうちに自然と適格に入力が進んでいく、 というような流れをイメージして作っています。(わかりやすいアシストでユーザーの入力負担を考慮) ■十分な補足説明が必要な下記のコンテンツについては、ユーザーが飽きずに見て理解できるように、意識して作っています。 ・IDセルフィー ・身分証明書として有効なもの ■最後に位置する、さらなる流入を誘導するためのコンバージョンポイント「クレジットカードの枠が余っていれば~...」につきましては、効果を最大限にするため、入力確認ボタンの真上に配置しています。 理由といたしまして、ユーザーは長い入力に疲れ、確認ボタンまで到達した時点ですぐボタンを押す可能性が高いと思われます。 つまり、確認ボタンより下にあると重要ポイントであるにも関わらずユーザーにスルーしてしまう可能性が高いと思われます。 このような場合のリスクヘッジとして、ユーザーがいちばん慎重になる「入力確認ボタン」の"直前"に配置することで、ユーザーに必ず読んでもらえるように誘導しています。 ■念のため、実装(コーディング)工程での負担を考慮し、デザイン段階で実装に影響(負担)が生じる可能性を含むもの(例:自動チェック、ステップ表示など実装時の工数、それに伴う作業価格の変動に大きく関わってくるデザイン)は入れないように考慮し、作成しております。 【特記事項】 ・デザインデータはXDでお作りいたします。 宜しくお願い致します。 -------------------------------------- inshuu(インシュウ) 岡村
メンバーからのコメント
コンペに参加させていただきますinshuu(インシュウ)の岡村です。
下記URLより、ページ全体をコーディングした実際の見えに近い状態でweb上でご確認いただけます。
ご検討の際はぜひ下記よりご参照いただければ幸いです。
▼デザインプレビュー
https://inshuu.jp/test/crowdworks/231015_1/
※コーディングはしていませんのでデザイン画像一枚が表示されている状態です。一般的なノートパソコンで見て等倍の見えとなります。
--------------------------------------
~デザインにつきましてのご説明~
■デザインは、オレンジをベースに、シンプルにわかりやすく親切に、男女共に受け入れられるデザインにしています。フォントサイズも大き目にして、視力や年代を問わずご利用いただきやすいフォームとなるようにしました。
■入力項目が多いので、ユーザーが迷わず、飽きず(途中の離脱防止)、スムーズに入力を進めることができるように意識しましました。
■具体的には、下記の大きな入力のまとまりの上で、アリアちゃんが都度、入力補助として発言(吹き出し)でしているような形で統一しています。
①初めてご利用の方
②お振込先の情報
③使用カード名称
アリアちゃんにサポート(アシスト)してもらいながら、
その通りに入力していっているうちに自然と適格に入力が進んでいく、
というような流れをイメージして作っています。(わかりやすいアシストでユーザーの入力負担を考慮)
■十分な補足説明が必要な下記のコンテンツについては、ユーザーが飽きずに見て理解できるように、意識して作っています。
・IDセルフィー
・身分証明書として有効なもの
■最後に位置する、さらなる流入を誘導するためのコンバージョンポイント「クレジットカードの枠が余っていれば~...」につきましては、効果を最大限にするため、入力確認ボタンの真上に配置しています。
理由といたしまして、ユーザーは長い入力に疲れ、確認ボタンまで到達した時点ですぐボタンを押す可能性が高いと思われます。
つまり、確認ボタンより下にあると重要ポイントであるにも関わらずユーザーにスルーしてしまう可能性が高いと思われます。
このような場合のリスクヘッジとして、ユーザーがいちばん慎重になる「入力確認ボタン」の"直前"に配置することで、ユーザーに必ず読んでもらえるように誘導しています。
■念のため、実装(コーディング)工程での負担を考慮し、デザイン段階で実装に影響(負担)が生じる可能性を含むもの(例:自動チェック、ステップ表示など実装時の工数、それに伴う作業価格の変動に大きく関わってくるデザイン)は入れないように考慮し、作成しております。
【特記事項】
・デザインデータはXDでお作りいたします。
宜しくお願い致します。
--------------------------------------
inshuu(インシュウ)
岡村