スキル
担当範囲
使用ツール
キャラクターアニメーション
キャラクターデザイン
インタラクティブアニメーション
Riveステートマシン設計
Riveアニメーション
キャラクターデザイン
Rive
Whisper: daily quotes App
Argo: アプリ向けRiveキャラクターアニメーション制作
Whisper: Daily Quotesのマスコットキャラクター「Argo」のデザインおよびアニメーション制作を担当。匿名ジャーナリングアプリ向けに、Riveを使用して構築しました。
6つのアニメーションステートに加え、気分に応じて切り替わるインタラクティブなトランジションを実装。Riveのステートマシン、コンポーネント、データバインディング機能を活用し、デザイナーとデベロッパーが相互に活用がしやすいアニメーションシステムを設計しています。
プロジェクトの概要
Whisper: Daily Quotesは、毎日の気分を記録し、その気分に応じた名言を閲覧できるほか、他のユーザーから励ましやアドバイス、体験談を受け取ることができる匿名ジャーナリングアプリです。
本プロジェクトでは、アプリのマスコットである「Argo」のキャラクターデザインおよびアニメーション制作をRiveで担当しました。
キャラクターのリデザインに加え、「Hi」「Note」「Clear」「Sad」「Angry」「Anxiety」の6つのアニメーションステートを制作し、Riveのステートマシンとデータバインディングを活用した、気分に応じて変化するインタラクティブなキャラクターアニメー ションとUX体験を構築しています。
プロジェクトの目的
本プロジェクトでは、Riveを活用したキャラクターアニメーションとインタラクティブな表現を通じて、毎日の気分を記録するジャーナルアプリのユーザーに寄り添うマスコットキャラクターの制作を目指しました。
表情豊かなアニメーションに加え、Riveのデータバインディングとステートマシンを組み合わせることで、アプリ内のユーザーの選択肢に応じてキャラクターが動的に反応する仕組みを構築しています。ステートの切り替えはシームレスに繋ぐアニメーションを設定することで、親しみやすく温かみのあるキャラクター性を維持しながら、心地よいユーザー体験を実現しました。
感情表現豊かで親しみやすいキャラクターArgoをデザインし、Riveのアニメーションとデータバインディングを活用して、デベロッパーと連携しながらアプリ内へシームレスに実装しました。
感情表現豊かで親しみやすいキャラクターArgoをデザインし、Riveのアニメーションとデータバインディングを活用して、デベロッパーと連携しながらアプリ内へシームレスに実装しました。
FINAL OUTPUTS
Rive Character Animation for Whisper App
コンポーネントとステートマシンを活用したスケーラブルなRive設計
Rive内のファイルは、再利用可能なコンポーネント、ステートマシン、データバインディングを活用して構築されており、拡張性と保守性の高いアニメーションシステムを実現しています。
また、明確なファイル構造と命名規則を整備することで、デザイナーとデベロッパーが効率的に連携できる制作環境を構築しました。
ユーザーに親しまれる生き生きとしたキャラクターアニメーションのデザインだけでなく、ステートの実装・テスト・更新をスムーズに行える設 計を行い、アニメーションロジックの管理性と再利用性を高めています。
ユーザーの入力によってインタラクティブに状態が変化するキャラクターアニメーション
クライアントから提供いただいたデモ版のデータはラスター画像だったため、データサイズを軽量化しインタラクティブなキャラクターアニメーションに対応できるよう、拡張性の高いRiveのベクターイラストとして再構築しました。
アプリでは毎日の気分を天気に例えて記録する機能があるため、「あいさつ」「メモをとる」「晴れの状態（気分爽快）」「雨の状態（悲しく憂鬱な日）」「嵐の状態（イライラする日）」「風が強い日（心が落ち着かない日）」の6つのステートを制作し、それぞれの感情や状況に応じたキャラクターアニメーション表現を実装しています。
雲をモチーフにした柔らかなフォルムや豊かな表情、少し立体感を感じさせるグラデーションを取り入れることで、ユーザーが毎日の気分チェックインを行う際に寄り添う、親しみやすいキャラクターを目指しました。
コンポーネントとステートマシンを活用したスケーラブルなRive設計
Rive内のファイルは、再利用可能なコンポーネント、ステートマシン、データバインディングを活用して構築されており、拡張性と保守性の高いアニメーションシステムを実現しています。
また、明確なファイル構造と命名規則を整備することで、デザイナーとデベロッパーが効率的に連携できる制作環境を構築しました。
ユーザーに親しまれる生き生きとしたキャラクターアニメーションのデザインだけでなく、ステートの実装・テスト・更新をスムーズに行える設計を行い、アニメーションロジックの管理性と再利用性を高めています。
ユーザーの入力によってインタラクティブに状態が変化するキャラクターアニメーション
クライアントから提供いただいたデモ版のデータはラスター画像だったため、データサイズを軽量化しインタラクティブなキャラクターアニメーションに対応できるよう、拡張性の高いRiveのベクターイラストとして再構築しました。
アプリでは毎日の気分を天気に例えて記録する機能があるため、「あいさつ」「メモをとる」「晴れの状態（気分爽快）」「雨の状態（悲しく憂鬱な日）」「嵐の状態（イライラする日）」「風が強い日（心が落ち着かない日）」の6つのステートを制作し、それぞれの感情や状況に応じたキャラクターアニメーション表現を実装しています。
雲をモチーフにした柔らかなフォルムや豊かな表情、少し立体感を感じさせるグラデーションを取り入れることで、ユーザーが毎日の気分チェックインを行う際に寄り添う、親しみやすいキャラクターを目指しました。
ユーザーの毎日の記録に寄り添う、魅力的なキャラクターアニメーションの作成
私たちの感情は、日々変化する天気のように移り変わります。晴れやかで前向きな日もあれば、怒りや悲しみ、不安を感じる日もあります。
このアプリでは、ユーザーの感情を天気をモチーフにしたインタラクティブなキャラクターアニメーションと結びつけることで、日々の気分の変化を継続的に記録し、振り返ることができます。親しみやすいキャラクター表現と直感的なアニメーションによって、毎日のセルフチェックを自然に続けられる体験を目指しました。
また、Riveのデータバインディングとステートマシンを活用することで、軽量かつ柔軟 な実装を実現し、デベロッパーとのスムーズな連携にも貢献しています。
継続的なセルフチェックをサポートし、自己理解を深めながら感情の変化に気づくきっかけを提供するアプリにおいて、キャラクターデザインとアニメーション制作を担当しました。継続的なセルフチェックをサポートし、自己理解を深めながら感情の変化に気づくきっかけを提供するアプリにおいて、Riveアニメーターとして参加できたことを嬉しく思います。
Rive Character Animation for Whisper App
