媒体サービスに不可欠な詳細ページの正しい情報配置について考えてみた

LITALICO Advent Calendar 22日目の記事です。
弊社はデザイナーが少ないので、エンジニアのカレンダーに紛れて今年も参加しています！

この記事では、食べログやAirbnbのように利用者と店舗・施設を繋ぐマッチングサービスに必要とされる詳細ページがどのように情報配置をするべきか分析したことを綴っています。

ここでいう詳細ページとは、各店舗・各施設の情報が細かく記されているページを指しています。

各エリアごとに切り分け、具体的な掲載情報とともにその特徴をご紹介できればと思います。

ラインを決めないと広範囲にまで及ぶため、今回は店舗・施設・物件など建物を媒体としたサービスにフォーカスしています。

前置き

調査対象

ご紹介するにあたってまず今回の調査対象としたサービスをご紹介します。

□飲食
　食べログ / Retty
□宿泊
　Airbnb / 一休
□賃貸
　SUUMO / LIFULL HOME'S
□ウエディング
　ゼクシィ / みんなのウエディング
□美容
　ホットペッパービューティー
□レンタルスペース
　スペースマーケット
→合計10サービス

みなさんのご存知のようなサービスを対象にさせていただきました。

また今回はWebサービス側で調査しています。
自分がそもそもWebサービスに関わっていることと、建物系の媒体サービスはSEO流入からダイレクトにマッチングが見込めるため、アプリよりまずWebからリリースされるケースが多いと思ったためです。

エリア構成

詳細ページは他のページに比べ情報量が多いのですが、切り分けて分類できるなと感じました。ですので、各エリアごとにご紹介したいと思います。

各エリアに必要な情報に関して先に調査結果をいうとこんな感じです。

□ファーストエリア
・何のページかを示す
・端的に表せる強み・特徴
・ターゲットの明示
□セカンドエリア
・どんな場所か（what）
・この場所だからこその魅力は何か（value）
□サードエリア
・プラスアルファとなる一押し
・問い合わせる動機を生み出す「選択型CV導線」
□レコメンドエリア
・受動的に見つけられる他の場所の提案
・能動的に探せるエリア検索

では各エリアごとに詳しく確認していきましょう。

ファーストエリア

【具体的な掲載情報】
□必須情報
・名称
・トップ画像
・場所/アクセス
□端的に表せる強み
・レビュー数＆五段階評価（食べログ/Airbnb/一休/スペースマーケット）
・称号・実績（食べログ/Airbnb）
・Gotoトラベル対象（食べログ/一休）
□端的に表せる特徴
・キャッチコピー、メッセージ（SUUMO/LIFULLHOME'S）
・価格帯（食べログ/ゼクシィ/みんなのウエディング）
・時間あたりの価格（スペースマーケット）
・休日情報（食べログ/Retty）
・賃料（SUUMO/LIFULLHOME'S）
・本日の空室状況（ホットペッパービューティー）
□その他
・お気に入り機能
・シェア機能

ファーストビューと呼ばれるユーザーが遷移後最初に目にする情報です。

読み進めてもらうために直帰はしてほしくないため直感的にこのページは読む価値があると示せるものが詰まっている印象があります。

どのサービスもトップ画像が存在しますが、カルーセルで複数設定されており、写真もいろんなタイプを織り交ぜ、全体感を把握できるようなラインナップになっている印象です。

また、ターゲットが誰かを指し示すために「賃料」や「価格帯」などを先に表示させている印象もあります。

「端的に表せる強み」とまとめましたが、このエリアの中で競合優位性を示せる情報はユーザーの意思決定のしやすさを手助けしてくれるなと感じました。

セカンドエリア

【具体的な掲載情報】
□概要説明文
（食べログ/Retty/Airbnb/一休_PCのみ/SUUMO/ゼクシィ/ホットペッパービューティー/スペースマーケット）
□設備情報
・設備・サービスリスト（LIFULLHOME'S/みんなのウエディング/スペースマーケット）
・アメニティ（Airbnb）
・特徴ピックアップ（SUUMO）
□基礎情報
（SUUMO/LIFULLHOME'S）
□こだわり情報
・お店のこだわり（食べログ）
・おすすめメニュー（Retty）
・サロンのこだわり（ホットペッパービューティー）
・物件のこだわり（LIFULLHOME'S）
・みんなに選ばれる3つの理由（みんなのウエディング）

ファーストエリアを読み進めたユーザーは、少なからず良さそうだなと関心を持ち始めている状態だと思います。

そんなユーザーに次に伝える情報は大きく2つあるように感じました。

①どんな場所か（what）

まずは、とにかく概要説明文を入れているサービスが多かったですね。どんなコンセプトでやっているかや経営者の思い、扱っている品の説明など。また、宿泊施設や賃貸とかだと部屋にどんな物が備わっているのかがアイコンなどを使ってとてもわかりやすくまとめられていました。

②この場所だからこその魅力は何か（value）

その上でさらに他にはないこの場所の魅力情報を掲載しているサービスが半数ほどありました。食べログやみんなのウエディングなど届けたい情報を３つに絞って訴求されているケースが多く、入稿のしやすい設計ともなっています。

読み進める上でもこの流れは非常に読みやすいなと思いました。

サードエリア

【具体的な掲載情報】
□雰囲気
・ギャラリー一覧（食べログ/Retty/一休/ゼクシィ）
・みんなの投稿写真（みんなのウエディング）
・パノラマ（SUUMO）
・部屋の特徴（SUUMO）
□客観的な評価
・レビュー（食べログ/Airbnb/一休/ゼクシィ/みんなのウエディング/ホットペッパービューティー/スペースマーケット）
・みんなのおすすめ（Retty）
・体験者レポート（ゼクシィ）
・みんなの投稿（みんなのウエディング）
・費用・見積もり金額（みんなのウエディング）
□スタッフ情報
・スタッフコメント（LIFULLHOMES）
・スタイリスト（ホットペッパービューティー）
・ホスト情報（Airbnb/スペースマーケット）
□基本情報
（LIFULLHOMES/ホットペッパービューティー/食べログ/Retty）
□その他
・周辺環境（SUUMO/LIFULLHOMES）
・ヘアスタイル（ホットペッパービューティー）
・ハウスルール、キャンセルポリシー（Airbnb）
＝＝＝＝＝＝＝＝＝＝＝＝
□選択型CV導線
・コース料理（食べログ/Retty）
・宿泊プラン（一休）
・お部屋リスト（一休）
・日程（Airbnb）
・フェア・イベント（ゼクシィ/みんなのウエディング）
・料金プラン（みんなのウエディング/スペースマーケット）
・クーポン（ホットペッパービューティー）

セカンドエリアによって店舗理解が進んだところで次に届ける情報は大きく2つです。

①プラスアルファとなる一押し

このエリアではその場所に行くイメージや行く価値があると信頼できる情報が求められます。

例えば、写真一覧で細部まで店舗の在り方を届けたり、客観的な評価によって自分の選択が正しいかどうか判断する材料を与えています。

写真も掲載方法が2種類あって、店舗側が自ら掲載するパターンと利用者が投稿できるパターンがありました。前者は品質が高められ、後者はリアルな写真が見れるのでそれぞれにメリットがあります。

また、ホットペッパービューティーやAirbnbのような対人と接したり、私有地となる場所では、スタッフ情報があることも利用ハードルを大きく下げるポイントとなるイメージです。

②問い合わせる動機を生み出す「選択型CV導線」

もう１つ抑えておきたいのは、このページでユーザーにどうして欲しいかということ。結局その場所に訪れてもらいたいので、ユーザーの関心を引き出したタイミングでスムーズに利用へのアクション導線を提示する必要があります。

食べログのコース料理やゼクシィの様々なフェア開催など、利用の仕方に幅出しができる場合はこのように導線を複数用意するのはとても効果的な印象を感じました。

レコメンドエリア

【具体的な掲載情報】
□他の場所をおすすめ
・おすすめ（一休/SUUMO/LIFULLHOME'S/ゼクシィ）
・近くの場所（Airbnb）
・一緒に比較されている式場（みんなのウエディング）
・同じような検討をした人が見た他の場所（みんなのウエディング/スペースマーケット）
□記事導線
・お店紹介記事（食べログ）
・人気の特集（一休）
・関連記事（みんなのウエディング）
□ランキング
・周辺のお店ランキング（食べログ/みんなのウエディング）
□エリア検索
・近くのエリア・駅から探す（Retty/SUUMO/LIFULLHOME'S/ゼクシィ/みんなのウエディング）
□その他
・近くの体験スポット（Airbnb）
・条件の似た施設を探すタブ（一休）

ここまでたどり着いたユーザーは、あと少し躊躇う何かがあるということでしょう。そこで離脱を迫るのではなく、もしかしたら他の店舗なら条件をクリアする可能性もあるため、近くの店舗を提案してあげるのが望ましいです。

上記は受動的に見つけさせるパターンですが、逆にユーザーが能動的に探せるようにエリア検索をここに設置しているサービスもあります。

ここでのポイントは出すタイミングを速すぎず遅すぎないこと。

まだメインコンテンツが続いている中でレコメンドする必要はないですが、下の方に行くと店舗情報など離脱の多いものが続く可能性があるためうまく回遊してもらうための設置が必要だなと思います。

CV導線

【具体的な設置場所】
・コンテンツ内
・フローティングボタン

【具体的な掲載情報】
・電話で問い合わせ
・予約する
・空きを確認する
・カレンダーから日程選択
・見学予約
・お問い合わせ（選択式）
具体例）「最新の空室状況を知りたい」「実際に見学したい」など
・不動産会社に相談

最後にエリアから外れてはいますが欠かせない情報を紹介します。

サードエリアで「選択型CV導線」を紹介しましたが、ユーザーにとってほしいアクションへ促すための導線が詳細ページには至る所に設置されています。

コンテンツ内に設置されているCV導線に関しては設置場所が2通りあって、まず情報同士の境界線に置かれている場合と、情報の関連度が高いタイミングで置かれている場合です。

例えば前者でいうと、詳細ページをエリアごとに分類しましたがその情報が切り替わるタイミングなどに設置されてたりします。
後者の場合は、SUUMOとかだと家賃情報のすぐ横に「初期費用を知りたい」という問い合わせ導線が置かれてたりします。

ユーザーの利用に対するモチベーションが引き上がったタイミングですかさず差し込んでいる印象です。

また、賃貸系やブライダル系など利用ハードルが高い店舗は、少しでもハードルを下げるために気軽に問い合わせれるような導線も用意している印象です。

SUUMOの場合、問い合わせたい内容を先にこのページで見せてしまって、自分も問い合わせていいんだと思わせるような導線が用意されています。

□問い合わせ内容の選択肢
最新の空室状況を知りたい
実際に見学したい
詳しく教えて欲しい
初期費用について知りたい

こういったちょっとした配慮でCVRが大きく変化することもあるため、この辺りはPDCAが回されている印象があり、とても参考になります。

まとめ

以上一通り抑えておくべきポイントをご紹介しました。

大枠の流れはどのサービスも同じような形で構成されています。あとはユーザーのターゲットニーズに合わせて最適な配置が決められている感じでしょう。

今回は店舗型サービスに焦点を当てましたが、求人媒体系やECサイトなどでも考え方が応用できるのではないかと思っていますので参考にしてみてください。

明日はkazuisさんです。
ぜひチェックしてみてください！