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

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

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

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

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

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

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

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

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

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

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

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

「Tango」を起動すると、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この3つが必要です。

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

Tangoのインストール

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

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

２．［Chrome に追加］をクリックするとインストールされます。

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

１．［Sign in with Google］をクリックし、Googleアカウントでサインインします。

２．Tangoのマイページが開きます。

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

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

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

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

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

「Tango」の使い方（操作手順）

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

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

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

Tango起動（記録開始～停止）

録画開始

１．ツールバーにある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として使用する

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

手順

１．右上にある［Share & Export］をクリック。

２．メニューの［Magic Copy］を開き［Copy HTML］をクリック。

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

PDFで保存する

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

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

手順

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

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

WEB上で手順を確認する

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

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

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

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

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

手順

１．［Live Embed］を開きます。

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

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

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

Tangoの有料プランについて

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

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

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

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

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

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

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