[Figma] SVGエディタとしてFigmaを使う価値ありと判断した話

2023年10月9日

Figma

eyecatch ホームページ制作で、「デザインが奇抜なもの」というオーダーを頂きました。 これまでは、cssとJavascriptを使って色々な斬新なデザインを作ってきたんですが、今回はどうしても大規模なSVGパーツの制作が必要になり、 これまで使っていたinkscape(mac版)では、スピードが遅い&UI(操作性)が悪すぎる為、思い切ってFigmaを使ってみることにしました。 と入っても、webページデザインでFigmaを使うのが一般的だと思いますが、ページコーディングをした方が早いユゲタとしては、 ページデザインというよりも、SVGエディターとしてFigmaを使うのが効率的と判断したんですよ。

SVGエディタいろいろ

ホームページ素材におけるSVGファイルは、比較的マイナーなフォーマットで、多くの場合pngファイルを使っているケースが多いようです。 (これまでの依頼を受けた時の内容や、他の人の制作したホームページを見た、個人的な所管です。) イラレ以外は無料で使えるSVGエディタを複数紹介してみたいと思います。

Adobe Illustrator

https://www.adobe.com/jp/products/illustrator.html SVGデータを作るために、ベストパフォーマンスを求めるならば、AdobeのIllustratorでしょう。 ベクターエディターの中で、老舗で唯一無二の存在感を誇るこのソフトは、サラリーマン時代に触り倒してDTPを勉強させてもらいましたが、 サブスクバージョンになってからは、使うのをやめてしまいました。 何故かって?個人的にサブスクソフトが好きではないからです(ただそれだけの理由)

Inkscape

https://inkscape.org/ja/ svg制作に特化したInkscapeは、データ保存形式もsvgで統一されていて、なかなかのクオリティなんですが、Mac版は何故か信じられないほど触り心地が悪すぎる。 Windowsで使う分にはいいのかもしれないが、デフォルト手持ちマシンがMacが故に、不満タラタラなアプリです。 既存のsvgの簡単な修正作業であれば、我慢して使うことはできるんですが、スピードの遅さ、意味なく落ちるアプリ、無駄に領域を取るツール設定ウィンドウ。 これらの理由で、起動する度にストレスが蓄積するアプリでした。

VOXY SVG

https://boxy-svg.com/ ウェブブラウザエディタというURLだけでアクセスして使えてしまう便利ツールです。 動作がキビキビ動いてくれてかなり使えます。 個人的には、path操作でのポイント削除などショートカットを充実させてもらえれば、とても便利だと感じました。 でも、svgエディタとしては、かなり使えますね。

Figma

ホームページデザインとしても使えてしまうFigmaは、SVGエディタとしての機能も備えています。 ウェブブラウザツールとして使えるので、アプリのインストールも不要で、無料版でもかなりの事ができてしまいます。 XDと違って、HTMLコーディングの精度は弱いものの、デザイン構築はかなりすんなりできてしまうので、奇抜なデザインのホームページを作る時などのツールとしてはかなり使えますね。 SVGエディタの機能としては、高機能というレベルではないですが、必要最低限は抑えてあるツールで、むしろ無駄な機能が無くて扱いやすいかもしれません。

SVGフォーマットのこれから

HTMLを表示する時に、図形が描画できるCanvasタグは、かなり画期的なタグなんですが、SVGという独特のベクターフォーマットは容量の軽さや、cssなどと連動できる手軽さで、 使いこなすことができると、かなり斬新なホームページを構築することができます。 まだ、SVGの機能を存分に生かしたwebブラウザゲームなんていうのは、見たことが無いので、イラストテイストのゲームなどを軽量に扱えるデザインテイストゲームなど作ってみても面白いかもしれませんね。 ということで、当面は、Figmaを使って、今の仕事をやっつけたいと思った本日の調査活動でした。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。