スナップスナップリニューアルのデザインで考えたこと
この記事は フォトクリエイト Advent Calendar 2019 の15日目です。
ディレクター・デザイナーの水野です。
弊社サービスのスナップスナップを8月にリニューアルしましたので、
その時に、デザイナー目線で考えたことを書こうと思います。
まずは、スナップスナップについて
スナップスナップはスクールや園など、学校写真の販売サービスです。
私の記憶に結び付けて説明すると、小学校の修学旅行が終わったあとに、
廊下の壁に修学旅行の写真がたくさん貼られていて、
学校から渡された茶封筒に写真の番号を書いて、現金を入れて、後日学校で写真を受け取っていました。
簡単に言うと、その体験をWebサイト上で行うサービスです。
ムービーなども販売はしていますが、基本的には個人写真をサイトで購入するサービスをイメージしていただくと分かりやすい気がします。
個人的には「写真なんていらない」と思った学生時代があり、自分の結婚式の時にプロフィールムービーを作ろうとしたら、写真の思い出がすっぽり抜けてる時代がありました。
その時「今買えたら買うのになー」と思ったので、生涯を通した自分の人生のどこかのタイミングの写真をいつでも買えるって、実現できたら素敵なことだなって思います。
デザイン面で課題だったこと
スナップスナップは、2006年にサービスが誕生してから、10年以上経ちます。
いちからのリニューアルをせず、できたサービスにやりたいことを追加したり、やめたり、ツギハギな感じのサイトになっていました。
それぞれのページで主張したいことがたくさんあるので、それぞれの要素が強調し合い、何が目的のページかわからないので、多くの説明が書かれていました。
結果「使いにくい」とか「よく分からない」と言う声をよくいただいていました。
リニューアル前のスナップスナップ
どんなサイトであるべきか
リニューアル前に「さて、サイトをどうにかしましょう」というタイミングで、チームで「どんなサイトであるべきか」を話し合いました。
やりたいことを出していくと、どれだけでも便利なサービスはできます。
こんな世界観が作れたらいいな、こんな機能あったら便利だな、とか。
けど、これは、本当にこのサービスでやるべきなのか、というところを意識して、まず提供すべき目的や内容を絞りました。
「ここにしかない子供の成長をスムーズに届けてHappyに」がその時チームで決めたこと。
とにかく「スナップスナップでしか買えないたくさんの写真を、できるだけスムーズにユーザーに届ける」ことをまずは実現しましょうと。
こういう指針をチーム全員が持つことは大事ですね。
リリースして、3、4ヶ月経つけど、みんな忘れてないといいな。
とにかくシンプルにしたい
そういった「当たり前のことを当たり前にできるサイトにしたい」が強くあったので、デザイン面でも、そんなに奇をてらった何かをするつもりは最初からありませんでした。
ほとんどのECサイトで共通することだとは思いますが、一番みてもらいたいのは、サイトに載せている商品。
スナップスナップも同様で、ユーザーに見てもらいたいものはユーザーのお子さまの写真です。
何よりも写真をきれいに見てもらうために「余計な色をできるだけ使わない」「余計な説明をしなくても、何をするかが明快になっている」ということは実現したいと思いました。
余計な色を使わないために自分の中で作ったいくつかの決まり。
・ロゴ含め、スナップスナップのプライマリーカラーを決める
・１ページでしなきゃいけないことを１つにする
・説明しなくていいように、使ってるうちに慣れるようなルールを作る
全部そうできるわけではありませんでしたが、できるだけ意識してました。
ロゴ含め、スナップスナップのプライマリーカラーを決める
できるだけ色は使いたくないけど、サイトで迷って欲しくはない。
サイトのプライマリーカラーを決めて、このページで一番押してほしいボタンに色をつけて、その他の色をできるだけ少なくしようと思いました。
そのボタンを押してほしい、というメインの行動が伝われば、余計な説明はいらないはずです、きっと。
画面デザインを進める際、区切りに罫線や色面などがないと成立しないケースにあたる場合がありました。
そんな時は「きっとページの構成が悪いんだ」と一度立ち止まり、ユーザーが利用するために必要な情報以外が入っていないか、罫線１本でも本当に入れる必要性を説明できるかを考えました。
「さあ、プロトタイプを作ろう」と思った時に、最初につまずいたのがロゴの色でした。
リニューアル前のロゴは、青と赤でできていました。
その色を使ってサイト全体を作ると、とてもビビッドなサイトになって、写真の邪魔をするような気がしました。
チーム的には「早くプロトタイプを作って、ユーザーテストをしましょう」という状態だけど、ロゴ提案なんてしていたら、すごく時間がかかりそうでした。
目に馴染ませてしまおう作戦
ある程度、プロトタイプを色々な人が見る時間はあると思ったので、しれっとロゴも変更した状態でプロトタイプを作りました。
もちろん、チームには「こういうロゴにしたい」という話はしましたが、会社とか、関係各所とか、確認プロセスを通すだけで、どれだけでも時間がかかってしまいそうで、プロトタイプをみてるうちに自然とそこにあるのものにならないかな、と。
という感じで、ロゴも含め、プライマリーカラーをひとまず設定。
プロトタイプも早くでき、最終的にはその状態でリリースして、良いスピード感だったと思いますが、本格的な開発途中で、やっぱり会社に対しては説明をすることになり「もっといいプロセスがあったのでは」と評価査定にも響いたので、おすすめのやり方ではありません。
ロゴマークについては、Webサイトでの利用を基本にピクセルで表現できそうなシンプルさで考えました。
また、アプリロゴになったときにも認識しやすく、ローディングやスプラッシュ画面などでも動きをつけられるものがいいな、と思っていました。
ロゴアニメーションは、After Effectsで作り「Bodymovin」というサービスで、jsonファイルにしてみましたが、社内のコードのテストで引っかかってしまったのでGIFで頑張っています。
ユーザーが１ページでしなくてはいけないことを１つにする。
１つのボタンを押してもらうためには、１ページの要素もシンプルにする必要がありました。
たくさんやらなければいけないことがあるページは分割して、１つのページでは、できるだけ１つのことをやってもらえるようにしました。
ページはシンプルになったのですが、遷移する画面は増えてしまったところがあります。
これが良いのかどうかは、データで検証するしかないので、今後も追っていきたいところです。
説明しなくていいように、使ってるうちに慣れるようなルールを作る
作品として見せるサイトではなく、道具として使ってもらうサービスにするために、できるだけサイト全体を同じルールにして、使ってもらっているうちに慣れるようにしようと思いました。
エンジニアさんの方針も、SPA（シングルページアプリケーション）で進むことが決まったので、コンポーネント化による統一ルールは相性がとてもよかったです。
デザインツールのsketchを共有するためにzeplinというサービスを利用していましたが、ちょうどzeplinのバージョンアップがあり、コンポーネントを別項目として確認することができるようになりました。
各ページのデータごとに利用しているコンポーネントを可視化することができたので、エンジニアさんとのコミュニケーションコストも短縮されたと思います。
コンポーネントについては、アトミックデザインでいうところの、「Atoms」と「Molecules」くらいまでをイメージしました。
会社でSPAサイトを作るのが初めてだったのとデザイン先行で作っていたこともあり、コンポーネントのルールを作っていると時間がかかりそうだったので、先にできるだけ細かく作ったものを組み合わせて進めるようにしました。命名ルールや組み合わせは、あとですり合わせようと。
後に、Storybook（一般的なのかは知らないです）でコンポーネントの共有をしていただき、リリース前のデザイン確認は重複して修正をお願いすることも少なく、やりやすかったと思います。
でも結局「あとですり合わせよう」は置いたまま。。
サイトリニューアルで解決できることについて考える。
売上を増やすための要素としては、だいたい下記のようなもの。
このうち、サイトリニューアルでまず期待できるところは「購入率」と「顧客単価」になりそうでした。
まずは、ユーザーが抱える課題
リニューアル前にユーザーインタビューを行い、様々な課題をリストアップしました。
その中で、ユーザーにとって大きな課題がわかりました。
【大きな課題】
・写真枚数が多いので自分の子供を探すのに1〜2時間かかってしまう。
・忙しい毎日の中で、なかなかその探す時間を捻出できない。
ひとつのイベントでの撮影枚数は、スクールによっても異なりますが、
私が実際にある保育園の運動会の撮影をした際、撮影枚数は3,000枚を超えました。
当日2名のカメラマンのうちの1名として入ったので、２名分で合計約6,000枚。
運動会で種目ごとに表示を分けているとはいえ、6000枚の中から自分のお子さまを探すのは大変なことです。
この時間をどうにか短縮することはできないかと考えました。
顔認識技術を利用した解決方法
リニューアル前に、顔認識技術を利用した検索機能のβ版をリリースしていました。
ユーザーが見る各イベントにお子さまの写真をアップし、顔を登録する導線をつけ、登録した顔によって検索結果を表示するというもの。
β版では、良い結果が出ました。
登録する写真によって精度がまちまちではあるものの、その機能を利用したユーザーは利用していないユーザーに比べ、平均で1〜2枚、写真を多く購入していました。
ユーザーの課題と、期待すべき購入率・購入単価の問題が大きく改善しそうでしたので、写真検索部分での軸足は顔検索機能をメインにすることにしました。
中間コンバージョンについて考える
リニューアルが終わって運用が始まった時に「どんな状態になるだろう」って考えると、
・会員登録
・スクールパス登録
・イベントに対する閲覧数
・顔登録を行なったユーザー数
・カート画面から購入導線への遷移率
・購入導線での離脱率
このあたりをチームとしてサービスのグロースに向けて追いかけるんだろうと、だいたい想像しました。
・会員登録
・スクールパス登録
簡単にユーザーの行動の流れを説明すると、園やスクールにイベントごとにチラシを配っていて、チラシをみたユーザーが購入したいと思ったときにサイトで行動を起こします。
チラシにはスクールパス（園・学校ごとのパス）を記載されていて、サイトにきたユーザーはスクールパスを登録して、写真を閲覧・購入します。
現状、チラシや学校の案内以外で、新規ユーザーにリーチしていないので、まずはサイトにきたユーザーの離脱を少なくすることがサイトでできること。
基本的な方針である、余計な選択肢をなくしサイトの導線をシンプルすることからはじめ、様子を見てみようと思います。
・カート画面から購入導線への遷移率
・購入導線での離脱率
この2つも上記と同様で、できるだけシンプルなものを提供し、そこから数字を見ながら改善する方が良いと考えました。
・イベントに対する閲覧数
会員登録していただいたユーザーに対して、イベントの写真を公開した際に「公開通知メール」を送付しています。
まだ改善の余地はあると思いますが、ひとまず据え置きで。
将来的には、サイトをPWAにしてプッシュ通知を送れたら、と思いましたが、
PWAの行く末が明るくない話も聞いて。
・顔登録を行なったユーザー数
顔検索がうまく軌道にのってサイトを運用していくうちに、この部分が大きな中間コンバージョンになる気がしました。
ユーザーの写真検索ストレス軽減や購入単価アップのためにも、必ず追う数字になりそうでした。
この中間コンバージョンをできるだけオートメーション化できないかと考えました。
注文履歴から、お子さまの顔登録を
検索精度の高い顔登録を行ったユーザー数を中間コンバージョンに考えたときに、ユーザーごとのお子さまの写真登録数アップや、より精度の高い顔認識での検索を達成するためには、複数のアプローチが必要になります。
まだ登録をしていないユーザーに対しては「登録誘導画面」、あまり検索に適していない写真をアップロードしたユーザーに対しては「写真変更画面」など、複雑な案内をしなければいけなくなりそうでした。
できるだけ通常のECサイトのレコメンド機能のように、使ってる間に自分の子供がレコメンドされるようにならないかと考えました。
初回の購入時は、情報がないので写真を登録していくしかありませんが、一度以上、購入したユーザーは明らかに自分の子供情報を注文履歴として持っているはずです。
さらに複数回購入することで、いろいろなパターンの子供の顔情報を参照し、AI側が学習していければ、いつの間にか自分の子供をスムーズに探せるのではと思い、顔情報の登録設定を注文履歴ベースで行うことにしました。
また、変化の早い幼少期の顔をできるだけ追いかけることができるという利点もありました。
この辺のロジックをエンジニアさんと話しているときは、初めてAIの恩恵を受けられた気がして楽しかったです。
自然に登録されアップデートされることで、顔登録という中間コンバージョンというものをなくし、サービスの他の部分にも力を入れることができるのではないかと思っています。
写真の撮り方、兄弟姉妹の判別の難しさ
注文履歴の写真から顔情報を検出して、より同じ顔の数が多いサムネイルから順に、ユーザーの子供としてレコメンドします。
実際に注文履歴を元にリリースをしてみると、カメラマンさんによっては、できるだけ複数人を常に撮る人がいたり、同じ学年に兄弟・姉妹がいると、どの子供が自分の子供かAIが判別に悩むということも起きています。
その部分は、今から検討・修正を重ねていくところです。
お客さまの声を伝えたい
ユーザーからの課題にも、リニューアル前の課題にも上がらなかったけど、ずっとやりたいと思っていたことがありました。
ユーザーが写真を購入した後に、いつも簡単なアンケートメールを送らせていただいています。
丁寧に返信をくださるユーザーの方がたくさんいて、写真を見ただけでは分からない「写真の中のストーリー」を書いてくださったりします。
こんな声がありました、というものを社内システムで共有されていたのですが、
もっと社外に発信した方がいいのではないかと、入社以来ずっと思っていました。
今回リニューアルの際に、会社のカスタマーサポートチームとも連携して、
お客さまの声に掲載許可をいただいて、サイトに載せることができないかと提案しました。
カスタマーサポートチームも時間がないなか、とても協力的にお客さまの声を集めてくれて、少しずつお客さまの声の発信ができそうです。
写真に思い出が追加されることで、他にはない貴重なコンテンツになっていくと思います。
サイトに柔らかさをプラス
あまりシンプルさだけを考えすぎると、親しみのないサイトになってしまいしそうでしたので、要所要所でイラストをプラス。
イラストが好きな、@komoriko にお願いしました。
イラストの誕生については、いつか書いてくれるかもしれません。
最後に
その他、ユーザーには、どこで写真を選択してもらうのが一番いいのか、
写真のサイズって、どう変えてもらうのがいいのか、
過去の写真を見てもらうタイミングはいつがいいのか、
心地よいマイクロインタラクションはどんなものか、
遷移率やKPIの設定・計測するための細かい仕込みなど、
リニューアル後に検証したいこと、やりたくても実現できなかったことが、
まだまだ、たくさん残っています。
世界一の思い出カンパニーになれるように、
写真や映像というコンテンツを、人と結び付けられれば嬉しいです。
フォトクリエイトではサービスを一緒に育ててくれる方を探しています。
少しでもご興味をお持ちいただけたようでしたら、人事部門の担当者 twitter: @tetsunosuke へお知らせください。
この記事が気に入ったらサポートをしてみませんか？