シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
注目記事ピックアップ
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2017/01/26 19:21

ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!

vectr-01 どうも、まさとらん(@0310lan)です!

最近は、Webサイトの制作などで「SVG形式」の画像を使うことが多くなっていますが、自分で作成してみたいと思ったことはないでしょうか。

そこで今回は、ブラウザから誰でも簡単に「SVG形式」の画像を作成できるように工夫されたオススメのWebエディタをご紹介しようと思います!

【 Vectr 】
vectr-02
「Vectr」は、面倒なログイン登録なども不要で、ブラウザからアクセスすればすぐに無料で利用できる気軽さが魅力的です。
慣れてくると、アイコンやロゴなどをサクッと作ってファイルに書き出せるようになるので、ご興味ある方はぜひ参考にしてみてください!


「Vectr」を起動させてみよう!

それでは、実際に「Vectr」を使いながらどのようなサービスなのかを見ていきましょう!


まずは、サイトにアクセスしてトップ画面にある「Use Online」ボタンをクリックします。
vectr-03 ちなみに、「Download」ボタンをクリックすれば、Windows, Mac, Linux, Chromebookなどに対応したデスクトップ版をダウンロードして利用することも可能ですよ。


次に、チュートリアル画面が表示されると思いますが、後からでも試せるのでひとまず「SKIP」をクリックしましょう。
vectr-04

すると、メインの編集用「エディタ」が起動して表示されるはず!
vectr-05 あとはこの画面上で、自由にベクター形式でドローイングしたり、用意されているシェイプ画像などを活用してオリジナルのSVG画像を作成することが出来るようになります。


画像を描いてみよう!

「Illustrator」のような本格的なツールほど多機能ではありませんが、必要な機能はいろいろ盛り込まれているのでご紹介します。


例えば、画面左側に「基本ツール」をまとめたメニューがあります。
vectr-06

適当なシェイプ画像を選び、キャンバスにマウスをドラッグ&ドロップすれば簡単に描くことができます。
vectr-07

もちろんベクター形式なので、ダブルクリックして「パス」を自在に操作することで好きなカタチに変形することも簡単!
vectr-08

また、「ペンツール」でゼロから線を描いていくのも良いでしょう。
vectr-09 「鉛筆ツール」でスケッチ風に描くことも出来るうえ、どんな「線」を描いても後から「パス」を操作すること自在に制御できるので安心です。


あらかじめ用意されている「シェイプ画像」を活用すれば、短時間でWebサイトに使えそうなアイコンを作ることも出来るでしょう。
vectr-10

文字入力も可能なので、いろんなケースで応用できると思います!
vectr-11

さらに、画面右側には「プロパティ」の設定を行うことが可能で、例えばカラーなどを自由に編集可能です。
vectr-12

「ボーダー」や「シャドウ」も調整もできます!
vectr-13

ちょっと変わった機能としては、カラー要素に写真を埋め込んで利用することも可能だったりします!
vectr-14 他にも、「透明度」「グラデーション」「フォントスタイル」など、細かい調整もできるようになっているので便利です。

また、SVG / PNG / JPGなどを読み込んで再利用することも可能なので、いろいろ活用範囲は広いのではないでしょうか。


ファイルに書き出してみよう!

オリジナルのSVG画像が完成したら、ファイルの「書き出し」作業をしてみましょう!


画面右上にある「Export」アイコンをクリックします。
vectr-15

すると「ファイル書き出し」用の画面が表示されるので、「①URLシェア」か「②ダウンロード」のどちらかを選択しましょう!
vectr-16 「①URLシェア」は、リンクを相手に送るだけで画像をシェアすることが出来るので、非常に簡単でお手軽な方法と言えるでしょう。
「②ダウンロード」を選べば、そのまま画像ファイルを取得できるようになっており、PNG / JPG / SVGのいずれかを選択することが可能です。


豊富なチュートリアルを試してみよう!

「Vectr」では、SVG画像を自分で作った経験が無い人のために、基本的な知識をインタラクティブに学習することが出来るコンテンツが用意されています。


画面右上のアイコンをクリックして表示される「Lessons」を選んでみましょう!
vectr-17

すると、ペンツールの操作方法や、フィルター・グラデーションなどの基本を学べるレッスンが表示されます!
vectr-18

レッスン中は、「次にやること」が常にガイドで表示されるようになっており、迷うことなく作業を進められるようになっているので便利です。
vectr-19

そして、基本を覚えたら「Vectr」のYouTubeチャンネルに行きましょう!

実際のSVG画像の作り方をチュートリアル形式で学習できたり、高度なテクニックなども幅広く学べる動画が盛りだくさんになっています。

【 「Vectr」YouTubeチャンネル 】
vectr-20
これらのコンテンツを上手く活用することで、初心者の方でもすぐに実践練習を始めることができ、短期間でオリジナルのアイコンやロゴなどを制作できるようになるでしょう。

また、今回ご紹介した内容はすべて無料で利用できるため、気軽に始められるのも魅力的ではないでしょうか。


まとめ

「Vectr」を使うと、簡単なアイコンなどをブラウザからサクッと作ることができ、慣れてくればWebサイトのプロトタイプなども描けるようになるでしょう。

バージョンアップも活発に行われており、今後は「Vectr」で制作した作品を売買できるマーケットプレイスのような機能が盛り込まれたり、プロ用の機能を使えるようになったりするようです。

また、今回はユーザー登録(無料)をせずに利用しましたが、登録すれば制作した作品をクラウドに保存できるようになるので、ご興味ある方はぜひトライしてみてください!


<参考>
「Vectr」公式サイト

「Vectr」公式ドキュメント



written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る