Photorait トップページリニューアル

「Photorait」はフォトウエディングの決め手が見つかるクチコミサイトです。スタジオの所在地やウエディングフォトのこだわりなどから、自分が撮りたいフォトが撮れるフォトスタジオを見つけることができます。
2020年から新型コロナウイルスが世界中で流行し、ウエディングフォトに対するユーザーの価値観が変わり、多様なニーズに応えることが必要となったため、トップページをリニューアルすることにしました。

考えのデザイン

• 課題新型コロナウイルスによる影響で、サイトに訪れるユーザーの目的が変わった

  今までのユーザーは、「結婚式の前撮りの撮影」を目的としてサイトに訪問し、自分の条件にぴったり合うフォトスタジオを探していました。しかし、新型コロナウイルスの影響で、「挙式なしでフォトウエディングのみ」の選択をする方が増え、フォトウエディングに求めることや、フォトウエディング自体の存在意義が、ユーザーの中で変わっていきました。ユーザーの半分は「挙式をするか、それともフォトウエディングのみにするか」という考え方になり、今まで「結婚式のプラスアルファ」的存在だったフォトウエディングは、結婚式と同等という存在に変わりました。その変化に伴い、一部のフォトスタジオは、フォトウエディングの撮影中に挙式が出来る「挙式付きプラン」や会食ができる「会食付きプラン」等の新しいプランを企画するようになりました。
  より多様化するフォトウエディングのニーズに対して、ユーザーが求めている情報にすぐに出会えるように、トップページのコンテンツを見直し、リデザインする必要がありました。

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

1. Process01：社会のニーズを分析する

   まず、コロナによる市場の変化とユーザーの変化をSWOT分析とPEST分析で確認し、新しい社会ニーズを捉えることにしました。SWOT分析については「強み×機会」と、SWOT分析の4つの項目をそれぞれ掛け合わせ、新たな戦略も考えるようにしました。
   また、各々の分析結果を参考に「結婚式やフォトウエディングへの影響」「ユーザーへの影響」「クライアントへの影響」についても考え、「Photoraitが提供出来ること」を洗い出ししました。

   • SWOT分析シート

     

     Scroll

   • PEST分析シート

     

     Scroll

   • Photoraitが提供できること

     

     Scroll

2. Process02：ユーザーのニーズを分析し、ペルソナを作る

   社会の変化とともに変わったユーザーのニーズを分析し、そのニーズに合ったペルソナを作成しました。今回は0から作るのではなく、既にあるペルソナを見直すような形で再作成をしました。
   ペルソナの作成についてはこちらの記事に書いてありますため、ご覧ください。

3. Process03：ABテストでニーズを測り、ニーズに沿ったコンテンツへの導線を設計する

   フォトウエディングに対するユーザーのニーズは、「フォトウエディングの中で挙式等や会食も済ませたいユーザー」「結婚式は考えておらず、フォトウエディングのみの結婚のカタチを望んでいるユーザー」「結婚式の前撮りを目的としているユーザー」と変化していることが分かりました。この3つパターンは似ているようで、フォトウエディングに求めているものや、サイト内で気になるコンテンツ等が変わってきます。
   この3つのユーザーパターンを踏まえた上で、ABテストを行う際のデザインパターンは以下4つにしました。

   • パターンA：ウエディングフォト検討中期〜後期層向け / こだわり検索を目立たせる
   • パターンB：ウエディングフォト検討中期〜後期層向け / プラン検索を目立たせる
   • パターンC：ウエディングフォト検討初期層向け / クオリティの高いピックアップ写真と新着クチコミを表示
   • パターンD：既存パターンのデザインアップデート

   テスト期間は4週間を想定し、「直帰率」「離脱率」「回遊数(ページ/セッション)」「トップページ経由のCVR」「トップページ経由の各コンテンツのPV割合」の5つの指標で比較するようにしました。

   • パターンA

     

     Scroll

   • パターンB

     

     Scroll

   • パターンC

     

     Scroll

   • パターンD

     

     Scroll

   ABテストの結果としては、コンバージョン率が一番高いもの、また、エリア検索やこだわり検索のみならずその他の検索軸もしっかりと利用されていたことから、「パターンA：ウエディングフォト検討中期〜後期層向け / エリア検索とこだわり検索を目立たせる」を採用することにしました。パターンAは他のパターンと比べると、離脱率が一番高いとも捉えられますが、こちらは「ページ全体の長さが他のパターンと比べて長いため、離脱率は高い」と想定しました。

   • トップページレイアウト別コンバージョン率

     

     Scroll

   • トップページから各検索への遷移割合

     

     Scroll

カタチのデザイン

「知りたい情報が見つかる機能性と、フォトウエディングにトキめくきゅんポイントを共存させる」をデザインコンセプトとして、「ユーザーには“テキストではなく写真で伝える”」にこだわりながらデザインをしました。「フォトウエディングへの憧れ」を醸成するために、トップページでフォトスタジオが実際に撮ったウエディングフォトを並べて配置し、フォトウエディングの魅力が伝わるようにしました。
また、サイト内には5つの検索コンテンツがありますが、使われている機能と使われていない機能がありました。今回のトップページのリニューアルでは、ユーザーが「気づいたら使っていた！」となるくらい自然な導線を設計し、検索コンテンツの偏りを無くし、ユーザーが本当に欲しい情報に出会えるようにしました。

• PC画面

  

  Scroll

• スマホ画面

  

  Scroll

案件を終えて

この案件は、私が入社する前のカジュアル面談で、ディレクターが「いま一番やりたいこと」として挙げていた案件になります。まだ、他社の人間だった私に、ディレクターが面談中にボソッと呟いた「トップページ、もっとおしゃれにしたいよね」という一言が、ずーっと忘れられませんでした。そのため、この案件を担当することが決まった時は少し特別な想いがありました。
トップページという「サイトの顔」となる部分のデザインのフルリニューアル、また、ABテストを行う案件はデザイナー人生の中で初めてでした。
トップページのフルリニューアルでは、エンジニアとディレクターとのコミュニケーション、認識合わせが大事だと思いましたため、編集中のデザインファイルをディレクターとエンジニアと共有し、デザイナーが作成/編集しているデザインをリアルタイムで見れるようにし、自分たちが形にしたい世界観を、関わる人全員が常に合わせられるような環境を作りました。そのため、作成途中での大きな変更等は無く、スムーズに開発を進めることができました。
ABテストについては、担当エンジニアも未経験だったため、社内のABテスト経験者の方に相談をさせていただいたり、過去の事例を調べることで知識を深め、「今回の案件の場合はどう進めていくといいのか」を一緒に考えていきました。
ABテストの結果から、「デザインが変わることでユーザーのアクションが変わる」ということを肌で感じた、「デザインの力」や「デザイナーとしての責任」を、改めて考えさせられた案件となりました。スキル等の経験はもちろんのこと、デザイナーとしての成長につながる案件となりました。

作品一覧に戻る