Motion Showcase

概要

• 作品名 Motion Showcase（Webサイトのモーション・演出見本集）
• 担当範囲 コーディングのみ（デザインなし・直接コーディング）
• 制作期間 14日間

制作の背景・目的

Web制作の現場において、「サイトにどのような動き（アニメーション）をつけるか」をクライアントと言葉だけで記述・すり合わせるのには限界があります。しかし、世の中の主要な演出（モーション）を1つのサイトで網羅して確認できるプラットフォームは、Web検索をしても見当たりませんでした。そこで、「クライアントと制作サイドが、実際の動きを見ながらスムーズに合意形成（すり合わせ）ができるツール」を目指し、このサイトを1から企画・制作しました。

工夫した点・こだわったポイント

• デザインなしのダイレクト実装 カンプなどのデザインデータを用意せず、頭の中の設計をもとにブラウザ上で直接コーディングを行いました。全体のレイアウトの破綻を防ぎつつ、機能性を最優先したUI（操作画面）を構築しました。
• 網羅性と実用性 Webサイトでよく使われる動きを1から検証し、バリエーションを持たせて実装しています。「この動きを入れるとサイトの印象がどう変わるか」が直感的に伝わるよう、配置やタイミングを細かく調整しました。

苦労した点と解決策

• モーダルウィンドウの複雑な挙動 最も苦労したのは、モーダルウィンドウの動きの実装です。制作当初は、画面上にパッと表示されて消えるという「実際の裏側の仕組み（表示時の背景固定や、イベントの制御など）」が頭の中で完全に理解できておらず、思い通りの動きになりませんでした。
• どうやって解決したか 単にコードをコピー＆ペーストするのではなく、JavaScriptの挙動を1ステップずつ分解し、データやクラスがどう切り替わっているのかを徹底的に検証しました。仕組みを根本から理解したことで、バグのないスムーズなモーダルウィンドウの動きを自力で実装できるようになり、技術的に大きなステップアップとなりました。

提供できる価値

このサイトの開発を通じて、Webサイトの「動き」に関する実装技術と、実務でのコミュニケーション課題に対する深い理解が身につきました。さらに私は動画編集スキルも持っているため、Web上のアニメーション実装だけでなく、動画を使った演出提案も可能です。「どのような動きをつければユーザーの目を引き、コンバージョンに繋がるか」を、エンジニア・クリエイターの両面からロジカルにご提案いたします。