クレジット機能のデザイン

Cocoda上に投稿したデザインに、クレジットをつけられるようになりました。今回はその備忘録として、リリースのプロセスや試行錯誤について振り返ってみようと思います。

クレジット機能について

Cocoda上に、これまでの実績やリリースしたものを載せる時に、プロジェクトやリリース、制作に関わった人をクレジットとして紐づけられるようになります。

特にサービスに関わるデザインでは、複数人でデザインをすることも多い中で、「どんな人と一緒にデザインをしたのか」を残すことができます🎉

自分以外のデザイナーはもちろん、エンジニアやビジネスサイドなど、デザインに関わったメンバーを紐づけて、チームのデザインを公開してみてください。

なお、クレジットに載せられたメンバーは、投稿者同様に、投稿されたデザインを編集することができます。


※ 現状、クレジット登録するにはCocodaアカウントを持っている必要があります。紐付けたい方がお持ちでない場合は、「クレジットに載せたいから🙏」と言えば、きっと快諾してくれるはず..!です。

では、プロジェクトの振り返りを残していこうと思います。


今回のプロジェクトのハイライト

リニューアルや、リブランドなどと違って、地味だけど確実に価値になるような機能のデザインでは、以下のようなことを意識して進めました。

a. 課題は、特定の人を思い浮かべながらイメージがつくぐらい解像度を高く持つ

b. 課題が合っていたのに、解決策が違うということをなくすために、「あってもよい」は最初はつくらず、王道の行動に絞ってつくる

c. より早く検証できるように、なるべく既存コンポーネントで賄う

1. まずはnotionで起票

Cocodaを運営するalmaチームでは、基本的に議事録からイシュー(課題とやることを載せたもの)、wikiまで全てnotionにまとめています。

今回のクレジット機能も、サービスデザインの実績が少しずつCocodaに上がり始めたタイミングで、「自分の実績も上げたいんだけど、自分だけがつくったわけじゃないし...」というような声を受けて起票されました。

実際に起票されたnotionはこんな感じ。

中身はこのような感じ (今見返すともうちょっとより良いニュアンスで書けそうな気も...)

このイシューの場合は、すでに別のイシューを通して、課題感のヒアリングや調査は済んでいたため、課題の存在は確信して進めました。

2. 他のサービスで解決できている例や、モチーフになりそうなものをリサーチ

仕様を固めるよりも先に、「他にも同じような課題を解決しようとしてるサービスあるかな?」「クレジットをつける関連で定番のメンタルモデルあるかな?」をざっくりリサーチしました (この部分はエンジニアメンバーの @yokinist も協力してくれました、ありがたい🙏)。

他のサービスを見ながら、イメージを膨らませていきます。

3. 課題を解決する一連のフローを整理

打ち手のリサーチを通して、イメージが明確になってきたら、言葉に落としていきます。

個人的にいきなり仕様書みたいな感じで言葉に落とすと、文脈が抜け落ちてしまったり、何をつくるかにフォーカスしすぎてしまうので、あまり厳密にはつくってません (プロダクトが大規模じゃないというのもあると思う)。

4. ラフにつくってみて、相談

デザイナーメンバーの @greatest_hiroki に相談。クレジット追加やその表示など、王道なフローをまずはつくってみます。

相談しつつ、気になるポイントが解消されていったら、より細かな部分をつくっていきました。

実装部分で困りそうなことや、これまでの実装していないようなものがある場合は、実現可能なのか、どのぐらいコストをかけると実現するのかなども相談 (@yokinist ありがとう🙏)。

5. 不確実さを減らすための絞り込み

相談しながら、大枠の課題を解決するためのUIができてきたところで、「最初のリリースでこれ必要?」といった、断捨離タイムを取りました。

figmaで進めていたのですが、右のオレンジ部分や赤部分は今回は作らないとなったものたちです。

例えば、クレジット掲載の承諾フロー。

クレジット機能が使われ「たら」、あった方が良いものだと考え、コストも加味して最初のリリースでは実装しないことに。

また、クレジットに役割を入れた方が良いのかどうかについて

これも悩みましたが、同じく「クレジット機能が使われたら」出てくる追加の要望に当たるのかなと判断して実装を見送りました (記入するコストの方が上回って、クレジット登録されないとなっても本末転倒だなという話をした記憶)。

6. 細かなインタラクション部分を詰めて、実装へ

断捨離をしながら、ホバー時の状態やSP版、フォームの入力時の挙動など、開発に必要な画面や状態をつくっていきました。

初期から開発メンバーとは相談していたので、詰めてからいきなりパスではなく、一緒に詰めていきながら決まった部分を徐々にパスしていくような感じで進めていました。

無事に実装への完全引き継ぎ完了。エンジニアメンバーが爆速でリリースしてくれました! (2日ぐらいでリリースされたはず)

7. 振り返り

まだリリースされて間もないので、本当に使われているのか、課題が解決されるのかに関してはこれから検証を進めていきます💪

プロセスに関して振り返ると、課題から実装へ、スムーズにいけたなのかなと感じています。相談に乗ってくれた @greatest_hiroki @yokinist の頼もしさ、そして既存のコンポーネントが整ってくれてたこと、爆速で実装してくれた @yshir に感謝です🙏

また、1stリリース時に役割まで入れられるようにするか、Cocodaを使ってない人のためにメールアドレスでの追加が良いんじゃないか、など迷った点も多々あります...こっちの方が良いかもなど使い手としての意見があれば気軽にコメントくださると嬉しいです!

引き続きデザイナーがもっと心地よくデザインできていくためにCocodaをつくっていきます🔥では!

おまけ

サムネに悩んで、「クレジットという言葉に馴染みが薄い人もいるのでは?」と思い、映画のエンドロールをモチーフにサムネをつくってみてたりしました笑

供養しておきます🙏

ストック

0人が追加済み

所属チーム