Wix Studio エディタ：ボタンアイコンにアニメーションを追加する
この記事内
- プリセットのアニメーションアイコンを追加する
- カスタムアイコンアニメーションを作成する
- アイコンをデザインする
- カスタムアイコンに関する要件とガイドライン
アドバンスボタンを使用している場合は、アイコンにアニメーションを追加することで、クライアントのサイト要素を、よりインタラクティブなものにすることができます。
Wix Studio エディタでは、プリセットのアニメーションアイコンを使用することも、開始アイコンと終了アイコンを組み合わせてカスタムのアニメーションアイコンを作成することもできます。必要な場合は、独自の SVG ファイルをアップロードして、さらにカスタマイズすることも可能です。
ボタンアイコンのアニメーションが動作する仕組み
プリセットのアニメーションアイコンを追加する
プリセットのアニメーションアイコンから好みのデザインのものを選択し、アニメーションの再生時間を設定します。
プリセットのアニメーションアイコンを追加する方法：
- エディタに移動します。
- 該当するアドバンスボタンをクリックします。
- 「設定」をクリックします。
- 「アイコンの種類」下で「アニメーション」をクリックします。
- 実行する内容を選択します：
- 「アイコンを選択」下で希望のアイコンを選択します。
- 「追加」アイコン
をクリックし、メディアマネージャーから希望のアイコンを追加します。
- （オプション）スライダーをドラッグして、アニメーションの再生時間（秒）を調整します。
ヒント：
プリセットのアイコンにマウスオーバーすると、アニメーションをプレビューすることができます。
カスタムアイコンアニメーションを作成する
アニメーションアイコンは、開始アイコンと終了アイコンを組み合わせて、クライアント用に独自のものを作成することができます。開始アイコンと終了アイコンには、Wix が提供しているものを使用することも、独自の SVG ファイルを使用することもできます。
カスタムアニメーションを作成する方法：
- エディタに移動します。
- 該当するアドバンスボタンをクリックします。
- 「設定」をクリックします。
- 「アイコンの種類」下で「アニメーション」を選択します。
- 「追加」アイコン
をクリックし、「Create new（新規作成）」を選択します。 - 開始と終了のアイコンを設定します：
- 「開始アイコン」下で「追加」アイコン
をクリックします。 - 「Wix 画像・動画素材」タブでファイルを選択するか、「サイトファイル」で独自のファイルをアップロードまたは選択します。
- 「ファイルを選択」をクリックします。
- 「終了アイコン」も手順 a〜c を繰り返します。
- 「開始アイコン」下で「追加」アイコン
- （オプション）上部の「戻る」をクリックし、スライダーを使用してアニメーションの再生時間（秒）を調整します。
気が変わった場合：
カスタムパネルで開始アイコン / 終了アイコンにマウスオーバーし、「アイコン画像を変更」
をクリックして変更します。
をクリックして変更します。ヒント：
- Wix のアイコンには、独自のファイルを組み合わせることができます。
- カスタムのアニメーションを作成したら、必ずプレビューで動作を確認してください。
アイコンをデザインする
アニメーションアイコンは、あなたのセンスやクライアントのブランドに合わせてカスタマイズすることができます。アイコンは、サイズを変更したり、色を変更したり、回転させて独自のデザインに仕上げることができます。
また、アイコンは通常時とホバー時の状態ごとにデザインをカスタマイズできるため、たとえばマウスオーバー時にアイコンの色や角度が変わるようにして、インタラクティブ性をより高めることもできます。
アイコンをデザインする方法：
- エディタに移動します。
- 該当するアドバンスボタンをクリックします。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。
- 「デザイン」下で、「通常時」または「ホバー時」から、アイコンをデザインしたい状態を選択します。
- 「デザイン」下の「アイコン」をクリックします。
- 利用可能なオプションを使用してアイコンをデザインします：
- アイコンのサイズを変更します。
- アイコンの色を変更して不透明度を調整します。
- アイコンを回転させて角度を変更します。
カスタムアイコンに関する要件とガイドライン
カスタムアイコンには特定の要件が定められています。独自のファイルをアップロードして使用する場合は、以下の要件を満たしている必要があります：
- 黒一色（#000000）であること
- SVG 形式であること
- 250 KB 以下であること
注意：
Adobe Illustrator または Figma で SVG ファイルを作成した場合は、エクスポートする前に必ず複合パスに変換する必要があります。
また、アイコンを作成してスムーズにアニメーションを動作させるためには、以下のガイドラインに従うことをおすすめします。
- アニメーションの始点となる位置が、開始アイコンと終了アイコンで一致していることを確認してください。
- 開始アイコンと終了アイコンのベクターデータを構成する点の数が、同じであることを確認してください。
- アイコンは線のみで描画したものではなく、内部を塗りつぶしたものを使用してください。
- アイコンは単一の大きなシェイプではなく、複数の小さなシェイプを使用して作成してください。
- アイコンのサイズを変更する場合は、品質を維持するため、ドラッグして引き延ばすのではなく、拡大・縮小の機能を使用してください。
- アートボード上のピクセルと正確に位置を合わせる場合は、ピクセルプレビューの機能を使用してください。
- 開始アイコンと終了アイコンの形状が大きく異なる場合は、アニメーションができるだけ滑らかになるよう、以下をお試しください：
- 開始アイコンと終了アイコンの中間的な形状で、それぞれのアイコンを再作成してみてください。
- 開始アイコンに終了アイコンが重なって消えていくよう、終了アイコンを再作成してみてください。
重要：
Wix の外部で作成した SVG ファイルについては、サポートの対象外となるためご了承ください。