デザイン
始める
2025/08/20
Framerでシマー効果を使用してUXをアップグレードする
Shimmer効果は、画面の上を光がかすめるように通り過ぎるアニメーションで、ページに洗練されたポイントを加えます。この記事では、Framerを活用して簡単にShimmer効果を実装する方法を紹介します。
による翻訳
目次
目次
このドキュメントは、Framerを学ぶ日本の利用者が、日本語の資料不足で直面する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使う皆さんの少しでもお役に立てば幸いです。
Shimmer（シマー）は、ロード中の状態や強調効果でよく使われる視覚的なトリックです。細い光の筋がスムーズに動きながら画面で光る感覚を与えるため、ユーザーに「生き生きとしたインターフェース」という印象を与えることができます。このチュートリアルでは、Framerを使ってウェブサイトにShimmer効果を作る方法をお見せします。
Framer YouTubeチャンネルを購読してください
FramerでShimmer効果を作成する
ステップ1：基本レイアウトの準備
輝きを表現するShimmerレイヤーを追加します。
サイズ：高さ1px、幅100px
位置：アプリウィンドウの左上
Fill：リニアグラデーション（左→右、白60%→白0%）
ステップ2：Shimmerレイヤーにループ効果を適用する
Shimmerレイヤーを選択した後、Effect → Loopを追加します。
設定：
Delay：3秒（アニメーション終了ごとに3秒待機）
Scale：1
Rotation：0
X値：800px（右方向に移動）
Opacity：0（移動しながら徐々に消える）
Transition Type：Ease Out（速く開始し、ゆっくり終了）
Duration：1.5秒
これで、Shimmerレイヤーが3秒ごとに右にスムーズに移動しながら消える効果が適用されます。
ステップ3：右側にShimmerを追加する
Linearウェブサイトのように、縦方向にもShimmer効果を追加することができます。
2つ目のShimmerレイヤーを作成します。
サイズ：幅1px、高さ100px
位置：アプリウィンドウの右上
Fill：同じリニアグラデーションを適用
同じ方法でLoop Effectを追加します。
Delay：2秒（最初のShimmerとずらして設定）
Y値：約670px（下方向に移動）
Opacity：0
Transition Type：Ease Out
Duration：1.5秒
プロジェクトを公開して、ブラウザで確認してください。2つのレイヤーが交差して輝きを作り出すのを確認できます。
結論
ウェブサイトにきらめく効果を追加することで、ページに視覚的な興味をそえる楽しくて簡単な方法になります。Framerを使えば、コードをを書かずにこの効果を簡単に作成することができます。このチュートリアルのステップに従って、ウェブサイトにきらめく効果を追加し、人々の視線を引き付けてみてください。
この記事は、Framer公式ブログの「高度なアニメーション技術：プロフェッショナルなUXのための戦略的シマー効果」の翻訳と編集されたコンテンツです。
