想いをまっすぐに語れるLPをデザインするためにやったこと

皆さんこんにちは。Cocoda!というサービスを作っているデザイナーのグレイテストヒロキです🕺
今回は2020年3月にリリースされたCocoda!の新LPのデザインについてまとめたいと思います🎉

今回はその過程でデザインチームで取り組んだことや、学んだことを備忘録的にまとめていきたいと思います。所謂LPのデザインテクニックなどではありませんが、サービスコンセプトや想いがちゃんと伝わるようにする為にこういったやり方もできるのか〜という1つの事例として参考にしていただければと思います🙋‍♀️

🚩1.変化を反映し、よりコンセプトが伝わるLPに

新しいサービスを生み出し運営していく上で「変化」というものはつきものです。実際リリースしてみた上での機能改善、ユーザーの皆さんと対話していく中でブラッシュアップされていく思想や、運営自身のスキル向上など様々な変化が起こります。

僕たちが運営するCocoda!も例に漏れずで、2018年に正式版をリリースしてから様々な機能改善が実施されたり、コンセプトのブラッシュアップが行われましたが、その中で現状のユーザーコミュニケーションでは「今」のCocoda!を正確に伝えられていないのではないかという違和感が出てきました。

その違和感の一つは2018年の正式版公開からそのままになっていたLPにあり、具体的には下図のような課題がありました。

上記の課題を踏まえ、諸々の大きなリリースを終えた直後の年初のタイミングでLPリニューアルに取り組むことに決め、下記の点を意識しながら改善していくようプロジェクトを進めていきました。

CVRを向上させるための小改善や、現状の機能との情報の整合性を取るための微修正というような位置付けではなく、Cocoda!とは何で何ができるのかを伝えきるために、リリース以降学んだことや考えてきたことを全て棚卸しし、伝わるための工夫をチームでどんどん取り入れていく事を意識しました。

💡2.Cocoda!の世界観を言語化する

LPの内容を詰めていくにあたってまずはじめにリリース当初のCocoda!の思想と、今僕たちが思っているCocoda!の思想を整理していくことにしました。過去から今まで何が変化したのかを把握し、改めて今のCocoda!を定義することで伝えるべきことは何かを明確にしていきます。

プロジェクトメンバーを中心にそれぞれに言語化を進めながら、デザインチームとのディスカッションを進めていきました。

議論を進めながら整理してみたものが以下です。
ユーザーの理想の体験という切り口で、Cocoda!はどういう立ち位置で存在するのか、どのような変遷を元に今後はどのような価値を提供していくのかを整理しています。

当初は「デザイナーになりたいが何から始めたら良いか分からない、一人では不安が大きい」という人の為に「デザインが学べるお題」や「コミュニティ」を価値として提供していましたが、

デザインを始めること自体は難しくなくなってきた反面、デザイナーとして生きていくためにはまだ課題が多かったり、サービスとしても「なったら終わり」ではなく「デザイナーとして生きていける」事にフォーカスしたいという想いがあり、

Cocoda!はデザイン活動の拠点として、ユーザーの皆さんが学び、働き、自己表現をしながらデザインで生きられるコミュニティであろうという指針を明確にしました。
(思想の詳細部分はこちらのnoteでも触れているので見てみてください!💡)


2-2 コンセプトを言葉に落とす

次に、整理したものをより端的に伝えられるような言葉に落とし込んでいきます。世界観の輪郭を捉えつつキャッチーに要素が伝わっていく為に「比喩」や「連想」をベースに下記のような言葉を出していきました。

いくつか案を出し検討した結果、「Designer's hub」という言葉がしっくり来ました。デザイナーの活動の拠点であり、誰でもオープンに参加できて、それぞれが思うようにデザインしているというイメージが湧く良い言葉だと思っています💡

さらに、Designer's hubの世界観がより直感的に伝わるように日本語のサブテキストも添えることにして発散→収束を行った結果「あなたがクリエイターでいられる場所」という言葉に決定しました。

👩‍🎨3.思想をグラフィックへ変換する

定義した「designer's hub」という世界観をLPのビジュアルでしっかりと伝えられるようにするために、モチーフを発散しながらどんな情景なのか、どんな現象が近いのかをすり合わせていきます。

Pinterestで探してきた画像をそれぞれ見ながら世界観の輪郭をクリアにしていき、抜き出してみた要素が以下の4つです。

・オープンな空間であること
・人が集まってくる場所であること
・それぞれの世界がつながっていること
・各々が好きなように生きている感じ

要素の整理を進めている段階で、当時まだ正式加入前だった鮎ちゃん(https://twitter.com/kitajimannn)が恐ろしいまでの当事者意識でラフイラストを作成してくれたのがこちらです🙌

(か、、かわいい、、、、😭)

世界観や押し出したい印象がイラストとして可視化された瞬間、一気に伝えたいことのイメージが固まってきました。

また、Cocoda!は学習する要素だけでなく、仕事やコミュニティの文脈も一つにまとまってCocoda!なのだと考えていたので、それらを箱庭のイラストで表現することが適しているように感じ、上記のイラストをベースに整理した要素を入れ込みながらビジュアルを組み立てていく事にしました。

上記の様に要素を捉えながらラフイラストを発散していき、最終的には学習・仕事・コミュニティの3つの要素がそれぞれ存在しながらもなめらかにつながっている世界観を演出できそうなB案に絞り込んで具体化を進めます。

完成がこちら。超カワイイです。
今まで言葉でも中々うまく表現しきれなかった、「Study」「Work」「Community」が分断されることなくなめらかにつながっていて、そこでデザイナーたちが集まって好きなように生きていけるという世界観がうまく表現できていて素敵、、感謝すぎる😭

3-2 並行してLPの内容や見せ方を検討

モチーフのビジュアルを具体化することと同時に、LPでどのような内容をどのようなレイアウト・押し出し方で見せていくのかを検討していきました。
「要件の整理」 「リサーチ」 「パターン出し 」を行った上で、最終的なレイアウトを絞り込んでいきます。

絞り込みを行ったものと、イラストを組み合わせてできた完成度60%のLPデザインがこちらです。

🦄4.最後は気合いとコミュニケーション

ある程度デザインが固まった段階からはデザインチームでグラフィックを作り込んではレビューをしあいながら完成度を高めていきます。
もともと1人体制だったデザインチームが、2月から人数が増えたためグラフィック面を細かく壁打ちしながら進められるようになり、クオリティアップのスピードが格段に上がりました。

また、デザインFix以降も実装段階で @story_translateさんがアニメーションを入れ込んで最後の最後までクオリティアップを図ってくれました。
特にファーストビューのイラスト部分で、一人のデザイナーがCommunity、Study、Workのエリアを回遊するアニメーションによって、それぞれの世界を行き来しながらデザイナーとして生きていくという世界観がより伝わりやすくなったかと思います💡
是非実際に見ていただけると嬉しいです!(今Cocoda!にログインしている人は、一旦ログインすると見ることができます、、!)
(Website → https://cocoda-design.com/)

💬リリース後の反応

LPリリース後は各所から嬉しい反応を頂いたので、一部を紹介したいと思います。まだリリース後1日ですが、コンセプトがしっかりと伝わったりデザインで喜んでもらえているようで、ありがたく思います😭

✍️まとめ

色々と書きましたが今回のリニューアルプロジェクトでの学びを整理すると以下になります。

・サービスを運営する中で様々な改善や、思想の深化が起こる
  → そのため、思想自体の更新と、それらを伝える為のインターフェースとの一致を図る必要がある
・思想の言語化にこだわって伝えたいことを明確にすべし
・視覚情報はモチーフを出しながら議論するとイメージが湧きやすい
・モチーフが明確だと、それぞれがより伝わりやすくするための工夫をしやすい

今回はサービスを伝えるためのLPをリニューアルしましたが、今後も伝えている内容の期待値を超えるようにサービスをアップデートしていきたいと思います!💡

ストック

0人が追加済み

関わったメンバー

所属チーム