お役立ち

【随時更新】動画編集やWebデザインで使える無料サービスまとめ

こんにちは、ちな(@writer_china)です。

【さくっと自己紹介】フリーランスで動画編集×Webデザインの仕事をしています。動画編集はMovie Hacksで、WebデザインはDesign Hacksで学習しました!→ポートフォリオサイト

Twitterで動画編集やデザインに役立つ情報をぽつぽつツイートしていたのですが、ある程度たまってきたかなと思うのでこの記事にまとめました。

使用方法もサクッと紹介します。

「とにかくリンク一覧だけ見たい!」という方は、一番最後の「まとめ」段落へ飛んでください。

それでは早速まいりましょう。

①写真の背景を削除(透明化)する【removebg】

「YouTubeのサムネ画像制作では欠かせない」と言っても過言ではない、切り抜き作業。人物などの背景を透明にする作業ですね。

そんな時Photoshopのツール(「クイック選択ツール」や「マジック消しゴムツール」)を使う人が多いと思いますが、removebgは「ドラッグするだけ」というお手軽さ。

「Photoshop持ってない。基本Canvaでデザインしてる」という人にもおすすめです。

使い方の説明わざわざ必要かな?ってくらい簡単ですが、一応スクショします。

①ページ上に画像ファイルをドラッグドロップ。複数いっぺんにはできないので、1つずつです。

②もうその瞬間に、写真の背景が透明になりました。「ダウンロード」ボタンをクリックで、PCに保存しましょう。以上!

ファイルデータは60分後に自動的に消去されます。ファイルのダウンロードを忘れないようご注意くださいね。

③もしうまくいかなかったら、微調整も可能です。

だいたいうまくいくんですが、たま〜に「ここ、残っちゃってるよー!ほんとはそこも透明にしたかったんだよー!」ってこともあります。その時の対処法。

↓「編集」というボタンをクリックします。

↓「ERASE/RESTORE」というタブをクリックします。削除/復元という意味ですね。

↓削除もしくは復元します。ブラシサイズはスライダーで調整してくださいな。

↑これは分かりやすいようにざっくり消し消ししてますが、画面を拡大したりブラシの太さを補足して細かな部分を消し消ししたり復元させたりできます。

↓人物に限らず、動物や自動車もいけます。ネコちゃんのぽわぽわ毛並みも綺麗に残っています!

圧倒的時短!

②気になるカラーコードやRGBを取得【ColorPick Eyedropper】

ブラウザを見ていて「あ、この色いいな〜」ってことありますよね。デザインとかモノとか、なんでも。

そんな時にカラーコードを取得できるChromeの拡張アプリがColorPick Eyedropper

アプリや拡張機能の追加方法詳細については、こちらのChromeヘルプをご参照ください→アプリや拡張機能を追加する

ネットを散策していて「この色かわいい!カラーコードは?」と思ったら、すかさずColorPick Eyedropperを起動(クリック)!

カーソルを載せた場所のカラーコードとRGBがそれぞれ表示されますので、コピー。

ちなみにツールを閉じる時は右上のちっちゃいバツマークをクリックです。←これ意外と分からなくていつまでもColorPick Eyedropperが表示されたまんまで「もー!いつまで追跡してんの邪魔ー!」ってなった。

まあ皆さんは普通に分かるとは思うんですが一応……。

いろんなカラーコードを取得して、好きな色を集めたカラーパレットを作成することもできますよ。

ちなみにこのツイートの左画像(ハートのやつ)はCanvaで作成しました。Canvaはデザインやモチーフ素材が豊富でおすすめです。

Canvaの使い方を紹介したこちらの動画も参考にしてみてくださいね。

動画編集学習の初期に作ったもので拙いですが、アイキャッチ作成方法です。4分でアイキャッチ作成方法の基本的な流れが分かります。

③サムネ画像取得【YoutubeサムネイルURL取得】

TwitterでYouTube動画を紹介しようとしてURL記載しても、サムネイル画像が自動表示されないことってあります。

せっかく紹介したかったのにURL文字列しか表示されてない〜ってなると、フォロワーさんにもスルーされてしまいます。もったいない。かなしい。つらい。

そんな時はこちらのサイトで画像を取得して、ツイートしましょう。

説明によると、

Youtubeの動画URLを貼り付けると自動的にサムネイルのURLを取得して表示します。
大きなサイズのサムネイルがあるかどうかは、概ね動画の解像度によります。

だそうです。

使い方については何かしら動画のURLを貼り付けてみたらすぐに分かると思うんですが、下記ツイートのとおりですね。

私が編集させていただいた動画をツイートで紹介する時は、この方法でサムネイル画像を取得した上で、画像と挿入してツイートします。

↓サムネだけでなく、動画内スクショと一緒に掲載することも。単に画面スクショする時は「Skitch」を使用しています。

拡散のお手伝いをさせていただく時にも、サムネ画像ちゃんとしてるってのは大事かなと。

最終的にクライアントさんにも喜んでいただける……!飛び上がるほど嬉しい(自慢)!

実績公開して良いかどうかは個々のクライアントさんに要確認。NGとしている方も多いです。

④動画内であの人を紹介!【Twitterのプロフィール画像ゲッター】

動画内で別の人の話が出た時に、Twitterのプロフィールアイコン画像を使用することがあります。

私ほんとこの取得方法が分からなくて……。

スクショだと画像粗いし、検証画面使っても分かりづらいしそもそもどこにおるんや……って感じで途方に暮れていました。

そしたら……あった!

実際使ってみると一発で分かってもらえると思うのですが、仮に私のIDでやってみますね。

@以降の部分をコピペして、と……。

そうすると、アイコン画像とヘッダー画像が取得できるというもの。

アイコン画像は丸形じゃなく、四角形で取得できます!

そもそもこのサービスが作成されたきっかけが

2017年のアップデートでアイコンが画像ごと丸められてしまい、四角い元画像を保存できなくて困ったのがきっかけで作成しました。

ということなので、四角形元画像、嬉しいですね。

ちなみにPremiere Proで四角い画像を丸くくり抜きたい時は、「クロップ」という機能が使えます。こちらの動画がわかりやすく参考になりました。

⑤インストール不要で日本語フリーフォント試し書き!【ためしがき】

これも便利!

「このフォントいいな〜」と思っても、インストーラーをDLして、インストールして……って、ぶっちゃけめんどくさいですよね。これくらいめんどくさがっちゃいけないと思いつつめんどくさい……。

1つ2つならまだ良いとして、試したいフォントの数が増えてくると「むきー!」ってなって、あーもうやっぱ後でやるからもう良いや……ってなっちゃいがち(そして永遠にやらない……)。

でも大丈夫。これはね、入力するだけ!

ほら一覧表示!すごい!

「どのフォントがいいかな〜」って比較するのにも便利ですね。

↓右上のボタンで縦書き・横書きの切替可能。かゆいところに手が届きくります。

↓「きみに決めた!」って思ったら、それをクリックするだけ。配布元サイトへのリンクボタンが表示されます。(たまにリンク切れも……。そんな時は「フォント名 配布」とかで検索するなど)

あと、この入力欄の消しゴムとか細かい芸(?)もすごいかわいくて好きです。試してみてください。消し消し。

⑥数クリックでオリジナルロゴ完成【Hatchful】

「ロゴ欲しいけど外注してる暇がない……」
「自分でさくっとなんとかしたい……」

ってことありますよね。

そんな時はロゴメーカー「Hatchful」が便利。

↓こちらのツイートで使い方動画をさくっとまとめました。

Facebook、Twitter、インスタ用……と、サイズ調整済みの画像が一括でDLできるのも手間が省けて便利です。

⑦YouTube動画でフォントを探しているなら!【この動画】

手前味噌で恐縮ですが、フォント紹介動画を作成しました。

「これ見たことある!」ってフォントも多いのではないでしょうか。

「同じ文章でもフォントの種類でこんなに雰囲気や印象が変わるもんだな〜」ということが分かりやすいかと思います。

⑧スマホをかざして色情報を取得!【色彩ヘルパー】

②でColorPick Eyedropperを紹介しました。ブラウザ上のカラーコードを取得できるChrome拡張アプリですね。便利。

でも!当然ですがブラウザ上の色情報しか取得できません。

リアル生活でも「この色いいな~サイトに使いたいな~」って思うことあるじゃないですか(あるかな?)。

そんな時に使えるのがこちらの「色彩ヘルパー」です。

アプリを起動してスマホカメラをかざしたら対象物の色情報が分かるという優れものです。

花の色を採取するも良し、街で見かけたオブジェの色を採取するも良し。ちなみに私は自分の肌や髪の毛の色を採取して「ふーん、そういう色の名前なんだ!」ってことをやってました(地味…)。

他にこのアプリって実際どんなことに役立ってるんだろう?って思って調べたら、色弱者の方の不安を解消してくれるそうなんです!

↓こちらのブログ記事を読んで「あ、なるほど……!」と思いました。

「色弱者が安心して、色によるコミュニケーションができるツール」だと紹介されています。

⑨画像編集機能がまとまった【ILOVEIMG

画像圧縮は画像圧縮サイト、画像ファイル変換は画像ファイル変換サイト……って使い分けていると、ブックマークバーのアイコンが過密状態に……!ぎゅむぎゅむ……。

ILOVEIMG」なら、1つにまとまってますよ。

  • 画像の圧縮
  • 画像のサイズ変更
  • 画像の切り抜き
  • 画像のファイル形式変換
  • 写真編集
  • 透かし画像
  • ミームジェネレーター
  • 画像の回転
  • HTMLから画像

↓透かし画像とかもこんな感じで簡単に作れます。フォントサイズはこれが限界っぽいですが……。まあ事足りるかな。

HTMLから画像」ってのはどういうことかって言うと……

私も初めて使うのでやってみます。

↓URLをコピペして、と。

「追加」ボタンをクリック。Webサイトが上から下まで画像化されました!

↓DLした画像がこちら。

選択範囲だけでなく、URLをコピペしたページ全体が画像になるんですね!

⑪準備中

 

まとめ:この記事で紹介したものリンク一覧

今後も「これいい!」「便利!」「おもしろい!」と思ったものは、追記していきます。

ゼロから始めるデザイン講座『DesignHacks(デザインハックス)』受講レビューこんにちは、ちな(@writer_china)です。 この記事は、ゼロから始めるデザイン講座『DesignHacks(デザインハッ...
デザイン書籍のおすすめを7冊紹介しますこのページでは、私がデザインの仕事をする時に重宝している本を紹介します。 かく言う自分もまだまだですが「デザインって楽しいなあ」「...