Photorait CMSツール「Webつく」新規開発

「Photorait」はフォトウエディングの決め手が見つかるクチコミサイトです。スタジオの所在地やウエディングフォトのこだわりなどから、自分が撮りたいフォトが撮れるフォトスタジオを見つけることができます。
増加してきた個人フォトグラファーや、少数精鋭のフォトスタジオの集客の問題を解決するべく、HPが簡単に作れるCMSツール「Webつく」を作成しました。

担当
UIデザイン / Webデザイン / コーディング
工数
デザイン:4人日 / コーディング:10人日
作成日
2020/07/30

考えのデザイン

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

  1. Process01:ユーザーにとってのサイトの重要性を調査する

    まずはフォスタジオの公式サイトが、フォトウエディングを検討しているユーザーにとって本当に必要なものなのかを確かめるために、ユーザーアンケートを実施しました。今回は、「Photoraitを利用している方」ではなく、フォトウエディングを検討している全ての方を対象にアンケートに答えてくれる方を募集し、最終的に610件の回答を集めることができました。
    アンケート結果を確認すると、「フォトウエディング対する興味が生まれる場(きっかけ)はSNSが多く、スタジオ選びの際にPhotoraitを活用し、特定のフォトスタジオについてより知るために公式サイトを確認する」という一連の流れが在るようでした。また、結婚式ほどではありませんが、それなりに高額なフォトウエディングは、「失敗したくない」という気持ちから、情報収集を丁寧に行う方が多く、公式サイトも情報収集のためのツールとなっている印象でした。

    • ユーザーに回答してもらったアンケート

      ユーザーに回答してもらったアンケートのイメージ

      Scroll

      Scroll

  2. Process02:クライアントにサイト運用についてのインタビューを行う

    営業に協力してもらい、公式サイトの運用についての現状についてをインタビューさせていただきました。
    実際のクライアントの声を聞いてみると、サイトの必要性を感じている企業は多いものの、「社員をそこに充てることが出来ない」などのコスト面を心配する声や、「何から始めれば良いのか分からない」という声がありました。

    • クライアントにインタビューした質問事項

      クライアントにインタビューした質問事項のイメージ

      Scroll

  3. Process03:クライアントのタスクを分析する

    クライアントがサイト運用の中で抱えている「コスト」の部分をより知るために、営業メンバーを巻き込み、Photoraitに掲載をしているクライアントの入稿から実際の撮影、写真の引き渡しまでのタスク分析を行いました。

    • クライアントのタスクを分析したシート

      クライアントのタスクを分析したシートのイメージ

      Scroll

    次に、実際に作ったタスク分析シートを営業の商談に同行させていただき、クライアントに実際に見てもらうことで、分析内容と実際の業務にズレが無いかを確認していただきました。
    実際にクライアントの気持ちになって、タスクの整理をすることで、クライアントが言ってた「コストの不足」の意味を開発チーム全員が認識できるようになり、サービスの方向性にも繋げることが出来ました

  4. Process04:どんなサービスを作るのか、認識を合わせる

    エレベーターピッチというフレームワークを使い、私たちが解決したい課題、叶えたい未来、作りたいサービスについての認識を合わせていきました。
    ここで決めた内容をゴールとして、仕様を考えました。

    • サービスの方向性を合わせるための議題シート

      サービスの方向性を合わせるための議題シートのイメージ

      Scroll

  5. Process05:ペーパープロトタイプの作成

    考えた仕様が本当に使いやすいサービスとなるのかを確認するために、ペーパープロトタイプを作成しました。ここではサイト作成までのフローと、画面内の情報を確認を行い、ボタンの色などのデザイン面については次の段階で決めることにしました。

    • 基本設定画面のプロトタイプ

      基本設定画面のプロトタイプのイメージ

      Scroll

    • ダッシュボード画面のプロトタイプ

      ダッシュボード画面のプロトタイプのイメージ

      Scroll

    • サイトの基本編集のプロトタイプ

      サイトの基本編集のプロトタイプのイメージ

      Scroll

    • 出来上がったペーパープロトタイプを、実際にクライアントに確認していただき、スタジオ目線でのご意見をいただきました。

    • クライアントからのご意見シート

      クライアントからのご意見シートのイメージ

      Scroll

カタチのデザイン

webページのテンプレート(一部抜粋)

韓国風を強みにしているスタジオや、和風を強みにしているスタジオなど、スタジオによる強みは様々ですが、「どんなこだわりや強みを持つスタジオでも、"これだ!"と思うものが見つかること」を目指して、テンプレートのデザインをしました。
どのテンプレートも、フォトウエディングで大切な要素となる"写真"がアピールできるデザインとなっており、写真の印象が強く残るデザインとなっています。

  • テンプレート1

    デザインしたテンプレートのデザイン

    Scroll

  • テンプレート2

    デザインしたテンプレートのデザイン

    Scroll

  • テンプレート3

    デザインしたテンプレートのデザイン

    Scroll

  • テンプレート4

    デザインしたテンプレートのデザイン

    Scroll

管理画面

0→1で作成した管理画面は、既存の管理画面に捉われず、「分かりやすく、スピーディーに操作できる管理画面」を目指しました。
HP作成の際につまづくポイントとしてある用語の部分は噛み砕いて分かりやすく説明したテキストを提供することで、初心者の方にも「ここで記述した内容がどこに表示されるのか」がイメージしやすいデザインにしました。
また、クライアントの課題である「運用コスト」を解決するために、Photorait内に入稿している情報を連携できるような仕組みにし、運用しやすいカタチを実現しました。

  • 基本設定:ロゴ画像/トップ画像の選択

    デザインした管理画面の基本設定ページ

    Scroll

  • 基本設定:HPの基本設定

    デザインした管理画面の基本設定ページ

    Scroll

  • ダッシュボード

    デザインした管理画面のダッシュボードページ

  • HP編集画面:トップページ

    デザインしたHP編集画面ページ

    Scroll

案件を終えて

Webつくのリリースは当初2020年3月31日を予定していましたが、コロナウイルスによるブライダル業界への影響もあり、リリース時期を4ヶ月ほど遅らせました。3月を目標に1年間走ってきたため、「リリースを遅らせる」という苦渋の決断は、開発メンバー全員が最初は受け入れ難いものがありましたが、前向きに切り替えて、「だったらもっとブラッシュアップしよう!」ということで、社内インタビューを導入し、「使いやすさ」の部分をブラッシュアップしていきました。
このプロダクトのターゲットは「大手企業ではなく中小企業」と掲げていましたが、リリース後は、中小企業のクライアントにはもちろんのこと、大手企業のクライアントにも「特集ページの作成」という形でご利用いただいており、その更新のしやすさから、リリースから3年ほど経った今でも長く愛されるプロダクトとなりました。

リリース後の効果