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

Framer公式サイトの新しいビデオボタンが最近大変人気を集めています。ウェブサイトに映画のような雰囲気を加える素晴らしい機能です。このチュートリアルでは、Framerで自分だけの映画のようなビデオボタンの作り方を紹介します。

映画のようなビデオボタンの作成

1. フレームとビデオの挿入

まず、ボタンの背景となるフレームを描きます。フレームのサイズを調整し、角をお好みの丸さにします。その後、ビデオを挿入し、ボタンの幅に合わせてスケールを調整します。そしてビデオをフレーム内にドラッグしてアップロードします。

2. テキストとボタンのスタイリング

次に、ボタンにテキストとアイコンを追加します。お好みのスタイルで装飾してください。テキストとアイコンを全て選択した後、⌥ + ⌘ + ⏎(Mac) / ctrl + alt + ⏎(Windows)を押してスタックを追加します。スタックをフレーム内にドラッグします。テキストの可読性を高めるには、ビデオの不透明度を少し下げてください。

3. コンポーネントの作成

ボタンを選択し、コンポーネントを生成します。新しいvariantを追加して、ビデオの不透明度を再び1にします。デフォルトのバリエーションにはポインターカーソルを追加します。最後に"mouse enter/leave"を使用してバリエーションを接続します。

4. ホバー効果の追加（オプション）

ここで終了することもできますが、特別な効果を加えたい場合はホバー効果を挿入できます。ボタンコンポーネントを選択し、オーバーレイを追加します。お好みに合わせてスタイリングした後、ビデオブロックをもう一つドラッグして配置します。サイズを調整し、角を丸くして、ボタンで使用したのと同じビデオをアップロードします。

プロジェクトを試してみる→

この記事は、Framer公式ブログの「Framerで映画のようなビデオボタンを作成する方法」を翻訳・アレンジしたコンテンツです。