【翻訳】FigmaとJitterを使ってAppleのようなアニメーションをデザインする（Caden Chen, Bootcamp）
https://www.apple.com/sg/iphone-15/
最近、あるクライアントが、Apple社の新しい iPhone 15 のウェブサイトに感心を示し、同じようなスタイルでランディング・ページをデザインしてほしいと依頼してきました。Appleのウェブサイトを分析したところ、その魅力に貢献しているいくつかの要素を特定しました。
まず、ニュートラルな黒、白、グレーのミニマルなカラーパレットです。
スクロールトリガーによるスムーズなフェードインアニメーション、印象的なビデオエフェクトなどもAppleらしい特徴です。
特に印象的だったのは、スクロールでアニメーションするボタン。その流麗でダイナミックなスプリングアニメーションに感銘を受け、このボタンをリバースエンジニアリングしてクライアントのウェブサイトに組み込むことにしました。
この記事では、FigmaでAppleスタイルのボタンをデザインし、Jitterでアニメーションさせるまでのプロセスを詳しく紹介します。
これからデザインするボタン
前提条件
始める前に、以下の基本的なことを理解していることを確認してください：
- Figma
- Jitter
しかし、これらのツールに精通していなくても、この記事は、ウェブ・デザイナーが複雑なウェブ・アニメーションをプロジェクトに統合する方法についての洞察を提供します。
Figma でのデザイン
スローモーション・バージョン
まず、ボタンを個々の部品に分解します。
上のアニメーションからわかるように、ボタンは以下の要素で構成されています。
- 灰色の円
- より大きな青い円
- 角が丸い長方形
- プラス記号が描かれた内側の青い円
次に、これらのアトムを組み立ててボタンを作ります。アニメーションが追加されていない状態でのボタンの見え方は以下の通りです。
これで全ての要素が揃いましたので、Jitterにエクスポートしてアニメーションさせます！
Jitterでのアニメーション
Jitterは、FigmaやSketchのようなデザインやプロトタイピングのプラットフォームで機能するように特別に設計されたアニメーションツールです。Jitterは、UI/UXデザインにインタラクティブなアニメーション要素を追加することに特化しています。Illustratorの代わりにはなりませんが、JitterはSVGのアニメーションに優れており、無料でサービスを提供しています。
個々の要素を別々にアニメーションさせます。
- 外側の青い円とフレーム以外のすべての要素を非表示にします。
- 枠の寸法を56 x 56に変更し、灰色の円を作ります。フレームをOuter Blue Circleの中央に配置します。
- 外側の青い円とフレーム。0.5s. 中心から拡大します。初期スケール： 0%. イージング： 減速。
- 外側の青い円。0.25s. 縮小。最終スケール： 50%. イージング： 加速。
- プラス記号と内側の青い円。0.25s. エレメントを表示。中央から拡大。初期スケール： 0% スムーズ。
- フレーム。0.75s リサイズ幅 255.06。アンカーポイント 中央。イージング オーバーシュート5。
- プラス記号と内側の青い円。0.75s. 移動X：199。イージング： オーバーシュート5。
- デザインをより深く。0.5s. エレメントを表示。フェードイン。
上記のアニメーションをグループ化し、「Entry 」と名付けました。
次に、「Exit 」アニメーションです。
- プラス記号と内側の青い円。0.25s. 縮小します。最終スケール： 0%. イージング： 加速。
- デザインをより深く。0.25s. フェードアウト。
- フレーム。0.25s. 幅を56にリサイズ。アンカーポイント 中央。イージング： 加速。
- フレーム. 0.5s. 縮小。最終スケール： 0%. イージング： スムーズ。
上記のアニメーションをグループ化し、「Exit 」と表示します。
終了
これで完成です！これで、アニメーションを Figma にエクスポートすることができます。これで、Figma と Jitter を使って、Apple iPhone 15 の Web サイトにあるようなボタンをデザインし、アニメートする方法を学ぶことができました。プロセスは複雑かもしれませんが、楽しく、やりがいのあるものであることは間違いありません。
なぜデザインやプロトタイピングが重要なのか疑問に思う人もいるかもしれません。そうすることで、アニメーションのタイミングをピンポイントで特定することができ、またSVGをエクスポートすることで、開発者がデザインをコードに変換する際に役立つからです。
次の記事：Appleのようなアニメーション： そこでは、このボタンをウェブサイトにコーディングする手順を説明します。
