アットコスメ 社内サイネージのクチコミ数カウント

アットコスメはコスメ・化粧品・美容の総合情報サイトです。ユーザーのクチコミを元に、求めていたコスメに出会えたり、トレンドの美容情報を知れたりやコスメの購入が出来ます。
社内サイネージにアットコスメのクチコミ数を表示する画面を作成しました。

担当
Webデザイン / コーディング
工数
デザイン：1人日 / コーディング：1人日
作成日
2019/08/05

考えのデザイン

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

  1. Process01：社内インタビューを通して、意味のある情報を提供する

    まずはサイネージを普段見ている社内の方に、「どんな時にサイネージを見ているか」や「サイネージに流してほしい情報は？」などの、サイネージについてのインタビューをしました。
    集めたインタビュー結果を整理し、「意識的に見ている」「無意識で見る」「関心がある（主体的）」「関心がない（受動的）」に分けました。

    • 社内サイネージ活用のための社内インタビュー

      社内サイネージ活用のための社内インタビューのイメージ

      Scroll

  2. Process02：ユーザー調査を分析する

    集めたインタビューの回答をマトリクス分析すると、「情報の基準値や目標数などを知りたい」「繰り返しの情報がつまらない」「自分が該当しない情報は必要ない」「自分が見ている情報を正確に対比したい」の4つに分けることができ、「社内や他部署とのコミュニケーションを求めている人が多い」ということが分かりました。

    • 社内インタビューの結果を分析したシート

      社内インタビューの結果を分析したシートのイメージ

      Scroll

  3. Process02：ワイヤーフレームの作成及び提案

    サイネージが活かされる、「本当に有益な情報とは何か」をプロジェクトメンバーと話し合い、会社及びサービスが大切にしている「クチコミ」の情報を掲載することにしました。
    クチコミが書かれると数字とグラフがリアルタイムで変化し、サイネージを見るたびに、ユーザーにしっかりとサービスが届いていることが認識できる仕様を提案しました。

    • 作成したワイヤーフレーム

      作成したワイヤーフレームのイメージ

      Scroll

カタチのデザイン

アットコスメのロゴカラーを中心にコスメ等の「アットコスメ」をイメージできるアイテムを並べたデザインになります。今回は、「数字を大きく見せる」デザインにしたかったため、アイテムは数値の邪魔にならないようにあえて数を限定しました。
ワイヤーフレーム作成時に予定をしていた「目標クチコミ数」は、「時期によってクチコミ数が変わるため、目標を決めるのが難しい」という点から、デザイン時には削除となりましたが、「前日のクチコミ数」と「今日のクチコミ数」の比較により、サービスの盛り上がりが感じられ、サービスの先にいるユーザーのことを考えるきっかけにもつながります。

  • デザインしたサイネージの画面

    デザインしたサイネージの画面

    Scroll

案件を終えて

サイネージのデザイン自体が初めてだったため、コーディング等もどのように進めればいいか分かりませんでしたが、担当エンジニアにデザイナーのまっすぐな想いを、「こんなふうに表示させたい！」というこだわりを、しっかりと伝えることで、データの持ち方やコーディングの仕方などの最適な解を一緒に探すことができました。
このクチコミ数画面をリリースした1ヶ月後に、クチコ総数が150万を突破する、奇跡的な瞬間がありました。全社員がサイネージを見ながらカウントをし、数字が変わった瞬間に部署の垣根を越えて喜びあったのですが、その景色を見て、「サイネージにクチコミ数を表示させたのは正解だったな！」と確信しました。

作品一覧に戻る