「GMOリピータス」サイトリニューアルプロジェクト
こんにちは！20年卒・新卒2年目のサービスデザイン部の片山です。
2021年9月27日に、私が所属しているポイントCRMチームのプロダクトである 「GMOリピータス」の紹介ページが満を辞してリリースされました！
本記事では、そのプロダクトサイトの制作プロセスについてお話ししていこうと思います。
目次
- ポイントCRM「GMOリピータス」とは
- サイトリニューアル制作プロセス
- なぜサイトリニューアルを行うことになったのか
- 制作フロー
- 1：目的確認とヒアリング
- 2：サイトに入れる内容と優先順位を決める
- 3：参考サイトを持ち寄ってブレスト
- 4：設計
- 5：デザイン
- 6：コーディング
- おまけ：ロゴ作成
- 最後に
ポイントCRM「GMOリピータス」とは
まず、「GMOリピータス」について簡単に説明していきます。 GMOメディアには、22年もの歴史がある「ポイントタウン」というポイントサイトがあるのですが、そのポイントタウンの運用システムをベースに、他社のポイントサイトを開発・運用することができるプロダクトが「GMOリピータス」です。
クライアントが持っている既存のポイントの価値を高める、あるいは新たにポイントの仕組みを導入することで、そのポイントを目的としたユーザーのリテンションを向上させ、定着率・利用率・新規獲得の改善につなげていくことができます。
また、ただサイトを作るだけではありません。 リリース後も、22年間蓄積されたノウハウで質の高い施策提案や顧客分析を行い、訪問率・売り上げの向上をサポートするところまで一貫して行っています。（手厚いですね！）
この、顧客のリピーターを増やすためのプロダクトというコンセプトから、「リピーター」と「足す（増やす）」というキーワードを組み合わせて、「GMOリピータス」というプロダクト名になりました。
実際の導入先やより詳しい内容はGMOリピータスのwebページに載っているので是非ご覧ください！
サイトリニューアル制作プロセス
GMOリピータスの概要を知っていただき、実際のwebページも見てきていただけたところで、早速制作プロセスについてお話ししていきたいと思います！ 今回、プロダクトとしての事業内容や強みを外部にしっかり伝えることで、質の良い新規顧客を獲得するためにサイトリニューアルを行いました。 何をサイトに載せるかを精査するプロジェクトの上流から、リリースするまでの実際の流れを紹介していきます。
制作フロー
目的確認から始めてブレストを繰り返し、大きく分けて6ステップのフローで進めていきました。
1：目的確認とヒアリング
まず最初に行ったのが目的確認とヒアリングです。 デザイナーだけで完結させるのではなく、フロントに立ってくださっているディレクターさんに、GMOリピータスの営業武器は何か、導入を考えている会社に提案したときに反応が良いコンテンツは何かなど細かくヒアリングしていきます。 ここでサイトに載せる情報を収集するのと同時に、チーム間のプロダクトの認識・理解を深めることができます。 作り手にとって当たり前になってしまっていることが実は顧客には目新しく魅力を感じるものだった、なんてこともあると思うので実際に生の声を聞いている方を巻き込んでプロジェクトを進めましょう！
2：サイトに入れる内容と優先順位を決める
次にヒアリングした内容を整理していきます。 情報をまとめて重要度をつけていき、顧客に特に伝えたいこと・アピールしたいことは何かを精査します。
ヒアリング内容を整理して再認識した、GMOリピータスの強み・魅力は大きく分けて3つにまとまりました。
①開発・運用・分析・広告のやり取り・請求・サポートなど、GMOリピータスで全てが完結できるワンストップ開発であること
②既に複数の導入実績があるので、顧客に応じた質の高い施策やキャンペーンを提案し、PDCAを回して成長させていけること
③ベースとなるポイントの運用システムが元からあるので効率的でスピード感を持って開発ができること です。
以上3点をいかにわかりやすくサイトに落とし込むか、見せ方を考える工程に進んでいきます。
3：参考サイトを持ち寄ってブレスト
次は設計準備です。 参考にしたいwebサイトを各自持ち寄ってじっくり話し合います。
- 構成、流れはどうするか
- どんな印象を与えるトンマナにしたいか
- ファーストビューの使い方や載せたい情報は何か
- どんなキャッチコピーにするか
- どんな情報が載っていると信頼を得られるか
- 競合の調査
などなど。 ここでデザイナー間でどんなページにしたいのか、みんなの認識・イメージを擦り合わせたらついに設計です。
4：設計
設計とデザインはfigmaを使用して作っていきます。
ヒアリングとブレストの内容を元にざっくりと設計します。
figmaは共同編集をすることができるので、複数人で1つのものを作り上げるときに最適です！ 各々で担当箇所を決めて文章を考え、みんなでより伝わりやすくなるように添削し、fixさせます。
5：デザイン
文章やモックができたら、今度はデザインに入っていきます。
大きなお金のやり取りが発生するプロダクトなので信頼感や落ち着きを担保しつつ、あしらいやイラストやアイキャッチなどの要素要素でかっちりしすぎずとっつきやすい印象を与えられるようなデザインを目指します。 トンマナとイラストは各々参考資料を持ち寄ってモックに合わせて、画像のようにたくさんパターンを出していき、1番いい組み合わせを模索しました。
6：コーディング
いよいよコーディングが終わったら完成です！
こちらから見に行けるのでぜひ見てみてくださいね！
おまけ：ロゴ作成
サイトリニューアルに伴いロゴ作成も行いました。成果物がこちらです。
名前の由来と関係しているプラスのマークとリピートのマークを要素に落とし込み、斜めに字体を傾けさせる事でGMOリピータスの強みであるスピード感を表現しました。 カラーはGMOのロゴと同じブルーとその明度低めの青が浮きすぎず馴染みすぎない深めのグレーを採用しました。
最後に
今回は、ざっくりとですがGMOリピータスサイトリニューアルの流れをお話しさせていただきました。 新規顧客の獲得を目的に動き出したこのプロジェクトでしたが、早速お問い合わせもあったようで、私たちの作るプロダクトの良さをサイトを通してしっかりと伝えることができたのではないかと思います。 ポイントOEMとして今後のさらなる事業拡大を見越して、よりカッコよく、より効率的なデザインを作っていけるよう注力していきます！ ここまで読んでくださりありがとうございました！