制作期間 約3ヶ月
プロジェクトメンバー プロジェクトマネージャー 兼 ライティング 1名 プランナー 3人 ディレクター 1人 デザイナー 2人（私 ・ 主にイラスト担当） 外部パートナー 2名（イントロアニメーション担当 ・ 実装担当）
公開したサイト https://smarthr.jp/smarthr-5th-anniversary/
SmartHRはプロダクト提供開始から5年。会社も300名を超える組織になりました。プロダクトと会社が大きくなるにつれ、徐々に「お客さまとの心理的距離が離れてきているかもしれない」と感じはじめていました。
そのため、5周年記念サイトは、お客さま、そして私たちSmartHR社員にとっても、お互いの存在を身近に感じられるものにしようと方向性がまとまりました。
SmartHRはこれまでお客さまのフィードバックや感想に背中を押され、プロダクトを作ってきました。お客さまと一緒にSmartHRを作ってきたし、これからも一緒に作っていきたい、という想いを伝えたかったのです。
コンセプトは「『生産者の顔が見える野菜』のようなサイト」でした。
サイトの大きな方向性が決まってきた後、プランニングメンバーを中心にワイヤーフレームを書いてもらい、デザインを担当の私に徐々に引き継がれていきました。
最初に共有されたワイヤーがこちら
大きく、「SmartHRの5年間の歴史や成長を掲載しよう」というところまでは決まっていたのですが、どのように表現するかについては、まったく決まっていませんでした。
ここから「どのように歴史を表現していくと、コンセプトが伝わるのか」を考えていきました。
一般的にはサイト制作ではキービジュアルから作成するのが定石かと思いますが、今回はメインのコンテンツである歴史部分がお客さまとの距離の近さを担う中心部分でした。
そのため、歴史部分を中心にサイトを組み立て、キービジュアル、その他のセクションの制作という特殊な進め方になりました。
歴史の部分をどのように表現をするのか、案をだしていき、それをもとにプランナーのメンバーに内容を用意してもらいました。
掲載する内容は、これまでの多くのリリースや出来事を総整理しながら、関わりのあった社員ひとりひとりにヒアリングし、一番お客さまへの価値が届けられた瞬間をピックアップしてくれました。候補の量がとても多く、厳選するのも本当に大変そうでした...。
出来上がったものが、こちら。
「ウラ話がのぞける」ことと「お客様の声/当時のSmartHR」のことを1つのカードの中に表現しました。
歴史部分が固まってきたら、キービジュアルに入っていきます。
「年末調整」「労務管理」など、一見難しそうに思えたり、事務的なイメージがありますが、わたしたちは従業員のみなさまがもっと気持ちよく働けるように、共に人事労務を改革していく同士のような存在になりたいと思っています。
そこでSmartHRの身近さを全面に伝えるためにも、キービジュアルでは新しいチャレンジをしようと試みました。
キーカラーであるブルーを基調とした案や、柔らかさを伝えるために曲線が印象的なイラストを入れる案などを試してみたりと、試行錯誤。
最終的には、温かみと遊び心のあるこちらのキービジュアルで決定し、「カード」というモチーフをサイト全体で使用することにしました。
いよいよページの下部を作り込んでいきます。
下部では主に、User’s VoiceとしてSmartHRをご利用いただいているお客さまにアンケートを取り、実際の生々しい声を掲載しました。
データの見せ方をどのようにしようか悩んでいた時、今回のプロジェクトメンバーではなかったイラストに強いデザイナーの1人が、User Voiceの部分を見て「イラストでみせてはどう？」と提案してくれました。
結果的にUser’s Voiceもより温かみのある表現になりました。
そして、サイトをつくり込む中で、一貫したビジュアルやライティングにしあげていきたいと思い、マーケティング担当のメンバーと相談しつつサイトのコピーを策定しました。
「SmartHRを、つくっている人、つかっている人。その5年間。」
というコピーはこの時に誕生。全体のライティングもビジュアルも、これに合わせていきました。
このように、プロジェクトメンバー以外も多くの人が関わったこのサイトは、メンバーの柔軟さや、専門技能がそれぞれあったことで完成しました。「100人が100の問題を解ける組織」を目指していることもあり、それが現れたプロジェクトになったと思います。
最後までご覧くださりありがとうございました。