Figma とは
Figmaは、ブラウザで実行されるインターフェイスデザインアプリケーションですが、実際にはそれだけではありません。チームベースの共同設計プロジェクトには、おそらくこれが最適なアプリケーションだと言っても過言ではありません。
https://webdesign.tutsplus.com/articles/what-is-figma–cms-32272
無料でワイヤーフレームやUIのプロトタイピングが作れる、ブラウザ上で動作するツールです。
フィギュアの方 ではありません！
三日月の形を作る
まずは月の呼吸の最大の特徴である三日月状のエフェクトを作ります。
手始めに大きさの異なる円を二つ作ります。
以下のように「Shape Tools」からEclipse を選択します。
で、円を二つ描きます。
大きさは一つを200×200、もう一つを170×170としました。
(分かりやすいように片方を赤く塗っています)
それを右と下の境界が重なるように配置します。
両方の円を同時選択した状態で、以下のように「Subtract selection」をクリックします。
すると、このように三日月状のシェイプができました！
そのままだと、以下のように2つのシェイプの状態が残ってしまっています。
そこで「Flatten selection」をクリックします。
すると1つのシェイプになりました！
次に色を塗っていきます。
グラデーションで背景色をつける
シェイプを選択した状態で以下のように「Fill」の真下の四角部分をクリックします。
すると、背景色の詳細な設定ができるツールチップが表示されます。
ツールチップの左上にあるように現状の設定は「Solid」で、単色のみ設定できる状態です。
グラデーションを付けたいので以下のように「Linear」を選択します。
すると以下のような表示になります。
これが線形のグラデーションができるようになります。
まずグラデーションの軸を調整します。
以下のように、三日月の角度と軸を一致させます。
背景色を塗っていきます。
ツールチップの左右のつまみを選択し、それぞれ黄色に塗っていきます。
次にシェイプの中央にグラデーションを付けていきます。
以下のように色のバーの真ん中あたりをクリックします。
すると、ツールチップに吹き出しのようなものが一つ増えます。
この吹き出しはグラデーションを制御する目印で、
その場所ではこの色にしてください、という設定ができます。
真ん中を白に指定して完成です！
これで月の呼吸の特徴的なエフェクトが一つできました。
ここからは飛ばしていきます！
斬撃の本体を作る
斬撃の本体は微妙に楕円形にしようと思います。
大きさは一つを800×700、もう一つを700×600としました。
これをこうして、
こう！
三日月のエフェクトを散りばめる
あとは、最初に作った黄色いエフェクトをコピペし、大きさや角度を色々変えて、
本体の斬撃の上に散りばめてやります。
するとこうなりました！
枠線やシャドウを付けて完成
なんとなく寂しいので、枠線とシャドウを付けます。
まず枠線を付けます。
以下のように全シェイプを選択して、「Stroke」の右の「+」をクリックします。
すると以下のようになりました。
デフォルトのストローク設定ですが、一気にアニメ塗りっぽくなりましたね！
続いてシャドウを付けます。
同じように全シェイプを選択して「Effects」の右の「+」をクリックします。
すると以下のようになりました。
これもデフォルトの設定ですが、ちょっとディテールが凝ってきた感が出始めました。
これにて完成とします！
最後に
月の呼吸 壱ノ型 闇月・宵の宮の剣閃をざっくり会得できました🙌
以上です。お疲れ様でした！
Web-y.dev 