【初心者向け】Studioで画像を簡単に反転する方法｜モーションのスケール機能を活用！

Web制作やデザインの現場で、「画像を左右反転したい」「縦にひっくり返したい」と思うこと、ありますよね？
FramerやFigmaなどのデザインツールと違い、StudioではCSSを意識することなく、直感的に画像を反転させることが可能です。

本記事では、Studioで画像を反転させる最も簡単な方法をご紹介します。特別なコードは不要！モーションの設定だけでOKです。

🔧 方法：モーションのスケールを使って反転させる

Studioでの画像反転は、「モーション」タブにあるスケール機能を使うことで実現できます。
左右反転・上下反転ともに以下の手順で設定できます。

✅ 左右反転（鏡のようにひっくり返す）

1. Studio上で反転させたい画像要素を選択

2. 上部のパネルから「モーション」タブを開く

3. 「スケール」の設定を確認

4. 「X」の値を 1 → -1 に変更

これで画像が左右反転されます！

📝 補足：
X軸のスケールをマイナスにすることで、要素が水平方向に反転される仕組みです。

✅ 上下反転（上下を逆さにする）

1. Studio上で反転させたい画像要素を選択

2. 上部のパネルから「モーション」タブを開く

3. 「スケール」の設定を確認

4. 「Y」の値を 1 → -1 に変更

これで画像が上下反転されます！

🎯 応用例：マウスホバーで反転させる

Studioでは「モーショントリガー」も活用できるため、例えば「ホバー時に画像を左右反転させる」といった動きのある演出も簡単にできます。

🚨 注意点

• スケールを負の値に設定すると、文字や他の要素にも影響する場合があります。対象をグループ化して調整するのが安全です。

• スケールを -1 にすると、一部画像はアンチエイリアスが崩れる場合もあるので、必ずプレビュー確認しましょう。

🧩 まとめ

Studioなら、モーション設定だけで画像の反転ができてとても簡単。CSSやJSの知識がなくても、ビジュアルで完結する操作性が魅力です！