CAM TECH BLOG

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

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

18新卒デザイナーN.Oの成長記録2 配属から2年目までの軌跡

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



こんにちは。CAM18年度新卒デザイナーのN.Oです。

前回書いた新卒研修のブログから10ヶ月ほど経ち、2年目となりました。

そこで今回は研修が終わった後、配属されてから頑張ってきたこと、成長したことについて書きたいと思います!



占いの事業部に配属される

 

研修を終えた5月末に、もう1人の新卒デザイナーと一緒に占い事業部に配属されました。この部署では、占い師のサイトや電話占いなど、占いに関するサービスを多数運営しています。

 

今まであまり占いに触れたことがなかったので、占いの部署のデザインというものが、他とどう違うのか理解できておらず、最初は少し不安もありましたが、これからいよいよ本格的に仕事をするんだ、頑張るぞ!という意気込みの方が優っていたと思います。

 

一方で、研修で自分の未熟さや実力不足を痛感したため、1日でも早く仕事を覚えて、デザイナーとして会社に貢献できるようにならなくてはと少し焦っていたようにも思います。

 

配属直後は主に占いサイトのバナーや、ちょっとしたサイトのイベントページのデザインを担当しました。

 

サイトによってデザインの系統が様々で、シンプルでポップなものからヘビーで重厚感のあるものまで、幅広い表現が求められるため、最初のうちはバナー1本に丸1日かかることもありました。

 

それから制作本数が増えていくと、「このサイトはフラットなデザインだから、エフェクトは盛り過ぎないようにしないと違和感が出る」「このサイトは重厚感があるから、奥行きを持たせるようにした方がそのサイトらしさが出そう」など、各サイトのカラーやニーズを素早く掴めるようになってきました。

 

1ヶ月経つ頃には1本3時間ほどで仕上げられるようになり、戻しの回数も減少して行きました。

 

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

▲ 一年で膨大な数のバナーを作成。クオリティは向上、制作時間は減少した


最初の1ヶ月ほどは主にバナーを作成していましたが、徐々にサイト内の施策などのデザインも色々と任せてもらえるようになりました。

 

中でも印象に残っているのは、「CHIE スピリチュアル日和」(以下、CHIEと略記)の2周年記念特集の素材を作らせてもらったことです。

 

CHIEの2周年特集では、キャンペーン期間中、3日間分のログイン・スタンプを集めると特設ページを開けるという、誘導ポップアップのデザインをしました。

 

「KARTE」という個々のユーザーに合わせた施策を作ることができるマーケティングツールを導入したばかりの時で、どのようなことができるのかを理解するために、担当ディレクターと密に連携を重ね、サイトの雰囲気に合わせてコレクション欲を刺激できるような、可愛いログインスタンプに仕上がるよう心がけました。

 

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

▲ 占い師のイメージにあった可愛らしいデザインに

 

実装後、担当ディレクターから想像以上に効果が良かったという報告があった際は、自分がしっかりとサイトに貢献できたということを実感し、とても嬉しく感じました。



配属直後に比べて、最近は製作スピードも上がり、1日に作成する量も増えてきました。また、インプットの時間も増やすようにして、デザインの知識を増やすようにしています。

 

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

▲ 1年前とは、時間の使い方も大きく変わったことがわかる

 

 

グラフィックにこだわりを持つ

 

CAMFORTUNEが運営する占いサイトは、装飾的で細部まで作り込んだビジュアルを掲げるサイトが主流です。

 

そういった、エフェクトに凝ったビジュアル作りの経験が少なく、最初は苦手意識があったのですが、作り始めると、どんどん楽しくなっていきました。

 

サイトによって担当ディレクターが違うため、人によって求めているイメージが漠然としていたり、具体的にこうしたいと決まっていたり、具体性に濃淡があります。

 

求めるデザインを作るためには、細かに方向性の確認をしたり、時にこちらからイメージの提案をしてみたり、臨機応変なコミュニケーションを取りながら、ディレクターの頭にある言語化されていないイメージを、できる限り正確に引き出すことが大事だと学びました。

 

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

▲ 1つのサービスを作るのに、様々な職種の人が関わっている

 

加工を重ねるなどして入念に作り込むタイプのクリエイティブで印象に残っているのは、「日本最後のイタコ 松田広子(以下、イタコと略記)」のサイト内で宝探しをする施策ページと、「暁玲華」で制作した「お月見特集」のデザインです。

 

イタコの宝探し施策は、サイト内に隠されている3つのアイテムを、ヒントを元に集めると限定メニューが見られる施策です。

 

担当ディレクターは、部署内でも特にサイトの世界観にこだわりを強く持っており、少しでもその世界観をデザインに落とし込めるように、方向性を何度もすり合わせ、それまでの制作で掴んできたディレクター好みの雰囲気をページデザインに反映しました。

 

また、普段こういったデザインは画像素材を使用しての制作が多いのですが、一部アイテムを制作する際にそれでは上手く表現しきれず、ゼロから自分で描き、細部までこだわりました。

 

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

▲ 独特の世界観の演出のため、ゼロから自分で描き、細部までこだわった

 

こだわって作り込んだ甲斐もあり、売り上げ推移も好調、年末年始の売上を支えた施策になりました。

 

暁玲華の「お月見特集」も期間中、決まった日数のログインすると特集が閲覧できるログインボーナス風の特集でした。

 

ログインすると、1日1個、お月見団子が積み上げられていくクリエイティブを作りました。新たに積まれたお団子は、ちょこちょこっと動くアニメーションを加え、遊び心を表現しました。

 

f:id:cam-engineer:20190417171802g:plain

▲ お月見団子が積み上げられていくとちょこちょこ動く


 

お団子の画像を、そのまま重ねていくだけだとスカスカになってしまい、リアリティに欠け、サイトの世界観に合わなくなってしまうので、1つのお団子に対し最大3パターンの影を付け、動きも6種類用意し、積まれている状況に合わせて適用していきました。

 

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

▲ 影の効果がないと、スカスカに見え、お団子の重みが感じられない

 

 

影を付け足すことでお団子がよりもちもちした印象なり、リアリティもアップ!

担当ディレクターやチーム内でも好評で、特集の売上としては現時点で過去最高となりました。



このように施策として、ちょっとしたGIFアニメーションを作る機会も多々あります。サイトによってはリアルなビジュアルを求められるものもあり、アニメーションにしたときに自然な動きに見えるよう、違和感が無くなるまで、繰り返し動きを調整するようにしています。

 

f:id:cam-engineer:20190417171841g:plain

▲ 違和感が無くなるまで、繰り返し動きを調整した結果・・・


 

「インド推命占い 小林庚山(https://sp.kobayashi-kozan.net/)」というサイトの年末施策で花火のアニメーションを制作した際には、実際の花火の映像を見ながら、開いて消えていく動きに緩急を付けたり、タイミングに合わせて建物に光の反射を入れることで、よりリアリティを追求しました。

 

見ているユーザーに違和感を与えてしまうと、世界観の邪魔になってしまいますので、動きの固さや単調さを排除し、没入感を高められるようにしました。

 

リアルなアニメーションの動きにこだわるようになると、同期や先輩からもアドバイスを求められるようになりました。

 

 

初めてのサイト・フルリニューアルを経験

 

2018年の10月頃から、看板サービスの1つである「ゲッターズ飯田の姓名判断(以下、姓名判断と略記)」のwebサイトのフルリニューアルプロジェクトに、サブデザイナーとして途中参加しました。

 

メインディレクター指揮の元、ディレクター2名、マーケター2名、デザイナー2名、フロントエンドエンジニア4名、サーバーサイドエンジニア2名のチームで進行しました。

 

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

▲ 「ゲッターズ飯田の姓名判断」リニューアルプロジェクトのメンバー構成

 

マーケティング調査の結果、売上増はもとより、ライトユーザーに優しいサイトにするという目的も加わり、2つの大きな変更を行うことになりました。

 

機能面では、より使いやすさ・わかりやすさを重視した機能の追加を行い、ビジュアル面では、占いサイトに特有のデコラティブであやしいイメージから、ラグジュアリーで上品なイメージに変更しました。

 

12月の公開に向けて、全体で約4ヶ月にも及ぶ長期スケジュールで進行しました。

 

結果、売上は112%増、退会率は大幅減、ユーザーアンケートでは満足度が75%超と、リニューアルを経てよりユーザーに楽しんでもらえるサイトとなりました。

 

ちなみに、このリニューアルの実際のデザインフローについては、メインデザイナーのブログに書かれているので、併せてご覧ください。

 



これまでは、既存のクリエイティブを手本にすることでそのサイト特有の世界観を把握することができたのですが、全てを刷新するリニューアルではそうもいかず、最初は苦労しました。

 

メインデザイナーの先輩に相談したり、制作したデザインを1度全て捨てて作り変えてみたりと、試行錯誤の連続でしたが、せっかくサブデザイナーとしてアサインされたので、メインデザイナーの作り上げた世界観により深みと厚みを出せていけたらと思っていました。

 

また、リニューアル公開後、すぐにクリスマスとお正月の季節施策を全て任せていただけることになったのですが、こちらも大幅リニューアルしたデザインに合わせつつ、どう季節感を出していくかで、とても悩みました。

 

  • 和風テイストのサイトなので、それをクリスマスとどう合わせるか
  • すでにリッチなデザインなので、特集の特別感をどう出していくか など…

 

そこで、施策ごとに簡易的なムードボードを用意し、イメージの方向性を固めていきました。

ムードボードとはデザインの抽象的なコンセプトや雰囲気(ムード)を具体的に表すために、自分が思い描いているイメージと近い写真やカラー・テクスチャやフォントなどをコラージュしてまとめたものです。

ムードボードを作成する目的には、主に以下のようなものがあります。

 

①チームで抽象的なイメージを共有するため

「ピンク」といっても、ショッキングピンクのような強いピンクから、桜色のような淡いピンクまで、人によって持つイメージにズレがあります。

 

こうした言葉の曖昧さを排除するため、近似的な特徴を持つ写真やテクスチャー、カラーをコラージュにまとめ共有することで、チーム内のデザイン認識のズレを防ぎます。

 

②自らのデザインの一貫性を保つため

イメージが固まりきらないまま、なんとなくデザインを作っていくと、最初のテーマから大きくブレてしまいます。

 

デザイン作業に着手する前に、ムードボードでアウトプットをしておくことで軸ができ、これと照らし合わせながら一貫したデザインを作成することができます。今回は

こちらの目的で作成しました。

 

ムードボードを活用したことで、限られた時間の中でクリスマス施策、お正月施策共に、リニューアル後のデザインにマッチするアウトプットを作り出すことができました。

 

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

▲ ムードボードを活用し、限られた時間の中でイメージにあったビジュアルを作成



大規模リニューアルを初めて経験して、プロジェクトがどのように進行するのか、ディレクターやエンジニアとどのような場面でどのように連携するのか、初めて実感を持って知ることができました。

 

サイト全体の構築はもちろん、デザイナーがより良いデザインを作り上げていく部分だけとっても、チーム内の密なコミュニケーションが欠かせないことを学ぶことができた貴重な機会となりました。

 

この経験を通じて、自分もいつかこういった大型案件を任されるデザイナーになりたいと強く思うようになりました。



看板サイトの担当デザイナーに

 

このリニューアルを乗り越えた後、看板サイト「ゲッターズ飯田の占い」のメインデザイナーを担当させてもらうことになりました。

 

占い事業の根幹とも言える、最重要サイトの一つなので、責任重大です。

 

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

▲ 「ゲッターズ飯田の占い」のメインデザイナー担当となり制作した施策ページ

 

「ゲッターズ飯田の占い」は、フラットデザインを取り入れたサイトで、作り込みの多いサイトに比べ、ビジュアル的な主張が小さいため、より世界観を摑むのが困難です。

 

ページ改修や特集ページなど、色々と作らせていただいていますが、ページの作り方や、イメージの広げ方などは、姓名判断のリニューアルで学んだことを生かせているなと思うことが増えてきました。

 

今まで学んだことをフルで活用して、よりユーザーに好きになってもらえるサイトにしていければと思います。



最後に

 

こうして振り返ってみると、この1年で思いの外、多くの経験を積むことができたと思います。

 

直近では、「Happyフェス」というリアルイベントで、フライヤーやパネルなどの紙媒体のデザインを手がけたり、占い師のVtuber(通称:Ftuber)・セフィラ・スゥの動画で使用する素材を作成したりと、より幅広いデザインを手がけるようになりました。

 

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

▲ 「Happyフェス」用に用意した制作物の数々

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

▲ 占い師のVtuber・セフィラ・スゥの動画で使用する素材も手がけた

 

媒体やアイテムによって押さえるべきポイントも異なるので、実際にユーザーが目にしたり触れたりする状況を擬似的に作って、見え方・感じ方をチェックしましたが、このひと手間がとても大切だということを、このイベントを通して学びました。

 

また、業務以外にもインプットの時間は意識的に取るようになりました。UIトレースをしたり、UXの本を読んだりと、日々知識を増やすようにしています。

 

上司や先輩方がそういった勉強も推進し、やりやすい環境にいるので、すごく恵まれているなと感じます。

 

研修の時は自信も無く、やっていけるか不安も多くありましたが、周囲のサポートのおかげで、デザイナーとしてひと回り成長してきたと思います。

 

今後はよりデザインのクオリティを上げて、活躍の場を広げることで恩返ししていきたいと思っています。

 

4月には後輩も一気に増えるので、頼られる先輩になれるように、引き続き邁進していきます!

 

(デザイナー N.O)

関連記事:

tech.cam-inc.co.jp

 

tech.cam-inc.co.jp