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

アプギガトップ > Webサービス > ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
注目記事ピックアップ
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
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...

ページトップへ戻る