見出し画像

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

皆さんこんにちは。Cocoda!というサービスを作っているデザイナーのグレイテストヒロキです🕺
年始から少しずつ動いていたCocoda!のLPリニューアルがつい先日リリースされました🎉

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

画像1

画像2

画像26


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

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

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

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

画像15


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

画像6

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


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

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

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

スクリーンショット 2020-03-25 0.33.12

スクリーンショット 2020-03-25 0.34.08

スクリーンショット 2020-03-25 0.34.22

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

スクリーンショット 2020-03-25 1.34.04

スクリーンショット 2020-03-25 1.35.57

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

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

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

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

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

スクリーンショット 2020-03-25 1.50.54

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

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

スクリーンショット 2020-03-24 21.38.46


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

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

スクリーンショット 2020-03-24 17.59.30

スクリーンショット 2020-03-24 17.27.51

スクリーンショット 2020-03-24 17.28.18

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

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

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

スクリーンショット 2020-03-24 16.27.57

スクリーンショット 2020-03-24 16.34.05

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

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

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

スクリーンショット 2020-03-24 16.43.24

スクリーンショット 2020-03-24 16.43.34

スクリーンショット 2020-03-24 16.43.43

スクリーンショット 2020-03-24 16.40.09

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

スクリーンショット 2020-03-24 16.40.25

スクリーンショット 2020-03-24 16.40.36

スクリーンショット 2020-03-24 16.41.05

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

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

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

スクリーンショット 2020-03-24 17.36.27

スクリーンショット 2020-03-24 17.40.04

スクリーンショット 2020-03-24 17.45.04


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

スクリーンショット 2020-03-24 17.51.15


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

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

スクリーンショット 2020-03-24 18.23.23

スクリーンショット 2020-03-24 18.24.24

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

💬リリース後の反応

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

✍️まとめ

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

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

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

🙋‍♀️クレジット

デザイン : @greatest_hiroki   @ArigaIkumi
イラスト : @kitajimannn
コーディング : @story_translate
思想家@kenjikatooo  @co_co_d3

良いリリースに感謝!これからも頑張っていくぞ〜〜🔥🔥

---------------  ✂  --------------


🙌最後に : デザイナーの方へ

現在Cocoda!で新たな取り組みを始めています✨

知見や経験がオープンになっていないデザイナーの働く環境にもっと貢献したく、デザイナーが多く集まるサークルをSlackで作っていっています。

「自分のデザインの幅を広げよう」というコンセプトで、自分の環境では得られない知見や経験に触れられるようなサークルにしていければと思っています。既にいくつかのデザインチーム・CDOの方などから知見や経験になりそうなプロジェクトをもらってきて、サークル限定で流し始めているので、ご興味がある方は是非ご参加ください〜🚀







この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

このスキのおかげでまた僕は元気に生きられます!
132
Cocodaというサービスを作っています。 主にデザイン・フロントエンドを担当しています。 デザイン界隈を盛り上げたい欲が食欲を一回り分くらい上回ってます。 twitterはこちら(https://twitter.com/greatest_hiroki)
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。