Illustrator & WebDesignerSATOSHI MATSUMOTO

当サイトのメインビジュアルとして使用しているgifアニメーションです。（https://satoshi-matsumoto.com）

PCとスマホで縦横２パターンのレイアウトで作成しており、画面幅768pxで切り替わるように設定しています。ちなみにどちらも同じ秒数(3秒)です。

また、手をあげる動作の部分は10枚のイラストを順番に表示してアニメーションさせています↓

実際のページ表示では、mp4形式の動画を自動再生し、再生完了後にJavaScriptで制御して、ヘッダーやメニューなどのUIが遅れて表示される演出を加えています。

制作過程で特に苦労した点は、ユーザーが別タブへ移動したり、戻ってきた際にアニメーションの再生が中途半端な状態で止まってしまう問題への対策です。

この問題を防ぐため、アニメーションの再生完了後には、同じ見た目・同じサイズの静止画像を動画の上に重ねて表示する仕組みを取り入れています。これにより、タブの移動やリロード後でも常に安定したビジュアルが表示されるよう工夫しました。

また、当サイト全体のデザインは、イラストの特徴でもある「黒ライン」を際立たせることを意識して設計しています。アニメーションと静的なデザインが自然に馴染むよう、構成や配色にも細かく配慮しました。