2026.01.12
浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)
https://pegasus-clinic.com/【駅徒歩5分】浜松市の美容外科・美容皮膚科ならペガサスクリニックにお任せ下さい。二重、たるみ、クマ取り、シミ治療に特化。累計5万人以上の若返りをサポートした経験豊富な専門医が丁寧なカウンセリングと施術であなたの美をサポートします。
このデザインを共有する
このデザインを共有する
Close
このデザインを共有する
このデザインを共有する
Close
Design Infomation
下層デザイン
-
Aboutページ
-
サービス紹介
-
投稿一覧(記事/商品など)
このサイトのファーストビューにある、円形配置テキストの回転アニメーションを取り入れたスクロールダウンはとても魅力的ですね！
静止画になりがちな画面に「動き」のアクセントを加えつつ、ユーザーの視線を自然と下へ誘導できます。
このデザインの作り方
一見難しそうな『円形配置』も、Figmaではプラグインを使って簡単に再現できちゃいます！
早速作っていきましょう!
1. 円形配置テキストの作成
まずはプラグイン「To Path」を使い、正円のパスに文字列を沿わせます。
あらかじめ用意した正円のパスとループさせたいテキストを同時に選択し、プラグインを実行することで、パスの曲線に沿った綺麗なテキスト配置が完了します。
配置後に綺麗に仕上げるコツは、
・ プラグイン上のVertical Alignで円の軌道に対する文字の浮き具合を微調整すること
・ テキストが短い場合は文字数を増やして円を一周埋めたりすること
で、「文字同士の余白」が均等になるように調整するのが綺麗に見せるポイントです。
2. 回転アニメーション（ループ）の実装
次に、作成したパーツをコンポーネント化して回転アニメーションを実装します。
コンポーネントの「バリアント」を使い、360度の回転を4分割してコネクションを繋ぎます。
各バリアントに90度ずつの角度変化を与え、プロトタイプで順に繋ぎ、ループさせます。
設定のポイントは、遅延（After delay）を最小の1msに、速度（Easing）を一定の「線形」にすることです。
この組み合わせにより、コマ飛びのない滑らかで均一な回転が実現します。
最後に、プレビュー画面でずっと回転し続けているかどうか確認しておきましょう！
これでFigmaでの円形配置テキストの回転アニメーションの作成は完了です!
SVGで書き出して、CSSのanimationを使えば、実際のサイトでも再現が可能です!
同系統のサイトデザイン
-
-
ねこねこ食パン
-
株式会社オリエンタルランド 新卒採用
-
Ctrlx（コントロールバイ）オフィシャルサイト
-
Qurap（キュラップ）公式サイト｜ラッピング美容ブランド
-
採用情報｜住友林業フォレストサービス株式会社
-
即戦力のハイスキルデザイナーが見つかる｜デザイナーのマッチング/業務委託ならJOOi｜
-
Phantom: The money app that'll take you places
-
Discord - 楽しみ満載のグループチャットでゲームを
-
株式会社Gotoschool | 障がい者への療育事業と就労支援
-
協業・新規事業開発・スタートアップ支援｜株式会社ユニッジ
-
ヒラギノフォント｜SCREEN
-
mount inc. | ブランド戦略+デザイン | design practice
-
ぺんてる株式会社
-
VIVACE GROUP
-
ファミリーマート 45周年｜キャンペーン｜ファミリーマート
-
JARUJARU TOWER ジャルジャルタワー
-
明石市立二見図書館 ふたみん
-
Only: Award-winning branding agency UK | Research, strategy and design
-
らくしふ | LINEにも対応するクラウドシフト管理
CREATE - 株式会社クーシー
-
JRA 東京競馬場乗馬センター
-
株式会社Muture
-
THE NEW JAPAN
-
ずっと大好き！上野動物園のパンダたち｜YOU+MORE!｜フェリシモ
-
食いしん坊たちのコレ食べたい帖 | ロック・フィールド クリスマス＆迎春 HOLIDAY MENU 2025-2026
-
Tetris Official Website
-
【公式】大阪 住𠮷大社の和婚・神前結婚式 | 住𠮷大社吉祥殿
-
SHIPS any｜HOLIDAY WISH LISTs｜株式会社シップス
-
2TÊTES | Marketing agency in Paris |
-
ブレイクマイケース 公式サイト
-
東京都防犯ネットワーク
-
Cocota | Brand & Design Studio
-
湖池屋ストロング｜株式会社湖池屋
-
Myna Snacks | Better Snacks: Unlocked
-
Stage one - Digital Design with objectives in mind
-
Design Shanghai Portfolio Events
-
山崎実業 – Simple Life Lab. 毎日をちょっと素敵に、ちょっと便利に。
-
Joy Flower Pot
-
SuuHaa（スーハー）| 長野県の移住総合WEBメディア
-
2025 AUTUMN きらめく透け感紅茶ティント ‘Bitter Sweet Tea’ | OPERA（オペラ） | コスメティック[公式]
-
サブスクエンジン｜誰でも無料でサブスクサービス&決済
CREATE - 株式会社創新ラボ
-
OPERA（オペラ） | コスメティック[公式]
-
SNOWS | 冬季限定
-
カロアデザイン｜ビジネス成長をサポートする東京のWeb制作・デザイン会社
-
靴下マニアのファッションスクラップ vol.25｜靴下屋公式通販 Tabio オンラインストア
-
グランドパレス弘前｜"スナック型"複合施設（青森）
-
富士フイルムデザインセンター｜DESIGNART TOKYO 2024｜Reframing
-
ベイクチーズタルト | BAKE CHEESE TART
![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)
繊細なラインや広い余白が洗練された雰囲気にぼかしを活かした透明感も凄く綺麗で、美容外科らしい上品さと清潔感がストレートに伝わってくる美しいデザイン✨