プロジェクト概要
決済機能付きチャットボット「BOTCHAN PAYMENT」のランディングページ（LP）において、ファーストビューのデバイスモックアップ内に配置する、デモ用のGIFアニメーション制作を担当しました。ユーザーがLPに訪れた瞬間に「どのようなサービスなのか」を直感的に理解できるよう、実際のチャットUIがテンポ良く動くアニメーションをデザイン・制作しています。
GIFアニメ
基本情報
プロジェクト: 「BOTCHAN PAYMENT」LPファーストビュー用アニメーション制作
制作物: UI操作デモ用GIFアニメーション
担当領域
Webデザイナー（アニメーションの構成案 / UIデザイン / GIFアニメーション制作）
プロジェクトの目的と課題
-
直感的な利用イメージの提供: テキストや静止画だけでは伝わりにくい「チャット形式でスムーズに決済手続きが進む」というサービスのコアな価値を、視覚的に瞬時に理解させること。
-
ファーストビューでの離脱防止: LPを開いた瞬間にユーザーの目を惹きつけ、サービスに対する興味・関心を高めてスクロールを促すこと。
-
LPデザインとの調和と軽量化: 埋め込み先のLPの世界観（トンマナ）に馴染むデザインに仕上げつつ、Webページの読み込み速度に悪影響を与えない適切なデータ容量でGIFアニメを作成すること。
施策とこだわったポイント
1. 実際の操作感をリアルに再現するアニメーション設計
吹き出しが表示されるタイミングや、ユーザーが数量を選択する動き、カーソルが「次へ」ボタンをクリックするまでの軌跡など、実際のユーザー体験（UX）に近い自然な間とテンポを意識してアニメーションの動きを設計しました。
2. 視認性とわかりやすさを優先したUIデザイン
小さなデバイスモックアップの中にはめ込んで表示されることを想定し、文字サイズやボタンのコントラストを強調しました。細かな装飾は省き、決済プロセスという最も見せたいアクションにユーザーの視線が集中するようにデザインしています。
3. Web表示に最適化したGIFアニメの書き出し
動きの滑らかさを保ちつつも、LPの表示速度を落とさないよう、色数やフレームレートを細かく調整しました。クリエイティブとしての見栄えだけでなく、Webサイトに実装された際のパフォーマンスまで考慮してデータを作成しています。
成果・評価
チャットボット商材の魅力を「動き」で補完し、直感的に伝える表現力
静止画だけでは伝わりにくいSaaS・ITツールのUI/UXを、GIFアニメーションという「動きのあるクリエイティブ」を用いることで、ユーザーにわかりやすく疑似体験させました。LPの構成要素として、ユーザーの関心を惹きつけ理解を促進させる「動的コンテンツ」を自らデザイン・制作できるスキルを示す実績です。
