ツール 作業効率化 画像編集

【最短1分】自動スクショで操作手順が簡単に作れる「Tango」の使い方

複雑な操作手順を伝えるために、

一枚一枚画面をスクショして……

一枚ずつ画像を編集して……

ひとつずつ説明を書いて……

こんな時間のかかることをやってませんか?

「Tango」を使えば、こんなめんどくさい作業から開放されます!

以下のような操作手順が「最短1分」で作れます。

完成イメージ

最短1分は、タイトルの変更のみ行う場合です。

それでは「Tango」の詳しい使い方について本文で詳しく解説していきます。

「Tango」とは、ブラウザの拡張機能です!

まずはじめに「Tango」について簡単に説明しておきます。

Tangoとは、ブラウザ上の操作手順を自動でスクショしてくれる GoogleChromeMicrosoft Edge の拡張機能です。

ブラウザとは「ウェブブラウザ」のことで、WEBサイトを閲覧するために使うソフトのことを言います。

Tango には「無料プラン」と「有料プラン」があるんですが、ブラウザ内の操作手順を記録するだけなら無料プランで十分です。

フリープランProプラン
キャプチャできる範囲ブラウザ内デスクトップ全体
ワークフロー数最大25無制限
PDF の Tango 透かしありなし
共同編集権限を付与✕○
キャプチャ中に機密情報をぼかす✕○
料金無料月払い:$20/月
年払い:$16/月

「Tango」を起動すると、

  1. クリックで自動キャプチャ
  2. マウスを合わせると赤枠で囲む
  3. クリック要素を自動テキスト化

これらがすべて自動作成されます。

あなたがすることは、普通に操作を進めるだけ!

あとはTangoが勝手に操作手順を記録してくれます。

これ、めちゃくちゃ便利なんですが、無料プランには欠点がひとつだけあります。

それは、ブラウザ内の操作しか記録できないことです。^^;

ブラウザ以外の操作にも使いたい場合は、月20ドルの有料プランに移行するしかありません。。。

「有料プランはちょっと・・・」という方は、「ステップ記録ツール」を使ってみてください。

Tangoのように、赤枠で囲んだり、どのリンクをクリックしたのか、などは自動で記録できないですけど、「とりあえず操作手順を伝える」という目的は十分達成できるはずです。

詳しくは以下の記事をチェックしてください。

「Tango」を使えるようにしよう

それでは Tangoを使うための準備をしていきましょう。

Tangoを使えるようにするには、

  1. Tangoのインストール
  2. Googleアカウントへサインイン
  3. Tangoのアイコンをピン留めする

この3つが必要です。

それぞれ手順を解説していきます。

Tangoのインストール

1.まずはChrome ウェブストア、もしくはEdge アドオンの「tango」のページを開きます。

GoogleChromeで使う場合はこちら

Microsoft Edgeで使う場合はこちら

「tango 拡張機能」で検索し、検索結果に出てくるタイトル「Tango: screenshots, training, & documentation」からでも行けます。

2.[Chrome に追加]をクリックするとインストールされます。

Googleアカウントでサインイン

1.[Sign in with Google]をクリックし、Googleアカウントでサインインします。

2.Tangoのマイページが開きます。

ここで、自動作成したワークフローの一覧が見れます。

マイページ

Tangoのアイコンをピン留めする

Tangoをすぐ使えるように、拡張機能アイコン Tango をツールバーにピン留めしておきましょう。

1.右上にパズルのピースのようなアイコンがあるので、それをクリック。

2.インストール済みの拡張機能が表示されるので、Tangoの右にあるピンをクリックすると、ツールバーにTangoのアイコンが表示されます。

「Tango」の使い方(操作手順)

ここからは「Tango」の使い方(操作手順)を以下の流れで解説していきます。

  • Tango起動(記録開始~停止)
  • 記録したデータを編集する
  • 編集した手順を保存する

それでは見て行きましょう。

Tango起動(記録開始~停止)

録画開始

1.ツールバーにあるTangoのアイコンをクリックし、②の記録開始ボタンをクリック。

2.記録が開始されれば、画面左下にチェックマークのアイコンが表示されます。

3.記録中にマウスを合わせるとリンクが赤枠で囲まれます。

クリックすると、画面と赤枠が記録されます。

記録停止

画面左下にあるチェックアイコンをクリックすると記録は停止します。

その他メニューについて

チェックアイコンにカーソルを合わせると以下のメニューが出現します。

アイコン機能説明
一時停止 再生一時停止・再生録画を一時停止・再開ができます
リスタート再スタート録画を最初からやり直せます
配置の変更チェックアイコンを画面の右側に移動できます
バツ破棄録画を中止したい場合はこのボタンを押します
メニュー詳細

記録したデータを編集する

ここからは、Tangoで記録したデータの編集について詳しく解説していきます。

記録中にクリックしたタイミングで、画面のキャプチャと説明(英語表記)が記録されています。

以下がtangoの編集画面です。

Tango編集画面

ここで編集できるのは、「タイトル・説明テキスト・画像」です。

簡単に操作手順を説明するだけなら、タイトルを編集するだけでOKですが、きちんとした手順書を作成するのなら、説明の追加と画像の編集も必要になると思います。

それぞれ編集方法を解説していきます。

タイトルの変更

自動で入力されているタイトル(Workflow with Google)を削除し、新しいタイトルを入力する。

※記録するページによって、元々入力されているタイトルは異なります。
今回はGoogleのトップページから記録を開始したので「Workflow with Google」というタイトルになっているだけです。

説明テキストの編集

自動で入力されているテキスト(Click on Google アプリ)を削除し、操作の説明テキストを記入する。

画像を編集する

画像の左下にあるペンアイコンをクリックすると、画像編集エディタが開きます。

エディタには以下の機能が備わっています。

画像編集エディタ

アイコン機能説明
縮小画像を縮小できます
拡大画像を拡大できます
トリミング画像を切り抜きできます
セレクト選択する際に使います
矩形四角で囲む際に使います
楕円丸で囲む際に使います
矢印矢印で強調できます
フリーハンド自由に線を書くことができます
テキスト任意のテキストを表示できます
ぼかしぼかしを入れることができます
キャンセル編集をキャンセルできます
保存編集を保存します
トリミング
短形・楕円・矢印

「色」や「太さも」変更可能です。

フリーハンド・テキスト・ぼかし

最後に右上の[Save]をクリックすれば、編集が保存され、編集画面が閉じます。

編集した手順を最終保存する

すべての編集が終わったら、右上にある[Save Workflow]をクリックして保存します。

これで編集は終わりです。

あとは作成した手順をどのように使えばいいのか、どのようにシェアするのか、について詳しく解説していきます。

作成した手順の使い方

手順を作成できたら次は「どのような使い方ができるのか」を見ていきましょう。

使い方は大きく3つに分かれます。

  1. HTMLとして使用する
  2. PDFで保存する
  3. WEB上で手順を確認する

それぞれ詳しく解説していきます。

HTMLとして使用する

  • 細かな説明を追加し、正式な手順書として作り込みたい
  • 装飾などを使って見やすいマニュアルを作りたい
  • 操作手順の記事としてWEB上に公開したい

という場合は、HTMLとして使用する方法が最適です。

使用例

  • WordPressで記事として編集する
  • Word や Googleドキュメント で編集する

手順

1.右上にある[Share & Export]をクリック。

2.メニューの[Magic Copy]を開き[Copy HTML]をクリック。

HTMLとしてクリップボードにコピーされるので、そのままHTMLに対応しているソフトに貼り付けて使用してください。

PDFで保存する

  • 操作手順をメールで送りたい
  • ネット環境がなくても見れるようにしたい

という場合は PDF が最適です。

PDFに変換すると下図のように、1ページに2ステップずつ表示されるので、けっこうわかりやすいです。

Tango の PDF化

手順

[Download]を開き[PDFのダウンロードアイコン ]をクリック。

エクスプローラーが開くので、任意の場所に保存します。

WEB上で手順を確認する

  • どの端末でも確認できるようにしたい
  • 編集を即反映させたい
  • 気軽に手順をシェアしたい

こんな場合は「Live Embed」の利用が最適です。

「Live Embed」には、縦スクロール画面横スライド画面 の表示方法があります。

  • 縦スクロール画面
    →画像を大きく見せたいときは「横スライド」
  • 横スライド画面
    →流れるように操作手順を見せたいときは「縦スクロール」

というような使い分けが可能。

実際にどのような画面になるのかは、以下のリンクから確認してみてください。

手順

1.[Live Embed]を開きます。

2.[Copy Link]をクリックすると、縦スクロール画面で操作手順が確認できるページへのリンクがコピーできます。

3.[Copy Embed Code]をクリックすると、横スライド画面で操作手順が確認できるページへのリンクを「埋め込むためのコード」がコピーできます。

以上が「Tango」の使い方でした。

Tangoの有料プランについて

本文の中でも書いたんですが、Tangoには有料の「Pro機能」があります。

もしTangoの機能をフルに使ってブラウザ以外の画面もキャプチャしたい場合は、Pro機能を使うしかありません。

フリープランProプラン
キャプチャできる範囲ブラウザ内デスクトップ全体
ワークフロー数最大25無制限
PDF の Tango 透かしありなし
共同編集権限を付与
キャプチャ中に機密情報をぼかす
料金無料月払い:$20/月
年払い:$16/月

「ブラウザ以外でもバリバリ使いたいです」って人以外は、月20ドルの有料プランはけっこう厳しいと思います。

  • そこまで頻繁に使わない
  • サブスクで月20ドルはキツい…

という方は、ステップ記録ツールを使ってみてください。

Tangoのように、赤枠で囲んだり、後で編集したりとかはできませんが、デスクトップ全体を自動でキャプチャすることは可能です。

詳しい使い方は以下の記事に書いてあるので、一度チェックしてみてくださいね。

  • この記事を書いた人
  • 最新記事

KAZU

アフィリエイト歴 13年
変態的なまでに効率化を追求しているアラフォー。
もっと 楽 で 簡単 に「仕組化」できないか? を常に考えて生きています。

<得意なこと>
・ブログの外注化
・インストラクターのSEO集客

-ツール, 作業効率化, 画像編集
-