スマホサイトのデザイン変更による効果検証 - かんたんWeb予約！マンスリーマンションならアットイン【公式】

ご無沙汰しております。
アットインの社内SE、webの中の人、杉田です。
アットインは名古屋を中心とした東海エリアにてウィークリーマンション、マンスリーマンションを運営している会社です。
そんなアットインですが、顧客開拓はどのようなことをしているかご存知でしょうか。
 
 
実は、顧客開拓はwebのみ！なんです。
この話をすると、少々驚かれることがありますが、本当の話です。
 
アットインはweb集客をベースに、その商談やフォロー、法人営業対応など、案件に応じて対応窓口が異なりますが、集客はweb一本です。
そんなwebサイトなので、当然運用を続けるだけでなく、サイト効率化が肝心要の施策方針となります。
 
先日スマホ向けのサイトにて、物件詳細画面のデザインを変更しました。
これはスマホサイトでのコンバージョン率(CVR)がPCサイトに比べて低く、且つ物件詳細ページから問い合わせフォームへの流れが悪いと判断したためです。
 

ファーストビュー

もともとのデザインはこちら。

ヘッダから物件に関する概要、主要な設備や環境、物件写真と続きます。
決して悪いデザインではありません。
配置も見やすいし、カラーもメリハリが効いているし、アイキャッチポイントも訴求箇所に集まっています。
これを、杉田はブラッシュアップしました。

これが新デザイン。
ページを開いた瞬間に、しっかりと画像全体を目視できるようにするため、主要な設備や環境のアイコンはヘッダから下げました。
また、背景色も白色でしたが、これをベージュグレーにすることで、背景と画像の境界線を明確にしました。
フッタ箇所のボタンも問い合わせフォームと電話のサイズバランスを調整しています。
併せてボタンテキストも「お問い合わせ」から「空室確認/予約申し込み」と明確にしました。
 

画像につづいて

続いてはファーストビューで画像を見ていただいた続きとなります。
今まではこちら

SNSボタンがあり、その下に物件に関する基本情報が閲覧できます。
ここにも手を加えてみました。

大きな違いとして目に入るのは、物件画像下に問い合わせボタンを追加したということですね。
続いてヘッダ箇所にあった主要な設備や環境のアイコンは基本情報内に移動しています。
また、最寄り駅は近い順に10件の表示がされていましたが、これを実用上十分と思われる3件まで減らし、路線名を追記しています。
 

基本情報枠の内部

住所の表示箇所ですが、ここはタップすると地図ページへ遷移するようになっていました。
これを

住所表記のあとに「MAP」と明示することで、地図を見たい方へのアクセシビリティの向上を狙っています。
また、見やすくするために郵便番号の後ろで改行していることも細かいですが、見やすくする工夫となります。
 
 
さらにその下にはより詳細な設備情報がアコーディオンで表示されますが、この部分のアコーディオン動作ボタンの色をオレンジからグレーに変更し、「続きを見る」とテキストを追加しています。

これはその下部に追加した「空室確認・予約申し込み」ボタンに視線を落とすために行っています。

 
 

価格表記部分

価格表記方法に変更は加えませんでした。

これは現状で十分見やすいと判断したことによります。
ただし、価格表記部分下部には「空室確認・予約申し込み」ボタンを追加しています。

 

総括として

いかがでしたでしょうか。
言われてみれば変わっている…！ なんて箇所もあったかもしれません。
これらのデザイン変更により、物件詳細ページから問い合わせフォームへの遷移は1.8倍に膨らみました。
意識的か無意識的かは別として、お客様がwebを閲覧するうえでより使いやすいサイト構築にむけ、今後も精進したいと思います。