【CSS】円形配置テキストの作成ガイド | Figmaデザインから実装、アニメーションまで

播磨佑悟

2026.01.23 更新

この記事を共有する

で保存する

LINE

で共有する

このページのURLをコピー

https://kasoudesign.com/knowledge/coding-circular-text

クリップボードにコピーしました

Hatena X Threads

保存

LINE LinkedIn

円形配置テキストの回転アニメーションは、静止画になりがちな画面に「動き」のアクセントを加えつつ、 ユーザーの視線を自然と下へ誘導 できる効果的な手法です。

この記事では、Figmaでの円形配置テキストの作成方法、回転アニメーションの実装、そしてSVGやCSSアニメーションを使ったWeb上での実装方法までを詳細に解説します。

円形配置テキストの回転アニメーションとは

円形に配置されたテキストを回転させる表現は、デザイン性を高めるだけでなく、特定の要素を強調したり、サイトのトーンを定義したりするのに役立ちます。

円形配置テキストを使用しているサイト

以下のサイトは、 美容外科・皮膚科の『PEGASUS CLINIC(ペガサスクリニック)』のコーポレートサイトです。ファーストビューに円形配置テキストの回転アニメーションを取り入れたスクロールダウンが使われています。

浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)

浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)

繊細なラインや広い余白が洗練された雰囲気にぼかしを活かした透明感も凄く綺麗で、美容外科らしい上品さと清潔感がストレートに...

他のサイトでも活用されています！！

niwacan ― ソト遊びをもっと日常に

niwacan ― ソト遊びをもっと日常に

斜線と角丸が特徴的! 特に斜線の装飾パターンが多く参考になるサイトです✨

Career Palette（キャリアパレット）｜神戸女子大学・神戸女子短期大学

株式会社ポケモン｜ The Pokémon Company

デザインもピカチュウカラーの大きな色面でインパクトがあり、コンテンツが最高。

Figmaで円形配置テキストの回転アニメーションを作ってみよう！

テキストを円形配置にするのは一見難しそうですが、Figmaではプラグインを使って簡単に再現できちゃいます！

早速作っていきましょう!

1. 円形配置テキストの作成

まずはプラグイン「 To Path 」を使い、正円のパスに文字列を沿わせます。
あらかじめ用意した正円のパスとループさせたいテキストを同時に選択し、プラグインを実行することで、パスの曲線に沿った綺麗なテキスト配置が完了します。

配置後に綺麗に仕上げるコツは、

プラグイン上のVertical Alignで 円の軌道に対する文字の浮き具合を微調整すること
テキストが短い場合は 文字数を増やして円を一周埋めたりすること

で、 「文字同士の余白」が均等になるように調整する のが綺麗に見せるポイントです。

2. 回転アニメーション（ループ）の実装

次に、作成したパーツをコンポーネント化して回転アニメーションを実装します。
コンポーネントの「バリアント」を使い、 360度の回転を4分割してコネクションを繋ぎます。
各バリアントに90度ずつの角度変化を与え、プロトタイプで順に繋ぎ、ループさせます。

設定のポイントは、 遅延（After delay）を最小の1msに、速度（Easing）を一定の「線形」にすること です。
この組み合わせにより、コマ飛びのない滑らかで均一な回転が実現します。

最後に、プレビュー画面でずっと回転し続けているかどうか確認しておきましょう！

これでFigmaでの円形配置テキストの回転アニメーションの作成は完了です!
SVGで書き出して、 CSSのanimationを使えば、実際のサイトでも再現が可能です!

円形配置テキストを作れるプラグインの紹介

Figmaで円形配置テキストを作成したい場合は、以下のFigmaプラグインの利用が役立ちます。

To Path

パスに沿った配置に最適なプラグインです。

ARC - Bend your type!

テキストをアーチ状に曲げるのに便利なプラグインです。

Circular Text

素早く円形配置を作成したい時に有効なプラグインです。

円形配置テキストの回転アニメーションをWeb上でも再現しよう！

1. SVG + CSSアニメーション

この方法は、画像として書き出したSVG、またはコードとしてのSVGをCSSで制御する、 最も軽量で一般的な実装方法です。

1-1. background-imageを使う方法

SVGとして書き出したテキストパス画像を要素の背景（ background-image）に指定し、CSSの keyframesを用いて transform: rotate(360deg);を適用します。

1-2. インラインSVGを使う方法

HTMLに直接記述し、 <textPath>でテキストを円状に配置する方法です。
CSSで 色やサイズを直接操作できるため、ホバーなどの インタラクティブな挙動を実装したい場合に最適です。

2. jQuery + CSSアニメーション

jQuery（JavaScript）でテキストを1文字ずつ分割して処理することで、 テキストの内容や文字数が変わっても、自動で計算して綺麗な円形に再配置できるのが強みです。

まとめ

円形配置テキストは、 Figmaのプラグインとプロトタイプ機能を活用することで、簡単にデザインとアニメーションの作成が可能です。

また Web上で再現する場合は、SVGやCSSアニメーションを駆使して、Webサイトに効果的な動きを取り入れてみてください。