デザイナーとエンジニアで同じAPIを使ってそれぞれ自己開発してみたらいろいろ違いがあった件

2024/07/26にあった「デザイナーとエンジニアの語り合わNight！〜 壁があるなら壊しませんか記念日 〜」（URL : https://yumemi.connpass.com/event/323366/）で登壇したときのスライドです。

※一部発表時と変更しています

Transcript

1. ゆめみ きゃのん（X: @kanonnot_）プレゼンツ デザイナーとエンジニアで 同じAPIを使って それぞれ自己開発してみたら いろいろ違いがあった件
2. Textalive(API)を使ったWebアプリを デザイナー（私）とエンジニア（T氏）でそれぞれ作ってみました。 きゃのん s UX/UIデザイン（Web/モバイルt s ややフロントエンi s 趣味でイラスト, CG, 動画, 音` s Kotlin勉強中 デザイナー T氏（仮名） s バックエンド, インフラがメインだけどフロ ントもAIもやってる（らしいt s 趣味も開発。botとかAIとかちょっとした ツールとか作ってくれる エンジニア
3. Textaliveとは！！ TextAliveは、ウェブ上に公開されている音楽に合わせて歌詞が動くリリックビデオ（歌詞アニメーショ ン）をブラウザ上で作れる制作支援サービスです。簡単に自分好みの演出をつけて動画を制作できます。 音楽をもっと楽しみたい人、自分の曲に動画をつけたい人、新しい演出を開発したい人、みんなで協力し 合ってコンテンツを作り出せるサービスです。 https://textalive.jp/　 より参照 気になった人は調べてみてね！！
4. サクッとデモタイム リンク先でデモ環境見れます きゃのん 作 https://textnotalive.netlify.app/ T氏 作 https://suparhero.vercel.app/
5. 使った技術 両者共に、基本的な環境はNext.js(Typescript/React)で制作 T氏⁨⁩（エンジニア） y スタイリングに使e y アニメーション実装に使用 (そのほか部分的に色々使用) Tailwind css Framermotion きゃのん（デザイナー） y インタラクティブアニメーション作成に使e y 上下スワイプのインタラクションに使用 （CSSは手書きにして後悔しました） Rive Swiper
6. 制作する上で いろんな違いがあった 制作プロセス きゃのん（デザイナー）はやりたいことベース T氏⁨⁩（エンジニア）はできることベース スピード きゃのん（デザイナー）は作りながら考える T氏⁨⁩（エンジニア）は考えてから作る 苦戦したポイント きゃのん（デザイナー）は実装（そりゃそう） T氏⁨⁩（エンジニア）はデザイン（そりゃそう）
7. 制作プロセス スケッチ 実装 実装 きっちり設計・UIデザイン できることベースでしっかりと設計してから 実装したいT氏⁨⁩（エンジニア） やりたいことベースで作りながら 改良していきたいきゃのん（デザイナー） 3~4回繰り返す
8. コード保守性への意識 きゃのん（デザイナー） T氏⁨⁩（エンジニア） →動けばなんでもいい →読みやすさや変更のしやすさを意識 スピード 意外にもきゃのん（デザイナー）が2週間弱先に完成させる。理由はこの２つ？ 各フェーズの捉え方 きゃのん（デザイナー） T氏⁨⁩（エンジニア） →できるだけ早く動くものを作りたい →各フェーズしっかり取り組んでから次に行 きたい 作りながら考えるか、考えてから作るか
9. スピード Figmaでしっかりアセット管理までする T氏⁨⁩（エンジニア） デザイナーとは思えないほど雑な きゃのん（デザイナー） ↑ これで初回プロトを作り始める Figmaの綺麗さに違いが出る（性格の問題な気もするこれは） 私のは後から見て破滅的にわかりにくいので反省
10. 苦戦したポイント きゃのんの得意がT氏の苦手、T氏の得意がきゃのんの苦手 T氏⁨⁩（エンジニア）の苦悩は主にデザイン面 イラスト描けない... イラストと曲に合うデザインわからん きゃのん（デザイナー）の苦悩は主に実装面 画像の読み込みが曲を切り替えるごとに入っ てキモい... 上下スワイプで曲を切り替えるトリガーわか らん！！！
11. 苦戦したポイント きゃのんの得意がT氏の苦手、T氏の得意がきゃのんの苦手 お互いの苦手を助け合うことで2人とも完成まで持っていけた T氏⁨⁩（エンジニア）の苦悩は主にデザイン面 イラスト描けない... イラストと曲に合うデザインわからん きゃの）ほらよ（イラスト描いてあげる） きゃの）曲名的にアメコミっぽい感じがええ で きゃのん（デザイナー）の苦悩は主に実装面 画像の読み込みが曲を切り替えるごとに入っ てキモい... 上下スワイプで曲を切り替えるトリガーわか らん！！！ T氏）Reactにプリロードするやつあるで T氏）使ってるライブラリにそういう機能ある かもよ（あった）
12. 2人で一緒に何か作るならこう？ きゃのん （デザイナー） T氏 （エンジニア） やりたいことがわかる プロトタイプ作り 技術検証 ドキュメントインプット 環境構築 インフラ, サーバー, API などの設計 UI設計 ビジュアルデザイン 2人で実装しまく る！！！ 随時情報共有しつつ アセット作りは分担できそう ※私はこのあたりよく知らないので雰囲気で書きました
13. 以上！ありがとうございました！