CAM TECH BLOG

株式会社CAMのエンジニア・デザイナーの活動を綴るブログです

株式会社CAMの技術ブログです。 エンジニアとデザイナーの活動や組織文化を綴ります。

「ゲッターズ飯田の姓名判断」のデザインをフローから改善してみた話

f:id:cam-engineer:20190131164252j:plain

こんにちは。シーエー・モバイルのデザイナー・滝です。

シーエー・モバイルの占い事業部(以下、CAMFORTUNE)では、人気占い師 ゲッターズ飯田さんの2つの公式サイトを運営しており、その1つである「ゲッターズ飯田の姓名判断」が昨年12月に3年ぶりにリニューアルとなりました。

今回、メインデザイナーとして携わることで得た気づきや学びを、ブログにまとめようと思います。

リニューアルのコンセプトとデザイントンマナ

いわゆる「占い」サイトは、シンプルで今風なデザインとは全然違い、テクスチャ盛り盛りで、あやしい、濃密で独特な世界観のものが多い気がします。

それはそれで素敵で、長く愛用してくださる方も多いのですが、あまり占いになじみがない人からすれば、気軽に見られない等の意見が、実はあったりもします。

なので、今回のリニューアルでは、


“あやしい感じの占いサイトを使っているのを周りの人に知られたら、そんなに悩んでいるの…?と思われるかもしれない”


“電車で見ていても、重々しくないのがいいよね”


というライトユーザーの方にも使いやすいデザインを目指しました。

テーマとなったのが「和風ラグジュアリー」「重厚感」「上品」といったワード。

その中でもどういう個性を出していくかの方向性を決めるために、ムードボードにもかなり時間をかけ、チームメンバーとディスカッションを重ねていきました。

デザインのトンマナ(トーン&マナー)が決まったところで、KV(キービジュアル)も複数パターン用意して、様々な職種のメンバーを巻き込んで決めていきました。

f:id:cam-engineer:20190131164257j:plain

画面のデザインを作り込んでいくフェーズでは、「上品な和」を追求して、梅や水引、鶴などのモチーフ選びや表現方法にこだわったり、シンプルな画面にテクスチャを乗せることで世界観に厚みを持たせました。

ベーシック過ぎてしまうとつまらないし、盛り盛りにしすぎると分かりづらくなったりUIの汎用性が低くなる可能性もあるので、そのバランスに苦戦しました。

占いサイトは要素も多く、ごちゃごちゃになりがちですが、高級感があって上品なイメージを崩さないように、全体的にゆったりと余白を持たせることを意識して作成しました。

鑑定結果文を読む時は、ユーザーが占いに ”より”集中するので、占い結果や世界観への没入感を上げるために、結果文の行間を通常よりも広めにとって、ユーザーがストレスなくスッと文を読みやすくする工夫をしました。

f:id:cam-engineer:20190131184119g:plain:w200 f:id:cam-engineer:20190131164835j:plain:w200 f:id:cam-engineer:20190131164839j:plain:w200
(左から、会員TOPページ、プレミアム鑑定結果ページ、月額鑑定結果ページ)

少し作り込みたい部分では、華やかな和菓子からヒントを得て作ってみたりもしました。

f:id:cam-engineer:20190131164843p:plain:w200 f:id:cam-engineer:20190131164848j:plain:w200

デザインフローの見直し

これまでの占いのデザインは、作りこみの部分が多く、シンプルなUI制作向きの Sketch を使用するチャンスがあまりなく、ほぼPhotoshopで作業していました。

今回のリニューアルで、UIがよりシンプルになったことで、Sketchを積極的に使うことができました。

また、せっかくなのでSketch 導入だけでなく、フロー全体を見直してみることにしました。

f:id:cam-engineer:20190131164854j:plain

●これまで:

Excel/PPT
↓↓
Photoshop
↓↓
全体イメージをjpgで書き出し
↓↓
確認
↓↓
フロント

 仕様書のバージョンが変わるごとにファイルが増え、どれが最新か分かりづらい

 制作するページが多い場合は特に、Photoshopが重くなりがち

 jpgで全体イメージとしてアートボードを書き出して確認してもらい、修正後また書き出し直して…は手間がかかる上に変化も比較しづらい

 フロントエンジニアがpsdを開いてフォントサイズやマージンなど計測する手間がある


●今回:

Cacoo
↓↓
Sketch
↓↓
Zeplin
↓↓
確認
↓↓
フロント

<Cacoo>

 Excelなどに比べワイヤーフレームが作成しやすい

 コメントのやりとりができるので便利


<Sketch>

 軽い

 シンボル管理、リファクタリングをしっかりする分、使いやすくなる

 ベクターの編集ができるからIllustratorで作ったデータも色を変えたりできる

 ビットマップ画像も簡単な色調補正はできる

 Zeplinへのアップロードが簡単


<Zeplin>

 最新のものに上書きされていくのでデータが散らからない

 ヒストリーのように、修正前のバージョンも見られる

 コメントのやりとりができるので便利

 Slackとの連携もできて、デザインをアップロードしたりコメントを更新するとSlackにメッセージが送られるのですぐ気づける


それぞれ特徴を挙げてみるとこんな感じです。

始めは従来と違った進め方に不安がありましたが、いざ使ってみるとむしろ今までよりも円滑に物事が進み、かなりやりやすかったです。

例えばSketchでシンボル整理をしっかりしてパーツの流用性を高めたり、アイコンやテキストにシンボル化しておいた色のマスクをかけて、後からオーバーライドで簡単に変更できるようにしたり、リファクタリングをしっかり行った分、便利になりました。

当初、デザイン作成時、テクスチャなど細かな作り込みのある部分はPhotoshopで制作してから、Sketchに画像として貼り付け、という感じに作成していて、Sketchでも画像をもっといじれたらいいな…と思っていました。

しかしそれではデータが散らかる可能性もある上、今のSketchの分かりやすさ・軽さを阻害してしまうかもしれないので、これからもPSD/AI/Sketchで行き来しながら作るのが、それぞれのツールの強みを活かせて良いと思いました。

(今回、PSDのデータをただ乱雑に置いたみたいに作成してしまったので、今後はもっとパーツごとに整理して綺麗なデータを作ることが課題です…)

上の箇条書きにも挙げたのですが、CacooもZeplinも、ローカルでなくWeb上で更新されるのでデータが散らからないのが便利でした。

Excelやパワポだと、古いバージョンのデータを間違えて参照してしまったり、アートボードを書き出してデザイン確認するのも、何度も回数を重ねると画像が多くなって混乱の元となったり…そういったトラブルがなくなったのでかなり良かったです。

Zeplinは確認時に修正前のデザインもヒストリーのように見られるため比較もしやすくて使いやすいです。

今回はUIデザインツールとしてSketchを使いましたが、Adobe XDもアップデートを重ねてかなり使いやすくなっているようなので、今後機会があれば使ってみたいと思っています。

ちなみに、リニューアルのデザインコンセプト決定前の目標はサイトの回遊率を上げ、退会率を下げたいということでしたが、どちらもリニューアル後改善が進みました

ただ、同時に次の課題も見えてきているので、引き続きデザインで応えられるよう運用を進めていきます。

今回のニューアルにおいては自分がメインデザイナーとして基本どんどん手を動かしていく感じでしたが、今後の運用フェーズでは複数のデザイナーと作業を進めていくことになるので、今はコンポーネントの整理や、Abstractでのバージョン管理、ルール作りなどを進めています。

デザイン設計、スタイルガイドの作成

UIの一貫性を保つため、積極的に取り組んだのがデザインスタイルガイドの作成・共有です。

メリットを具体的にあげると、

  • 整理された綺麗なデザインが実現しやすく、ユーザーにも分かりやすいUIに近づく

  • 実装のクオリティUP

  • 他デザイナーが新しくページをデザインする際、迷いづらい


など。 リニューアル後の運用でデザインの破綻も起きにくく、その分長く使ってもらえるので、今後も続けていきたいと思っています。

「ゲッターズ飯田の姓名判断」について

生年月日で占うサイトは多くありますが、「ゲッターズ飯田の姓名判断」はその名の通り、生年月日だけでなく名前からも占えます。

ユーザーが使いやすいサイトを目指していて、購入履歴やお気に入り機能などを充実させたり、クリスマスや年末年始のおみくじなど季節ごとのコンテンツや特集を用意したりと楽しいサービス作りにも力を入れています。

抽選で毎月30人を飯田さんが占ってくれる動画鑑定のコーナーがあったり、無料で鑑定できる占いも多いので、是非登録して遊んでみてください!

f:id:cam-engineer:20190131164916j:plain

https://sp.iida-seimei.net/

CAMFORTUNEのデザイナーとして今思うこと

CAMではプロデューサー、ディレクター、エンジニアとチームになって一緒に仕事ができるので、ものづくりの一通りの流れを見ることができます。

デザインして終わりでなく、効果や数字的なところやサービスの目標も一緒に追っていけるし、作るものに愛着が湧き、より良いものを作ろうという意欲にも繋がる良い環境だと思っています。

日々もっと高めていかなければと痛感するのは、世界観を強烈に樹立する力です。

それに加えて、トレンドを意識した先進的なデザインも積極的に取り入れていきたいと思っています。

そうしていくことによって少しでも占いがもっと沢山の人の身近に、利用しやすいコンテンツになればいいなと思います。

もっと長い目で見てデザイナーとして私が大事にしていきたいな、と思うのは提供側とユーザーとの対話で、そこには静的な表現だけでなく、マイクロインタラクションなど動きのデザインも関わってきます。

今はあまり動的なことまでデザインするチャンスがないので、未知の領域ではあるのですが、勉強して少しずつ普段の制作に活かしていけたらなと思います。



滝 かおり(たき・かおり)

2017年 シーエー・モバイル入社。webデザイナー。

HAL名古屋グラフィックデザイン学科出身。CAMFORTUNEでWeb、アプリのデザインを担当。シンプルなクリエイティブから、占いならではの「ドロドロした」クリエイティブまでマルチにこなす。