Cocoda

日本を代表するデザイン組織の「舞台裏」がまとめられた、デザインの事例集、Cocodaの公式アカウントです。 デザイン組織の拡大支援はこちらから👇

[Cocoda @Cocoda_design]

10/8(木)開催 『DESIGN LEAD 1on1』📣

DeNA・MIXI・エムスリーのデザインリード9名が集い、プロダクトやクリエイティブ、組織づくりまで、現場の最前線を共有し合います📌

無料参加チケット予約受付中。ぜひお越しください🤝

[DeNA DESIGN @dena_design_jp]

【イベント登壇】Cocoda主催「DESIGN LEAD 1on1」にデザイン統括部の久田・田村・藤永が登壇🔥

プロダクトデザイン／クリエイティブ／組織づくりの3テーマで、MIXI・エムスリーのデザインリードと知見を交換します👀

📍10/8(木) MIXI 渋谷オフィス
詳細&申込みはこちら👇
https://t.co/I2dlHV1WXO

[Cocoda @Cocoda_design]

イベント詳細・参加申し込みはこちらから📝
https://t.co/0uFcRHm6DA

[Cocoda @Cocoda_design]

10/8(木)開催 『DESIGN LEAD 1on1』📣

DeNA・MIXI・エムスリーのデザインリード9名が集い、プロダクトやクリエイティブ、組織づくりまで、現場の最前線を共有し合います📌

無料参加チケット予約受付中。ぜひお越しください🤝

[Cocoda @Cocoda_design]

カナリーでの、Claude Codeを使ったUI生成フロー📚

「トンマナは合っているがありがちなUIが生成されてしまう問題」を、「デザイナー人格」というskillを組み込むことで解決しています。

LLMをリードデザイナーの1人として扱うというスタンスも含め参考になります

https://t.co/JQVSbFm5Lh

[Cocoda @Cocoda_design]

@emim ありがたいフィードバック、非常に助かります🙏！事例を楽しんでいただけるよう、改善させていただきます

[varhira // 🦄 @varhira]

最近の取り組みを記事にしていただきました。
https://t.co/mro1MhxE2U

ヒアリングから得られたシニアデザイナーの思考の型をAIの実行環境に移植し、AIを含めた誰もが使える形に落とし込みました。

・・・

個人的なテーマとして、
「テクノロジーは、何の寿命を伸ばすのか？」
という問いを立て、

「エキスパートの思考を外在化（電脳化）する」

という形で活動領域を広げていっていますが、
UIデザイン領域ではこんな実践を行っています。

ぜひ読んでいただければ嬉しいです。

[てらもと | CANARY デザイナー @mayugelion]

AIにUIを作らせると「機能は満たしてるけど、よくある画面」になりがち問題。
デザインシステムに沿わせるほど、合理的だけど必然性を感じ���いデザインになってしまう...

カナリーではUI生成の際に「デザイナーの人格」(何を考えてデザインしているか？)を学習させています。
それをアイディアを発散させるフェーズを挟むことで、リードデザイナーが作ったような必然性のあるデザインを生成する仕組みを作りました。
https://t.co/JmgqmnknjO

最近公開したCanvas機能を設計している @varhira さんに記事をまとめていただきました

[Arina | プロダクトデザイナー / PdM @arina_web]

AIの「それっぽいUI」が出来上がる問題…

デザイナーの思考や発散の仕方までskillに組み込み解決しました💡

「LLMをリードデザイナーの1人に仕上げていく」という発想、ぜひ読んでみてください👇

[Hiroki Osugi @greatest_hiroki]

実際に社内で活躍しているリードデザイナーの思考プロセスを再現するという視点で、Skillをつくっていっているの面白い。

https://t.co/xSTXpApmeP

[こぎそ @kgsi]

カナリーさん @Canary_Product のAIによるUI生成の事例👀
ガイドラインだけでなく、リードデザイナーの思考手順そのものをskillにして、収束の前に発散の工程を挟んでいる。

「ありがちなUIになる」をプロンプトの問題ではなく、フローに発散��無いという構造の問題として捉えているところが気になった、実際に上手くいってるところ、逆に伸びしろなところも聞いてみたいな。

https://t.co/HIQhTy5E4Q

[てらもと | CANARY デザイナー @mayugelion]

【UIデザイナーが作って良かったSkill紹介 その3】
オブジェクトがどのように紐づいているのかを見たくて、
デザインデータと概念図とER図を同じキャンバスに乗せて、メニューひとつで行き来できるようにしまし��。
どちらも同じ出所のデータから描いているので、片方を直せばもう片方も追従できます。

見たいものを1つのツールにまとめると更新も楽で、良いツールが出来ている気がする...
デザイン業務自体を自分でアップデートできるのは良い時代...!!

[てらもと | CANARY デザイナー @mayugelion]

【UIデザイナーが作って良かったSkill紹介】
プロトタイプのアイディア発散をAIで行った時に思っていたこと。
「A案とB案を並べて俯瞰し、体験観点でメリデメを洗い出したい。。。」

なので、Figma のアートボードみたいに、生成した画面モックをキャンバスに複数並べて比較できるSkillを作りました。
Skillのコマンド1発で、比較用のhtmlが吐き出されるように。 加えて、エンジニア同士の連携用に簡単にテキストが記載できてスクショを元に議論ができる。

いままではツールの機能追加を待つしかなかったが、今は自分たちで制作してメンバーに共有できる。
デザイナーが事業に必要な道具を自分で作れる時代になったなぁと思う
@varhira

[てらもと | CANARY デザイナー @mayugelion]

【UIデザイナーが作って良かったSkill紹介 その2】
業務フローに合わせたUIデザインを設計していた時に思っていたこと。
「遷移図に小さく画面名が並んでるだけだと、この遷移が妥当か判断できない。。。」

なので、画面遷移図のとおりに実物のモックを並べて、線でつなげられるようにしました。
デザイン生成の延長で、Skillのコマンドでキャンバスが出てくる。
業務の主経路は太線としているので、ユーザー体験がデザイナー以外でもひと目で分かる。

どのオブジェクトが業務としてのハブにすべきかなど、遷移図を眺めているだけでは気づけなかったことが、
図や触れるモックとして形で見えるようになってきた。

また、いままでは遷移図と実画面を別々に管理して、片方直すともう片方がズレていた。
今は遷移図を直せば、キャンバスごと組み直せる。

[ネガティブスピーカー @wild_onion]

こんなに有用な��事はめったにお目にかかれない

[Cocoda @Cocoda_design]

面白い
https://t.co/TzlM0qj3Ld

[Cocoda @Cocoda_design]

カナリーでの、Claude Codeを使ったUI生成フロー📚

「トンマナは合っているがありがちなUIが生成されてしまう��題」を、「デザイナー人格」というskillを組み込むことで解決しています。

LLMをリードデザイナーの1人として扱うというスタンスも含め参考になります

https://t.co/JQVSbFm5Lh

[kadoppe / mento @kadoppe]

顧客の体験に加えて、事業数値や市場からの要求というのも踏まえて、そこを本質的な課題に変換し、課題解決に取り組むデザインプロセス

最終的に事��数値や市場に対してどういう影響を与えられたかという観点でも振り返り、次の判断に繋げていく形になってるのがいいな。https://t.co/e9TBUlCQGC

[Cocoda @Cocoda_design]

ラクスルのプロダクトデザインの仕組み📚️

データから顧客行動を把握し、Design Briefで目的・課題・解決策��定義する。

チケット印刷・カード印刷、2つの改善事例を交えて、ラクスルでの効果につながるデザインプロセスがまとめられています。

https://t.co/Hphr2sibbC #Cocoda