One by Wacom買った

ブログを作る時に記事に画像があった方がいいのかなぁと思いOne by Wacomを買いました！

CLIP STUDIO PAINT

amazonで6000円程度で買えるワコムのペンタブレット One by Wacom。

これにはCLIP STUDIO PAINTのDebut版が付属していて、最初から簡単に絵が描けました

アップグレードは必須！

Debut版はベクター線とSVGがオミットされています。

最初は別にアップグレードは不要かなぁと思ったのですが、SVGはアイコンなどに使い易い形式だという事を知り4500円程度で優待アップグレードが出来るとのことでやってみました。

当ブログのタイトルロゴ、こちらソースコードを見てもらうとわかるのですが

以下のSVGという形式のタグで描写されたものになります。

<svg viewBox="0 0 347 118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-full w-full text-pink-500 hover:text-pink-400">
<g stroke-linecap="round" id="lpblog">
<path d="M95.92,101.56 C121.54,101.53 186.63,101.44 226.10,101.39 C261.49,101.35 312.96,101.28 329.05,101.26 C329.05,101.26 329.77,17.43 329.77,17.43 C329.77,17.43 302.68,17.40 302.68,17.40 C302.68,17.40 302.20,42.61 302.20,42.61 C302.20,42.61 322.35,42.36 322.35,42.36 C322.35,42.36 322.33,57.46 322.33,57.46 C322.33,57.46 286.91,57.44 286.91,57.44 C286.91,57.44 286.92,2.52 286.92,2.52 C286.92,2.52 344.50,2.54 344.50,2.54 C344.50,2.54 344.49,115.39 344.49,115.39 C319.53,115.39 256.73,115.38 218.88,115.38 C180.25,115.38 115.84,115.37 90.08,115.37 C89.29,115.37 88.50,115.37 87.71,115.37 C87.71,115.37 95.92,101.56 95.92,101.56 Z"></path>
<path d="M279.25,33.26 C279.25,33.26 253.26,33.27 253.26,33.27 C253.26,33.27 253.28,94.33 253.28,94.33 C253.28,94.33 314.54,94.32 314.54,94.32 C314.54,94.32 314.54,65.27 314.54,65.27 C314.54,65.27 299.39,65.26 299.39,65.26 C299.39,65.26 299.41,79.57 299.41,79.57 C299.41,79.57 268.86,79.59 268.86,79.59 C268.86,79.59 268.85,48.36 268.85,48.36 C268.85,48.36 279.24,48.37 279.24,48.37 C279.24,48.37 279.25,33.26 279.25,33.26 Z"></path>
<path d="M238.48,94.71 C238.48,94.71 238.48,2.87 238.48,2.87 C238.48,2.87 223.19,2.86 223.19,2.86 C223.19,2.86 223.22,94.70 223.22,94.70 C223.22,94.70 238.48,94.71 238.48,94.71 Z"></path>
<path d="M98.45,94.52 C98.45,94.52 107.74,79.74 107.74,79.74 C107.74,79.74 183.12,79.78 183.12,79.78 C183.12,79.78 193.09,75.00 193.09,75.00 C193.09,75.00 193.10,63.82 193.10,63.82 C193.10,63.82 168.84,46.16 168.84,46.16 C168.84,46.16 186.47,28.07 186.47,28.07 C186.47,28.07 186.47,17.64 186.47,17.64 C186.47,17.64 158.43,17.63 158.43,17.63 C158.43,17.63 158.42,72.84 158.42,72.84 C158.42,72.84 143.53,72.83 143.53,72.83 C143.53,72.83 143.52,2.75 143.52,2.75 C143.52,2.75 188.90,2.71 188.90,2.71 C188.90,2.71 201.49,10.82 201.49,10.82 C201.49,10.82 201.48,31.33 201.48,31.33 C201.48,31.33 187.66,45.11 187.66,45.11 C187.66,45.11 208.19,58.61 208.19,58.61 C208.19,58.61 208.19,84.68 208.19,84.68 C208.19,84.68 189.82,94.56 189.82,94.56 C189.82,94.56 98.45,94.52 98.45,94.52 Z"></path>
<path d="M113.62,42.24 C113.62,42.24 113.61,17.61 113.61,17.61 C113.61,17.61 86.53,17.63 86.53,17.63 C86.53,17.63 86.53,94.01 86.53,94.01 C86.53,94.01 71.38,94.01 71.38,94.01 C71.38,94.01 71.38,2.81 71.38,2.81 C71.38,2.81 128.42,2.82 128.42,2.82 C128.42,2.82 128.41,57.39 128.41,57.39 C128.41,57.39 94.75,57.38 94.75,57.38 C94.75,57.38 94.73,42.24 94.73,42.24 C94.73,42.24 113.62,42.24 113.62,42.24 Z"></path>
<path d="M17.43,2.76 C17.43,2.76 17.44,101.46 17.44,101.46 C17.44,101.46 87.22,101.37 87.22,101.37 C87.22,101.37 78.74,115.26 78.74,115.26 C78.74,115.26 2.29,115.39 2.29,115.39 C2.29,115.39 2.35,2.75 2.35,2.75 C2.35,2.75 17.43,2.76 17.43,2.76 Z"></path>
</g>
</svg>

複雑なイラストには不向きだったり慣れないと扱いが少し面倒というデメリットはありますが、軽量なうえ後からCSSで色を変えたり動きを付ける事ができたり

何よりどれだけ拡大縮小しても劣化しないという大きなメリットがあります。

長ったらしいSVGコードを短くする

SVGのコードをそのまbladeに貼り付けると非常に邪魔になるのですが、以下の記事を参考にコンポーネント化することでSVGをスッキリと簡単に扱えるようにしました。

Laravel7以上を使っている方でSVGを使うなら非常におすすめの方法です。

Chasing Code | Build an SVG Icon Component with Laravel 7

https://chasingcode.dev/blog/build-svg-icon-component-laravel-7/

統括

1万円程度でタブレットとSVGを扱えるソフトが手に入ったのでなかなかお買い得でした。

SVGが使いたくてアップグレードをしたのですが、ベクター線がこれまた便利。

後から自由に線を曲げたり移動出来るので、気になる線をあとから微調整したりコピーして左右対称な絵を簡単に描けるようになりました。

PROへのアップグレードは絶対にした方が良いかと思います。

SVGはいらないけど、絵は描いてみたいって人も6000円なのでお試しで買ってそれから考えてみてもいいかと思います。