<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397092/Use%20Case/Screenshot_2025-06-20_at_1.24.47_PM_gjdrl1.png" caption="INFCON 2024 キービジュアル & Inflearn バナー イ・ビョンギ" />

## INFCON 2024 キービジュアル & Inflearn バナー  
**イ・ビョンギ（Inflab プロダクトデザイナー）**

Inflab は毎年、IT プロフェッショナルが集まるオフラインカンファレンス **INFCON** を開催しています。2024 年は、従来の開発者中心の構成を超えて、デザイン、PM、PO など幅広いロールを取り入れ、プロダクト全体をカバーする内容に拡張しました。規模も大幅に拡大し、2,000 名以上の参加者を想定しています。この背景のもと、私はイベントのキービジュアルを担当し、カンファレンス全体の雰囲気をデザインしました。コアテーマは **拡張と拡散** です。

この抽象的なコンセプトを表現するために、「無限の宇宙」「ブラックホールとワームホール」「急速に拡がるエネルギー」などのビジュアルメタファーを検討しました。すぐに、静的な画像だけでは不十分だとわかり、動的でインタラクティブなデザインが必要でした。従来の After Effects から Lottie へのプラグインワークフローはスピードと柔軟性の面で物足りず、**Phase** を選択しました。

Phase は期待以上のパフォーマンスを発揮しました。イベントページはアクセス集中が起こりがちですが、JSON 形式で書き出したアニメーションは途切れなく滑らかに表示され、美しいビジュアルを問題なく提供できました。ベクター形式のグラフィックは、現地の大型 LED スクリーンでも完璧に拡大表示できました。

実は、Phase を使うのは今回が初めてではありません。韓国でのローンチ後に開催された **Phase Challenge**（リンク）に参加した際に、すでに本番環境でも十分に活用できると確信しました。それ以来、Inflearn のランディングページで抽象的なコンセプトを短時間で効率的に表現したいときには、常に Phase を使っています。

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397497/Use%20Case/Screenshot_2025-06-20_at_1.31.32_PM_gs06ki.png" caption="Inflearn アプリ - 植物育成オンボーディング パク・ユリ" />

## Inflearn アプリ - 植物育成オンボーディング  
**パク・ユリ（Inflab プロダクトデザイナー）**

Inflearn アプリでは、毎日の学習習慣を自然に促し、リテンションを高める仕組みとして **「植物育成」** システムを導入しました。ユーザーは学習を続けながら植物を育て、最終的には果実を収穫して報酬を得ます。この新しい機能を直感的に理解してもらい、参加意欲を高めてもらうために、オンボーディングアニメーションが必要でした。

最も重要な目的はウィジェットのインストールを促すことでしたが、Android と iOS では導線が異なるため、プラットフォームごとに適したフローが求められました。長文の説明で負担をかけるのではなく、**Phase** を使って 7〜8 秒以内にすべてを分かりやすく伝えることができました。軽量な .json フォーマットのおかげでロードも速く、実装後のアニメーションもスムーズでした。

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397689/Use%20Case/Screenshot_2025-06-20_at_1.34.42_PM_msnnt7.png" caption="Rallit - My Log 機能オンボーディング キム・ボギョン" />

## Rallit - My Log 機能オンボーディング  
**キム・ボギョン（Inflab プロダクトデザイナー）**

**Rallit**（リンク）は、キャリア中心の採用プラットフォームで、ユーザーが自分の経験、スキル、給与データを元にパーソナライズされたキャリアインサイトを得て、より良いチャンスを見つけることができます。企業側はこのデータを活用して、最適な人材を効率的に探し出し、つながることができます。

『My Log』機能では、ユーザーがこれまでのキャリアの歩みを記録し、給与推移グラフなどを通じて可視化できます。これにより、自身のキャリアを客観的に把握し、計画的に管理できます。ただし、この機能は UI 内で目立たず、見つけてもすぐにログインモーダルが表示されるため、積極的に使いたいと思わせる体験にはなっていませんでした。そこで **Phase** を活用して、機能をしっかり紹介し、自然に利用を促すオンボーディングアニメーションを制作しました。

---

## ✅ Why Phase

#### チームが Phase を選ぶ理由

- **アニメーションの強み**  
  抽象的な概念を伝えたり、オンボーディングのようにユーザーを特定の導線へ導く場合、アニメーションはテキストや静止画よりもずっと効果的です。滑らかな一連の動きが、すべてを語ります。

- **扱いやすく高機能**  
  キーフレームアニメーションシステムは After Effects より直感的で軽量です。Figma のプロトタイプに慣れているデザイナーなら、誰でもすぐに使いこなして本番レベルの成果物を作れます。ファイルの複製も簡単で、ライトモード・ダークモード両方のバリエーションを用意するのも苦になりません。

- **効率的なエクスポート**  
  .json（Lottie）、.lottie、.dot 形式は、マイクロインタラクションやウェブアニメーションの事実上の標準となっています。ウェブパフォーマンスを重視するデジタルプロダクトデザイナーにとって、Lottie は最適解です。

- **日本・韓国ユーザーに親しみやすい**  
  Phase Korea チームが迅速なサポートと韓国語の学習リソースを提供しているため、導入がとてもスムーズです。グローバルツールでありながら、国内コミュニティが活発なので、安心して使えます。


inflearn_logo.svg

Inflearn が Phase を活用してデザインとアニメーションのワークフローを加速させる方法

Pitcrew は **Pillo** という、薬を飲み忘れがちな方や服薬管理が苦手な方のためのリマインダーアプリを開発しています。複数の薬を服用しているユーザーが、毎日のルーティンを無理なく継続できるようサポートしています。現在は北米市場にフォーカスしています。

2025年、私たちは新たなミッションを掲げました：  
**「慢性疾患の服薬管理を、誰でも簡単かつ楽しくして、最適な治療効果を引き出す。」**  
このビジョンを実現するために、ゲーミフィケーション、キャラクターデザイン、モーション要素を体験に取り入れる方法を模索していたところ、タイミング良く **Phase** と出会いました。単なる機能解決だけでなく、ブランド体験を強化する「心地よいインタラクション」を創りたい。それが私たちの想いです。


## 1) オンボーディング アラーム設定アニメーション

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750398120/Use%20Case/pillo-loading-sm_spgyzk.gif" caption="オンボーディング アラーム設定アニメーション" />

**Remix リンク**

[**https://app.phase.com/preview/fe6957fc-e525-44f3-ac1b-a66ec783b7ee**](https://app.phase.com/preview/fe6957fc-e525-44f3-ac1b-a66ec783b7ee)

このアラーム設定アニメーションは、私たちのアプローチを象徴しています。以前はシンプルな時計アニメーションだけを使っていましたが、キャラクターの魅力を十分に活かせていませんでした。今回は **Pillo キャラクター** が自ら時計の針を動かすことで、アラーム設定が登録されたことを視覚的にしっかり伝えられるようにしました。

このアニメーションは、ユーザーが選んだ時間に合わせて動的に反応し、設定が正しく保存されたことを自然に伝えます。汎用的なローディング画面を表示する代わりに、キャラクターがアラームを準備する姿を見せることで、機能への信頼感を高め、ブランドへの親近感を育てます。その結果は一目瞭然で、初回利用者の離脱率が大幅に減り、最初のアプリ体験が大きく向上しました。

## 2) ハート ギフトボックス アニメーション

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750398110/Use%20Case/Gift_wvg3xv.gif" caption="ハート ギフトボックス アニメーション" />

**Remix リンク**

[**https://app.phase.com/preview/fa93228a-2d3d-4977-bceb-9e96890ff0ce**](https://app.phase.com/preview/fa93228a-2d3d-4977-bceb-9e96890ff0ce)

Phase を使って、ハートの報酬アニメーションも制作しました。ユーザーがギフトボックスを開けた瞬間のワクワク感を演出するために、箱が開いてハートが飛び出すシーンを軽量かつ直感的なアニメーションで表現しました。これにより、報酬体験がより楽しくなり、制作効率も確保できました。

## Phase の魅力

Phase で一番驚いたのは、**とにかく速くて軽い** という点です。プロダクト体験全体を一人で担っているデザイナーとして、余計な手間は省き、本当に意味のある部分に時間を使いたいと考えています。しかし After Effects は簡単なアニメーションを作るにも重く、非効率でした。Phase はベクター形式で軽く、レスポンスも良く、モバイル環境に最適化されています。操作もとても直感的で、モーションの基本がわかっていれば誰でもすぐに使い始められます。

Phase は、「服薬管理を簡単で楽しく」という私たちのビジョンにぴったりのツールです。今後も、さらに多くのユーザー接点で活用していく予定です。

📱 **Pillo アプリ**  
[https://play.google.com/store/apps/details?id=xyz.rtrvr.pillo&hl=en&gl=US&referrer=inviter%3Dpillo_care](https://play.google.com/store/apps/details?id=xyz.rtrvr.pillo&hl=en&gl=US&referrer=inviter%3Dpillo_care)

🌐 **Pillo ウェブサイト**  
[https://www.angrypillbox.com/](https://www.angrypillbox.com/)


small_image 1 (1).png

thumbnail_image 1 (1).png

image 1 (1).png

AngryPillbox が Phase を活用してモーションデザインシステムを進化させる方法

Phase を使用すると、インターフェイス デザイナーは鮮やかなアニメーションをすばやく簡単に作成でき、デザイン全体の視覚的な魅力を高めることができます。

エヴァ・チェン

large_Eva-min.jpg

medium_Eva-min.jpg

small_Eva-min.jpg

thumbnail_Eva-min.jpg

Eva-min.jpg

フリーランサー

UX におけるアニメーションは難しい場合があります。アニメーションを最初から作成するのは時間がかかり、多くのツールは複雑すぎます。しかし、Phase は、ユーザーフレンドリーなインターフェイスと簡単なワークフローを備えたエキサイティングな製品です。

Alex KW Chen

thumbnail_Alex Chen Profile Pic.jpeg

Alex Chen Profile Pic.jpeg

UIUX デザイナー @ TSMC

複雑なアニメーション ツールとは異なります。 Phase は UI/UX デザイナーにとって非常に直感的です。創作を始めるのはとても簡単です。

hero.title

case_study_title

Inflearn が Phase を活用してデザインとアニメーションのワークフローを加速させる方法

AngryPillbox が Phase を活用してモーションデザインシステムを進化させる方法

testimonial_title

エヴァ・チェン

プロトタイピングを始める

製品

プロトタイピング

アニメーション

共同編集

コードエクスポート

Figma プラグイン

学ぶ

チュートリアル

事例研究

リソース

会社情報

採用情報

コミュニティ

リリースノート

よくあるご質問

法的事項

プライバシーポリシー

利用規約