表題の件ですが
Webサイト内においてロゴデザイン・グローバルナビ・見出し要素・ボタンパーツ・装飾要素だったりとイロイロな場面で視覚的に『強調する場合』や『チョットした遊び心の演出』などのような効果的な印象を与えるために使われている『円形タイポグラフィ』のことです
『スプラッシュ画面』のローディングアニメーションなどでもよく見かけますね( •ᴗ• )⸝
普段は気にも留めていないかもですが…
実生活においても注視してみると様々なところで見られる手法でもあります
何気に見ているチラシ・ビラだったりフライヤー・CMだったりお店の看板だったり etc...
企業ロゴなどは大抵の場合レギュレーションが細かく決められているのでWebサイトではほぼほぼ100％『画像』や『読み込み svg』で対応するのが通常です
それ以外の要素に関しては『SEO』や『メンテナンス性・汎用性・更新性』などの観点から考慮して画像よりもテキストで処理した方が良い場合もあることでしょう
デザインする際にはアプリによって作り方に違いはありますが割と簡単にサクっと作成できます
ですが…だがしかし…
Webサイト上でテキストを丸～くレイアウトするのって何気に難しくないですか？
『やり方なんて何種類でもありますよ～』
『簡単です！あれ？あなたは出来ないのですか？』
『何年マークアップで飯食ってると思っているんですか～楽勝楽勝』
って今思ったコーダーさん…素直に尊敬いたします！
見た目的には要件を満たしているように感じます
要素のセンタリングや親要素のstyle・フォントサイズなどは割愛して円形タイポグラフィに関するコアな部分のみザックリ解説します…まぁ css を覗き見れば一目瞭然なので必要はないかもですがね＾＾
それでもジックリ読みたいという奇特な方は下記より
li{
height:100px;
position:absolute;
transform-origin:bottom;
}
@for $i from 0 to 29{
li:nth-child(#{$i + 1}) {
transform:rotate(#{$i * 12}deg);
}
}弊社の URL は29文字なので29個のliタグを使用して1文字1文字入れてあります
サンプルではliタグを使用していますが並列関係でさえあれば別のタグでも勿論構いません
要素を浮揚させているのでキッチリとセンタリング表示する際には少々計算が必要となりますが円形タイポグラフィだけを見ると中身を知ってしまえばドウってことない仕組みです
画像と違ってテキストを使用しているので下記のような応用も簡単です
ある程度の『メンテナンス性・汎用性・更新性』は担保出来ている気はします
ですが『SEO観点』だとliタグに1文字づつ入れてる時点でスーパーアウトな気がします
ということで次の実装例へ続く……
こちらも見た目的には要件を満たしているように感じます
レイアウトのためだけに強引な html文章構造を組まなくて良いというだけでもコーダーとしてとても清々しい気持ちになりますし css的にも超複雑な計算(笑)をする必要すら皆無です！
『これで SEO的にも完璧じゃん！』と思ったソコのあなた…勉強不足ですよｗ
textPathタグは表示的には『完全にテキスト』でありながら本来 SEO効果ゼロと言われております
更にimgタグを使用して svgファイルを読み込む場合とは違ってinline-svgタグにはaltなどの代替テキスト設定は出来ません…スーパーダメじゃん！ｗ
ですが…『諦めたらそこで試合終了ですよ』
個人的には普通に考えて『title属性付与すれば大丈夫じゃね？』って思ってました
それでも微妙に不安感があるのであればsvgタグにrole="img"付与することで画像・グラフィックスとして認識させてaria-label="代替テキスト"とかって設定すれば安心だよね！
直接的な SEO としては効果がなかったとしてもアクセシビリティ対応として効果があるということと googleさん自身が公式に『こうやって書きなよ！』って言っているということは『とりあえず現時点でのベストプラクティス？』って感じがしますしね( •ᴗ• )⸝
まぁでも直接的な SEO効果という観点では公式発表があったワケではないですしブラウザ差異もあるようなので実際のところ上記施策で『SEO的にも超安心！』とは言い切れないですよね
では『ドウ組むのがベストなの？』って話しですが…結局のところケースバイケースよねｗ
実際の使い方・デザインにもよりますが上記のような考え方で良いのではないでしょうかね…
多角的に見てベストは尽くした気はします٩(๑❛ᴗ❛๑)۶
これを『円形タイポグラフィ』と言ってよいか分かりませんが…
さて何が書かれているでしょうか？ｗ
ジーっと見てると『目が回る』と噂ですのでガン見禁止ですｗ
textPathにmix-blend-modeが適用されるかどうか検証してみたヤーツ
とtextPath自体の色をアニメーション出来るかどうかの検証もついでにやったヤーーツ
これは結構良い感じですね…ジーっと見ていられますｗ
もうこうなるとなにがなにやらｗ
とっても今更ですが円形の中にテキストを綺麗に入れ込んだりテキスト自体を丸～くレイアウトしたりテキストを緩やかにカーブさせたりすることを『円形タイポグラフィ』と言うそうです
弊社デザイナーさんに確認したら教えてくれました…まぁ彼女は『AIさん』に聞いたそうですがｗ
※イニシャルとかではなく『artificial intelligence』ねｗ
締めとして毎回書いている気はしますが
どんなに『役に立ちそうにない知識』や『興味がまるでないモノ』であっても活用できればアイディア次第で表現力は抜群に増すような気がしますので【身に付けておいて損はない！】って真剣に思います
そして実装だけではなくソコから波及して『SEO』だったり『アクセシビリティ』だったりトコトン調べてみたりすることもオススメいたします
【点ではなく線・面で考えるクセを付けましょう】そして広い視野で物事を多角的に見ることの出来るエンジニアを目指しましょう(｀･ω･´)ｼｬｷｰﾝ
