Photorait スポット検索機能の作成

「Photorait」はフォトウエディングの決め手が見つかるクチコミサイトです。スタジオの所在地やウエディングフォトのこだわりなどから、自分が撮りたいフォトが撮れるフォトスタジオを見つけることができます。
今まではフォトスタジオの所在地からでしか検索することができませんでしたが、「ウエディングフォトを撮りたい場所から、自分にぴったりのフォトスタジオを探せる」という新しい検索機能「スポット検索」を作成しました。

担当
Webデザイン / UIデザイン / コーディング
工数
デザイン:5人日 / コーディング:8人日
作成日
2023/05/30

考えのデザイン

"考え"から"カタチ"へ

上記の課題をより深掘りするために、ユーザーとクライアントにインタビューをし、各々が求めていることの根本を見つけ出すことにしました。

  1. Process01:私たちが定義した課題の確認

    • ユーザーの課題を確認する

      まずは、自分たちが課題としていることが本当に正しいのかを検証するために、ユーザーインタビューとユーザーアンケートを行いました。ユーザーインタビューは、対象者を「フォトウエディングを半年以内に経験された方」と絞り、関東/関西/東海/九州/リゾートで撮影された方、各エリアで3人ずつの合計15人にインタビューすることにしました。

      ユーザーアンケートは、WeddingParkのサービスに登録している方で、過去にフォトウエディングを経験された方、500名を対象に行い、ユーザーインタビューに向けて作成した質問シートを元に、Googleフォームでアンケートフォームを作成しました。

      • ユーザーインタビューでの質問内容

        ユーザーインタビューでの質問内容のイメージ

        Scroll

    • クライアントの課題を確認する

      クライアントには「集客に関するアンケート」としてアンケートを送り、私たちが課題としてあげていた「ボーダーレスな集客」の需要を確かめることにしました。
      また、営業がクライアントとアポをする際に「ボーダーレスな集客」についての温度感を聞いていただくことで、リアルな声も集めました。

      • クライアントに向けて送ったアンケート

        クライアントに向けて送ったアンケートのイメージ

        Scroll

        Scroll

    ユーザーとクライアントに向けたインタビューとアンケートから、「自分たちが課題として定義していたものは、大きなズレは無い」ということが分かりました。また、ユーザーとクライアントから意見をいただくことで、自分達では気づくことが出来なかった新しい意見を頂くこともできました。

    • ユーザーの声:ドラマのロケ地や思い出の場所で撮影したかったので、撮影場所から探せると嬉しい
    • ユーザーの声:ロケーションから検索するというピンポイントでの探し方は、かなり検討が進んでいるユーザーになる
    • クライアントの声:地方クライアントに対する場所(地方)のPRにもなる
    • クライアントの声:撮影場所で検索をしてきても、季節や環境によっては理想の写真が撮れないこともあるため、注意書きは必要
  2. Process02:「最終的にどんなカタチにすることが良いのか」を考える

    次に、クライアントやユーザーの課題を解決するために最適な方法を考えました。

    アンケートやインタビューから、撮影場所から探したいユーザーは大きく2通りに分けることが出来、「有名な観光地で撮影したい」というユーザーと、「有名な場所ではないけど、二人の思い出の土地で撮影したい」というユーザーが居ることが分かりました。この2通りのユーザーの想いを叶える方法を3つ考えました。

    クライアント側については、「Photoaitを利用してくれている全てのスタジオが平等に他県のユーザーを呼び込める仕組みを作る」という方針を立て、この方針を大切にしながらクライアントの課題を解決する方法を考えました。
    現状のPhotoraitのページで、クライアントが自社スタジオについて一番ユーザーにPR出来るページは検索結果ページとなっているため、「検索結果ページに他県のものが表示されるような仕組みが出来るといい」と考えました。

    ユーザー側の課題とクライアント側の課題を一緒に叶える方法を模索し、スタジオの所在地を無視して撮影場所から探せる検索機能を作ることにしました。これにより、ユーザーは有名な観光地や自分たちにとって思い出の場所で撮影できるスタジオと出会え、クライアントは他県のユーザーにも自社スタジオを知ってもらえます。

    • 課題を解決する考え

      課題を解決する考えのイメージ

      Scroll

  3. Process03:「撮影場所から探せる検索機能」について考える

    「撮影場所から探せる検索機能」という今までPhotoraitに無かった新しい検索機能を作る決断は、本当に未知なるものでした。「この検索機能は本当に需要があるのか」「ユーザーの課題を叶えるのに相応しいのか」を確認する必要がありました。
    そのため、営業、エンジニア、デザイナー、ディレクターを含むチームPhotoraitで各々この検索機能について考えることにしました。

    まずは、自分たちが考えられる範囲でこの機能が実現した時のメリットとデメリットを洗い出してみました。

    • 「撮影場所から探せる検索機能」のメリットとデメリットを洗い出したシート

      「撮影場所から探せる検索機能」のメリットとデメリットを洗い出したシートのイメージ

      Scroll

    次に、職種ごとにチームを分け、各々にこの機能の実現に向けて宿題を課しました。
    営業チームは企画資料をもとに、クライアントに「撮影場所を提示することについて」や「この機能自体をどう思うか?」などをヒアリングをしました。
    エンジニア・デザイナーチームは「位置情報から探す」やAIタグ付けを実現するための方法と、Photoraitでこの機能を実現する際のUIを考えました。
    ディレクターチームはクライアントが入稿が簡単にできる管理画面の仕様と、撮影場所を掲載する際に必要なものを考えました。

    • 営業チームの宿題シート

      営業チームの宿題シートのイメージ

      Scroll

    • エンジニア・デザイナーチームの宿題シート

      エンジニア・デザイナーチームの宿題シートのイメージ

      Scroll

    • ディレクターチームの宿題シート

      ディレクターチームの宿題シートのイメージ

      Scroll

    • UI画面のユーザーフロー

      UI画面のユーザーフローのイメージ

      Scroll

  4. Process04:プロトタイプの作成と社内インタビュー

    クライアント側の懸念点等を踏まえたうえで、どんな見せ方がいいのかを探るために、簡単なプロトタイプを作成し、ブラッシュアップしていきました。また、完成したプロトタイプを社内の「これからフォトウエディングを予定している方」または「1年以内にフォトウエディングをされた方」に確認していただき、様々な意見を取り入れてブラッシュアップしていきました。

    • トップ画面のプロトタイプ

      トップ画面のプロトタイプのイメージ

      Scroll

    • ロケーション選択画面のプロトタイプ

      ロケーション選択画面のプロトタイプのイメージ

      Scroll

    • ロケーション詳細画面のプロトタイプ

      ロケーション詳細画面のプロトタイプのイメージ

      Scroll

カタチのデザイン

スポット検索は、サイト内の既存の検索コンテンツとは異なり、スタジオの所在地を軸としない、Photoraitには今まで無かった新しい検索機能になります。ユーザーは今まで「スタジオの探し方」が分からない中で、エリアやこだわりで絞っていた方が多くいらっしゃったと思いますが、このスポット検索では全国各地の知らなかったフォトスポット、フォトスタジオとの出会いを実現できます。「ここで撮ってみたい」というワクワクした気持ちを撮影に繋げる、今までのスタジオとの出会い方が変わる検索機能になります。

スポット検索:トップ画面

「撮影場所から探す方法」と「スタジオの雰囲気から探す方法」の二つの検索方法のタブ切り替えで表示することで、一つのページ内で多くの選択肢をユーザーに提案出来るようにしました。「建造物・文化財」や「街並」などのワードだけではイメージしにくいカテゴリーもありますが、実際に撮影したウエディングフォトを見せることで、「どんなウエディングフォトが撮影できるのか」が感覚的に伝わるデザインにしました。

  • PC画面

    デザインしたスポット検索のトップページのPC画面

    Scroll

  • スマホ画面

    デザインしたスポット検索のトップページのSP画面

    Scroll

スポット検索:ロケーション選択画面

トップ画面で「海・ビーチ」を選択した際に表示される画面になります。デザインをする上で大事にしたことは、「ウエディングフォトの魅力」「同じロケーションでも時間帯や環境によって雰囲気の違う写真が撮れるということ」「たくさんのロケーションとの出会い」の3つの項目でした。
PCのデザインについては、大きな画像と小さな画像を並べるようなデザインにし、「1枚のウエディングフォトの魅力」と、「同じロケーションでも条件次第で雰囲気が変わる」が伝わるデザインになる様にしました。
スマホのデザインでは「たくさんのロケーションとの出会い」を最優先し、ファーストビューで見れるロケーションの数をなるべく多くするようにしました。

  • PC画面

    デザインしたスポット検索のロケーション選択のPC画面

    Scroll

  • スマホ画面

    デザインしたスポット検索のロケーション選択のSP画面

    Scroll

スポット検索:ロケーション詳細画面

ロケーション選択画面で特定のロケーションを選んだ際に表示される画面になります。画面いっぱいに表示された20枚のウエディングフォトは、実際にそのロケーションで撮影された写真であり、スクロールをするたびにユーザーが「ウエディングフォトを撮りたい!」という気持ちが強くなるようにデザインをしました。
「ロケーション情報を見る」をクリックすると、GoogleMapと住所が表示されるようになっており、ロケーションの詳細情報をキャッチアップすることができ、その周辺がどんなエリアなのかも合わせて知ることができます。

  • PC画面

    デザインしたスポット検索のロケーション詳細のPC画面

    Scroll

  • スマホ画面

    デザインしたスポット検索のロケーション詳細のSP画面

    Scroll

スポット検索:フォトモーダル画面

ロケーション詳細画面で表示された画像を1枚クリックすると、選択した画像が大きく表示されます。

  • PC画面

    デザインしたスポット検索のフォトモーダルのPC画面

  • スマホ画面

    デザインしたスポット検索のフォトモーダルのSP画面

その他のデザイン案

ロケーション選択画面では、「検索窓とボタンの見せ方」と「画像の並べ方」に悩み、デザインパターンを作成しました。「"検索する"ボタンを押さなくても、エリアを選択すれば自動的にそのページに飛ぶ」という機能も提案しました。

  • デザイン案1

  • デザイン案2

PCのロケーション選択画面では、キービジュアルを大きく見せるデザインも提案しました。

  • デザイン案1

  • デザイン案2

ロケーション詳細画面は、ユーザーにとっての分かりやすさを考え、地図の情報を少し見せたようなデザインを提案しました。

  • デザイン案1

  • デザイン案2

案件を終えて

このスポット検索の企画段階からリリースをするまで、「私たちは機能を作っているんじゃない!世界を作っているんだ!」という言葉を、自分を含めたプロジェクトメンバーに伝えていました。「スポット検索という機能が生まれることで、ユーザーやクライアントの"フォトウエディングの世界"が広がる」と確信していましたし、世界を作るくらいの大規模な開発になると思ったからです。実際に構想からリリースまでは3年かかりました。
スポット検索は営業メンバーと開発メンバー(ディレクター / エンジニア / デザイナー)のチーム全員で作り上げた機能になります。作成したペーパープロトタイプをもとに営業がクライアントにヒアリングをし、開発陣はユーザーにヒアリングをし、それらのヒアリングをもとにブラッシュアップをしていきました。
当初、クライアントからは「うちだけで撮れる穴場のスポットが、他のスタジオにバレてしまう」などのマイナスなコメントをいただきました。ですが、ユーザーインタビューでは、スポット検索機能に対する期待の声が多く、チームメンバーで考えた結果、開発を進めることにしました。リリース後は、ヒアリング時にはスポット検索機能に対してマイナスなイメージを持っていたクライアントにも利用して頂ける機能となりました。

リリース後の効果