ユービジョン福田様
はじめまして。izattiこと井澤と申します。
ファーストビューのデザイン案を作成いたしましたので、提案させて頂きます。
お手数ですがご確認のほど、宜しくお願い致します。
※ワイヤーに記載の無い要素を幾つか足しております…下記に記載した意図により追加しておりますのでご確認頂けたらと思います。
===
○コンセプト
申込促進用のLPであり、コーポレートサイトでもあるとのことでしたので、
ワイヤーには無い要素として、ヘッダーにメニューを配置する様にさせていただきました。
コーポレートサイトでもあるため、お客様はサービスだけでなく、会社概要などの企業情報を見に来るページとしても機能する必要があると考えており、ヘッダーからいつでも会社概要やサービスにアクセスできる様にさせていただきました。
またヘッダーの開発方針にもよりますが、下記のサンプルの様にヘッダーが追従するUIをとっても良いかと考えております。
https://marvelapp.com/9a6d66
Passは izatti です
ファーストビューの高さは768pxを考えております。
ファーストビューに「カンタン無料診断」ボタンが入る構成としております。
参考:http://webseeya.com/2015/05/25/display-resolution-2015/
===
○フォームについて
「カンタン無料診断」ボタンを押下した際にフォームが開く仕様とのことでしたが、
フォームの前にアピール枠を追加させていただきました。
以前関わった案件で、「フォームを表示するだけ」より「アピールポイント」を追記してからフォームを見せた場合のコンバージョン率が高かった為です。
===
○フォームの表示要素の順番
ワイヤーフレームから少し変更しております。
お客様には先に無料診断に必要な情報を入れていただき、その後にお客様自身の個人情報を入れる構成にする為順番を入れ替えました。
これも以前関わった案件で、サービスで取得した方が良い情報を先に入れ、あとから個人情報を入れる構成の方がコンバージョン率が高かったためです。
また、入力必須の項目の入力フィールドは色を変えた方が「必須」だというのがユーザーに伝わりやすくするため着色しております。
※開発方針によるかと思いますが、ユーザーが入力したら通常のカラーに戻るイメージです
問い合わせボタンの下には電話番号を追加させていただきました。
こちらも関わった案件の知見ですが、
フォームを開いた際に、フォームの内容を見て電話に切り替えをされるお客様が一定数おり、すぐに電話できる様に追加しております。
※御社が電話受付を推奨していない(運用負荷につながるため)などあれば、削除させて頂きます
===
○フッター
まだ項目が確定していないかと思いますが、サイト全体のイメージを共有したく追加しております。
【申し送り事項】
・画像に記載のある「Adobe Stock」はサンプル画像の為表示されております。採用頂いた際には画像のライセンス取得し、正規化致します
・フッターもイメージ共有用のため、サンプルとなっております
以上となります。
ワイヤーに無い要素を生意気にも足してしまっておりますが、ワイヤー通りにとのことであれば申して頂けたらと思います。
また、気になる点等ございましたらメッセージを頂けたらと思います。
メンバーからのコメント
福田様
お世話になっております。
2015/09/12にご指摘いただきました部分の修正対応を反映致しました。
【修正箇所】
・アピール枠の見出し文言の修正
・フォームの入力項目をワイヤーに合わせる修正
・フォームの入力済 / 未入力の際のデザインパーツ追加
以上、ご確認の程宜しくお願い致します。