ホームページ制作で、「デザインが奇抜なもの」というオーダーを頂きました。
これまでは、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を使って、今の仕事をやっつけたいと思った本日の調査活動でした。
0 件のコメント:
コメントを投稿