AmebaLIFEのデジタルプロダクトデザインリードがCursorを使い、デザイナーが実装まで踏み込んだ事例。
従来は「デザインはモックアップで、実装はエンジニア」という分業で、最終成果物のクオリティが90〜95に落ち込みがちだった。AIによって学習コストが下がり、デザイナーが自分で実装し責任を負えるようになったという立場をとる。
AmebaLIFE事業本部公式サイトでは、エンジニアが環境構築とデザイン実装のたたき台までを用意し、デザイナーがCursorのVisual Editorでスクロールアニメーション、Hover、レスポンシブを調整。最後にエンジニアがコードレビュー、という流れを採用した。
技術的な見どころはAbout UsページのLIFEラインアニメーション。SVGの線が一回転して交差する見た目を、グラデーションではなく「Xが負に転じるタイミングでパスを分割し、3本の線を連続描画する」方法で実現。各パスはベジェ曲線の長さの比率でduration分配し、1本の線が描かれていく体験を保つ。
一方で、AIコードには !important の多用、トークン無視のハードコード、JSへの過剰投入、Safari固有のフレームレート低下などが残るため、コードレビュー、DOM設計、技術選定、CMS管理はエンジニアの領分だと整理している。
職域越境のコストはあるが、コミュニケーションコストが減り、各職種が専門領域に集中できるようになった。現在進行中の他プロジェクトではデザイナーがGitHubでPRを出し、エンジニアのレビューを受けるワークフローで動いている。
