このドキュメントは、Framerを学ぶ日本国内のユーザーが資料の不足で感じる困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を加えました。Framerを使用する皆様に少しでもお役に立てば幸いです。

YouTubeチャンネルを登録してください

始めるにあたって

Framerでウェーブ効果を作るには、まずフレームを描く必要があります。Fキーを押すとフレームツールが開き、希望のサイズでフレームを配置できます。この効果ではフレームのサイズはそれほど重要ではありません。

次にフレームに線形（リニア）塗りを設定する必要があります。フレームを選択し、PropertiesパネルのFillからLinearを選び、色を#09Fと#0DFに設定します。すると、爽やかな印象のグラデーションが適用されます。

最後にフレームの角を丸くする必要があります。半径（ラディウス）を40%に設定すると、円に近い「擬円」（スックル）形状になり、波のアニメーションに適した基本形が完成します。

レイヤーを作成する

ウェーブ効果は合計3つのレイヤーで構成されます。まず、フレームの位置をAbsoluteに変更してください。PropertiesパネルのPositionでAbsoluteを選択します。その後、波の効果を大きく見せるため、レイヤーの幅と高さを4000ピクセルに拡大します。

次に、このレイヤーを2回コピーして合計3つのレイヤーを準備します。(Command + Dショートカットを利用)これでLayersパネルに3つのレイヤーが並んでいることを確認できます。

最後に、この3つのレイヤーが自然に混ざり合うようにMultiplyブレンディングモードを適用します。StyleパネルでMultiplyを選ぶと、レイヤーが重なり合い、波のような重複効果が現れます。

アニメーションを追加する

次に、レイヤーに動きを加えましょう。3つのレイヤーをすべて選択し、PropertiesパネルのEffectsからLoopアニメーションを適用します。デフォルトではレイヤーが360度回転しますが、これをLinearカーブに設定すると速度が一定に維持され、波が途切れずスムーズに流れる感じを与えます。もう一つ重要な設定はPinningです。3つのレイヤーをすべて選択した後、左・右・下のピンを解除すれば、ページサイズが変わっても波がその位置に留まります。

Appear効果を追加する

ここに登場アニメーションを追加すれば、よりダイナミックなシーンを演出できます。ウェーブコンテナーを選択した後、Appear効果を適用します。このとき、Opacityを1に、Y値を-400に設定すると、波が画面の上から下へ降りてくるように見えます。トランジションはEase Out、時間は5秒に設定すると、波がなめらかに現れ始める効果を得られます。

様々なスタイルを試す

ウェーブアニメーションの最大の魅力は変化が無限大にある点です。例えば、レイヤーの色を変えたり反転させるだけで、全く異なる雰囲気の波が生まれます。さらに、波の位置を上ではなく下に配置すると、ページのフッターバックグラウンドとしても活用できます。つまり、ウェーブ効果は単なる装飾ではなく、デザイナーがブランドトーンに合わせて自由に変形できる強力な表現ツールです。

効果を見る・今すぐ試す→

この記事は、Framer公式ブログの「Create a stunning wave animation in Framer with just three layers and zero code」を翻訳・脚色したコンテンツです。