前回の続きです。
早速作り方ですが動画にしたのでそちらをみてもらったほうが流れはわかりやすいと思います。noteでは各所の詳しい説明をしようと思います
作り方は下の動画を参照ください。

制作の流れとしては

①表面の色と立体の角に入る線の太さと色を決定
②立体部分の奥行きを制作。色も決める。
③立体部分の奥行きの角に入る線を制作。⬅ ここがキモ！
④立体部分一番下の線を制作。⬅ 若干ややこしい

となります。
うまく整合性を取るために工夫する箇所があるので動画では一連の流れで作っていますが、構造の理解ができれば既存のグラフィックスタイルに組み込むことも可能なはずです。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

①表面の色と立体の角に入る線の太さと色を決定

1番上の階層で-0.5px、２番目の階層で+0.5pxオフセットをかけて1pxの線になるように調整しています。
外側や内側に1pxオフセットをかけたほうが楽なのですが、そうすると手順③で奥行きにつける線がずれてしまうためひと手間かかりますがキレイに見えるようにしています。

これはこれでありですがピッタリ合っていないので違和感はありますね。
奥行き部分の角の線部分にオフセットをかけて調整してもいいのですが、後の工程④での処理を考えてこちらの方法を使っています。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

②立体部分の奥行きを制作。色も決める。

変形のコピーを使って見た目上3Dぽくなるように処理しています。
拡大・縮小の％、移動の水平・垂直の大きさで奥行きの形が変わります。
この数値感は実際にいじって掴んでほしですが、今回のアピアランスに関しては構造上あまり奥行きを大きく出来ません。
これは奥行き部分の角の線が奥行きが大きくなると長くなってしまうので文字の塗りから飛び出てしまうからです。

回避する方法もありますが、更にアピアランスが重くなるのでその際は別データに保存して画像にするとかai配置にするライブラリに保存するなどで実物を使わないほうが良いと思います。回避方法に関しては後日まとめ予定。
奥行きの大きさに関しては見た目で判断するしかないですがコピー50ぐらいなら大抵の文字で大丈夫かなと思います。
　また、オフセットの数値を-0.25pxにした訳ですが、-0.5pxのままでは奥行き部分の角の線のと奥行きの立体部分との間に隙間ができるのでそれを防ぐために変更しています。オフセットをなしにしてしまうと今度は外側にはみ出て見えてしまう事があるので-0.5px＜X＜0pxの間でオフセットの設定をする必要があります。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

③立体部分の奥行きの角に入る線を制作。

こちらが今回のキモの部分です。
思いついたときは「圧倒的閃き…っ！」のナレーションが流れました。
構造を簡単に説明すると

① 線幅と同じ大きさの丸形パターンブラシを作る
↓
② パターンブラシの「サイドタイル」を透明化し見かけ上なしにする。
 （設定でなしに出来なかったので。。。）
↓
③「外角タイル」にのみ丸があるパターンブラシが出来上がる。
↓
④パターンブラシを奥行きの立体部分と表面の間に適用。
↓
⑤パターンブラシに立体部分と同じ「変形」を適用。

となります。動画の手順で登録してもらえれば問題ないですが、
・サイドタイルをなしにできない。
・サイドタイルを透明にすると外角タイルも一緒に透明に…。
なるのでご注意ください。
手順を簡略化するのであれば透明の丸オブジェクトを先に登録すればいいのですが動画ではわかりやすいように最初は線色の丸オブジェクトを作ってからパターンブラシを登録しています。
　普段ブラシをあまり使わないのでもっと良いやり方があるかもしれないですね。

この「外角タイル」に登録するオブジェクトの形は丸である必要はないので形を変えることで面白いデザインのアピアランスになると思います。

上記は丸型ですが大きめに配置して一番上の階層に立体部分のないパターンブラシ（ネジ風）をオフセットをかけて配置したものです。もちろん打ち替え可能です。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

④立体部分一番下の線を制作。
③の変形効果によってかなり重めのアピアランスになっているのでちょっとでも軽くするために変形のコピーを解除して、計算で丁度いい位置にオブジェクトが来るように調整しています。
その前に変形コピーの仕組みを簡単に説明すると、

上記のようになります。ちなみに画像はイメージです。実際はコピー1枚1枚色は変えられませんのであしからず。

簡単にいうとコピーは

設定した移動距離分1回移動し、前の大きさから設定した%分1回縮小して、それがコピー回数分繰り返されるということです。

一番下のコピーされたオブジェクトの元のオブジェクトからの大きさは

縮小率^コピー回数

なので縮小率90％の5乗となり約59％となります。
移動距離は拡大縮小に関わらず一定なので

移動距離×コピー回数

で算出できます。水平垂直はそれぞれ計算が必要です。
移動距離は暗算可能ですが、コピー回数と縮小率によっては永遠に終わらなそうなので関数電卓を使用するのが早いと思います。googleで調べると出てきますので。

この構造はピアランスが無駄に重くなることを防げるので覚えておいて損はないかなと思います。こんな感じの多段立体でも使えます。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

まとめ
どのサイトをみても同じようなアピアランスがないので世界初なんじゃないかと勝手に思っています（笑）
デザインでもよく見るものなのでいつもみんなどうやって作っているのか不思議に思っていましたが、今後は自分のレパートリーに入れられそうなので思いついてよかったかなと思っています。
現在は情報もシェアする時代なのかなと思うので誰にも知られずに消えてしまうよりは誰かの役に立てばいいと思い情報発信することにしました。
みなさんのアレンジした使い方を教えてもらえたら嬉しいなと思います。