ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
ANGIE / 2017年1月26日 10時21分
どうも、まさとらん(@0310lan)です!
最近は、Webサイトの制作などで「SVG形式」の画像を使うことが多くなっていますが、自分で作成してみたいと思ったことはないでしょうか。
そこで今回は、ブラウザから誰でも簡単に「SVG形式」の画像を作成できるように工夫されたオススメのWebエディタをご紹介しようと思います!
【 Vectr 】
「Vectr」は、面倒なログイン登録なども不要で、ブラウザからアクセスすればすぐに無料で利用できる気軽さが魅力的です。
慣れてくると、アイコンやロゴなどをサクッと作ってファイルに書き出せるようになるので、ご興味ある方はぜひ参考にしてみてください!
「Vectr」を起動させてみよう!
それでは、実際に「Vectr」を使いながらどのようなサービスなのかを見ていきましょう!
まずは、サイトにアクセスしてトップ画面にある「Use Online」ボタンをクリックします。
ちなみに、「Download」ボタンをクリックすれば、Windows, Mac, Linux, Chromebookなどに対応したデスクトップ版をダウンロードして利用することも可能ですよ。
次に、チュートリアル画面が表示されると思いますが、後からでも試せるのでひとまず「SKIP」をクリックしましょう。
すると、メインの編集用「エディタ」が起動して表示されるはず!
あとはこの画面上で、自由にベクター形式でドローイングしたり、用意されているシェイプ画像などを活用してオリジナルのSVG画像を作成することが出来るようになります。
画像を描いてみよう!
「Illustrator」のような本格的なツールほど多機能ではありませんが、必要な機能はいろいろ盛り込まれているのでご紹介します。
例えば、画面左側に「基本ツール」をまとめたメニューがあります。
適当なシェイプ画像を選び、キャンバスにマウスをドラッグ&ドロップすれば簡単に描くことができます。
もちろんベクター形式なので、ダブルクリックして「パス」を自在に操作することで好きなカタチに変形することも簡単!
また、「ペンツール」でゼロから線を描いていくのも良いでしょう。
「鉛筆ツール」でスケッチ風に描くことも出来るうえ、どんな「線」を描いても後から「パス」を操作すること自在に制御できるので安心です。
あらかじめ用意されている「シェイプ画像」を活用すれば、短時間でWebサイトに使えそうなアイコンを作ることも出来るでしょう。
文字入力も可能なので、いろんなケースで応用できると思います!
さらに、画面右側には「プロパティ」の設定を行うことが可能で、例えばカラーなどを自由に編集可能です。
「ボーダー」や「シャドウ」も調整もできます!
ちょっと変わった機能としては、カラー要素に写真を埋め込んで利用することも可能だったりします!
他にも、「透明度」「グラデーション」「フォントスタイル」など、細かい調整もできるようになっているので便利です。
また、SVG / PNG / JPGなどを読み込んで再利用することも可能なので、いろいろ活用範囲は広いのではないでしょうか。
ファイルに書き出してみよう!
オリジナルのSVG画像が完成したら、ファイルの「書き出し」作業をしてみましょう!
画面右上にある「Export」アイコンをクリックします。
すると「ファイル書き出し」用の画面が表示されるので、「①URLシェア」か「②ダウンロード」のどちらかを選択しましょう!
「①URLシェア」は、リンクを相手に送るだけで画像をシェアすることが出来るので、非常に簡単でお手軽な方法と言えるでしょう。
「②ダウンロード」を選べば、そのまま画像ファイルを取得できるようになっており、PNG / JPG / SVGのいずれかを選択することが可能です。
豊富なチュートリアルを試してみよう!
「Vectr」では、SVG画像を自分で作った経験が無い人のために、基本的な知識をインタラクティブに学習することが出来るコンテンツが用意されています。
画面右上のアイコンをクリックして表示される「Lessons」を選んでみましょう!
すると、ペンツールの操作方法や、フィルター・グラデーションなどの基本を学べるレッスンが表示されます!
レッスン中は、「次にやること」が常にガイドで表示されるようになっており、迷うことなく作業を進められるようになっているので便利です。
そして、基本を覚えたら「Vectr」のYouTubeチャンネルに行きましょう!
実際のSVG画像の作り方をチュートリアル形式で学習できたり、高度なテクニックなども幅広く学べる動画が盛りだくさんになっています。
【 「Vectr」YouTubeチャンネル 】
これらのコンテンツを上手く活用することで、初心者の方でもすぐに実践練習を始めることができ、短期間でオリジナルのアイコンやロゴなどを制作できるようになるでしょう。
また、今回ご紹介した内容はすべて無料で利用できるため、気軽に始められるのも魅力的ではないでしょうか。
まとめ
「Vectr」を使うと、簡単なアイコンなどをブラウザからサクッと作ることができ、慣れてくればWebサイトのプロトタイプなども描けるようになるでしょう。
バージョンアップも活発に行われており、今後は「Vectr」で制作した作品を売買できるマーケットプレイスのような機能が盛り込まれたり、プロ用の機能を使えるようになったりするようです。
また、今回はユーザー登録(無料)をせずに利用しましたが、登録すれば制作した作品をクラウドに保存できるようになるので、ご興味ある方はぜひトライしてみてください!
<参考>
・「Vectr」公式サイト
・「Vectr」公式ドキュメント
written by まさとらん(@0310lan)
外部リンク
この記事に関連するニュース
-
脱「パワポっぽい」 Canvaでオシャレなプレゼンを 第21回 スマートフォンでCanvaを使ってみよう
マイナビニュース / 2024年7月4日 9時0分
-
Excelをノーコードで自動化しよう! パワークエリの教科書 第8回 パワークエリの“大まかな流れ”を復習しよう
マイナビニュース / 2024年7月1日 11時0分
-
脱「パワポっぽい」 Canvaでオシャレなプレゼンを 第20回 1つのスライドを複数人で共同編集する方法
マイナビニュース / 2024年6月27日 9時0分
-
kintoneでゼロから始めるノーコード開発 第2回 名刺アプリを作ってみる - 作成手順、データ入力、閲覧方法を知る
マイナビニュース / 2024年6月21日 11時0分
-
"ソース記憶"で新たな備忘録兼ブックマークとして使えるOneNoteの新付箋
マイナビニュース / 2024年6月10日 8時49分
ランキング
-
1【早期発見のために】乳がん、大腸がん、肺がん、子宮がん、胃がん、食道がん…“予兆”の可能性がある「体からの警告」
NEWSポストセブン / 2024年7月5日 16時15分
-
2「知らないとヤバい…免許返すべき?」 道路にある「謎の斜線ゾーン」通って良い? どんな意味ある? 元警察官が解説
くるまのニュース / 2024年7月5日 9時10分
-
379%がパスタは家で作って食べる!最も好きなパスタソース1位はバリエーションが豊富
よろず~ニュース / 2024年7月5日 11時40分
-
4ワークマンの「暑い日に履きたい、通気性抜群のシューズ」3選 980円の「ボーンサンダル」はカワイイ&歩きやすい
Fav-Log by ITmedia / 2024年7月4日 5時55分
-
5スーパーでまとめ買いしたお肉→「そのまま冷凍庫」はNG!?理由に「知らんかった」ネット驚愕 ニチレイフーズオススメの方法は
まいどなニュース / 2024年7月3日 12時8分
記事ミッション中・・・
記事にリアクションする
![](/pc/img/mission/mission_close_icon.png)
記事ミッション中・・・
記事にリアクションする
![](/pc/img/mission/point-loading.png)
エラーが発生しました
ページを再読み込みして
ください
![](/pc/img/mission/mission_close_icon.png)