WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!
WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!
【駅徒歩5分】浜松市の美容外科・美容皮膚科ならペガサスクリニックにお任せ下さい。二重、たるみ、クマ取り、シミ治療に特化。累計5万人以上の若返りをサポートした経験豊富な専門医が丁寧なカウンセリングと施術であなたの美をサポートします。
このデザインを共有する
このデザインを共有する
Close
このデザインを共有する
このデザインを共有する
Close
Design Infomation
このサイトのファーストビューにある、円形配置テキストの回転アニメーションを取り入れたスクロールダウンはとても魅力的ですね！
静止画になりがちな画面に「動き」のアクセントを加えつつ、ユーザーの視線を自然と下へ誘導できます。
一見難しそうな『円形配置』も、Figmaではプラグインを使って簡単に再現できちゃいます！
早速作っていきましょう!
まずはプラグイン「To Path」を使い、正円のパスに文字列を沿わせます。
あらかじめ用意した正円のパスとループさせたいテキストを同時に選択し、プラグインを実行することで、パスの曲線に沿った綺麗なテキスト配置が完了します。
配置後に綺麗に仕上げるコツは、
・ プラグイン上のVertical Alignで円の軌道に対する文字の浮き具合を微調整すること
・ テキストが短い場合は文字数を増やして円を一周埋めたりすること
で、「文字同士の余白」が均等になるように調整するのが綺麗に見せるポイントです。
次に、作成したパーツをコンポーネント化して回転アニメーションを実装します。
コンポーネントの「バリアント」を使い、360度の回転を4分割してコネクションを繋ぎます。
各バリアントに90度ずつの角度変化を与え、プロトタイプで順に繋ぎ、ループさせます。
設定のポイントは、遅延（After delay）を最小の1msに、速度（Easing）を一定の「線形」にすることです。
この組み合わせにより、コマ飛びのない滑らかで均一な回転が実現します。
最後に、プレビュー画面でずっと回転し続けているかどうか確認しておきましょう！
これでFigmaでの円形配置テキストの回転アニメーションの作成は完了です!
SVGで書き出して、CSSのanimationを使えば、実際のサイトでも再現が可能です!
CREATE - 株式会社創新ラボ
CREATE - 日本デザインセンター
CREATE - しなやかデザイン/Shinnosuke kumazaki
CREATE - 株式会社LIG
CREATE - direction Q
CREATE - Quaras/TryMore Inc
CREATE - 株式会社スピカデザイン
CREATE - mono.
CREATE - shhh inc.
CREATE - 株式会社ユニオンネット
CREATE - 株式会社ビーワークス
![2025 AUTUMN きらめく透け感紅茶ティント ‘Bitter Sweet Tea’ | OPERA（オペラ） | コスメティック[公式]のPCサイズの画像](https://kasou.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2025/08/13123553/13201_thumbnail_pc.webp)
![2025 AUTUMN きらめく透け感紅茶ティント ‘Bitter Sweet Tea’ | OPERA（オペラ） | コスメティック[公式]のモバイルサイズの画像](https://kasou.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2025/08/13123555/13201_thumbnail_sp.webp)
![OPERA（オペラ） | コスメティック[公式]のPCサイズの画像](https://kasou.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2025/08/13123550/13200_thumbnail_pc.webp)
![OPERA（オペラ） | コスメティック[公式]のモバイルサイズの画像](https://kasou.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2025/08/13123552/13200_thumbnail_sp.webp)
![[新商品情報] メラ メーラ フラペチーノ®｜スターバックス コーヒー ジャパンのPCサイズの画像](https://kasou.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2024/10/14145016/6435_thumbnail_pc.webp)
![[新商品情報] メラ メーラ フラペチーノ®｜スターバックス コーヒー ジャパンのモバイルサイズの画像](https://kasou.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2024/10/14145017/6435_thumbnail_sp.webp)
繊細なラインや広い余白が洗練された雰囲気にぼかしを活かした透明感も凄く綺麗で、美容外科らしい上品さと清潔感がストレートに伝わってくる美しいデザイン✨