ブラウザ上の操作手順を自動作成！手順通りに操作するだけで手順資料を作れる、拡張機能「Tango」のご紹介
操作手順資料を作成する時、スクリーンショットを撮って、パワーポイントやイラストレーターを使用して画像に書き込みをして・・・と少し面倒ですよね。
今回は、そんな操作手順書を作成するのにとても便利な「Tango」をご紹介します。
「Tango」とは
Tangoは、操作手順通りに操作するだけで自動的に操作手順書を作成してくれるGoogle Chromeの拡張機能です。
具体的には、下記項目において、すべて自動で生成されます。
- 画像のスクリーンショット
- 画像のトリミング
- クリックする箇所のハイライト
- 操作手順のナンバリング
- 簡単な操作内容（現状はすべて英語）
また、自動で生成された内容も、あとから自由に編集ができます。
無料版ではブラウザ上での操作のみ使用できますが、ブラウザ上だけであっても大変ありがたい機能です。
Tangoの導入方法
拡張機能を追加
拡張機能はこちらから追加することが可能です。
追加すると、ブラウザ画面右上の拡張機能ボタンの中に集約されます。
この拡張機能をよく使用する場合は、ピンマークをクリックして固定しましょう。固定すると、拡張機能マークの横にTango のアイコンが追加されます。
アカウント登録
Tangoではアカウント登録が必要です。
Googleでログインするか、名前・メールアドレス・パスワードを入力して新規登録をします。
操作手順書の作成方法
今回は、Tangoを使って、Googleスライドのページのサイズを変更する方法を説明した手順資料を作成してみようと思います。
1. 操作開始ページを開き、拡張機能Tangoのアイコンをクリック
まずは、ブラウザ上に操作を開始するページを表示させます。
その後、画面右上にあるTangoの拡張機能アイコンをクリックします。
すると、下記のようなウィンドウが表示されます。
2. Tangoをスタートし、説明したい手順通りに操作をする
ウィンドウの真ん中にある、CAPTURE WORKFLOWと書かれた丸い表示をクリックすると、見ていたブラウザが2つに割れ、Tangoのワークフロー作成がスタートいたします。
↑画面が二つに割れた図
あとは説明したい手順通りに操作するだけです。
操作するごとに、割れた画面の左側にフロー（操作手順）がメモされていきます。
操作が完了した場合は、緑色の「チェック」マークをクリックすると、操作手順書の完成です。
自動生成されたワークフローを確認・修正する
ワークフローを確認すると、不要な手順が入っていたり、画像の修正が必要だったりする場合があるかと思います。
また、自動生成されたワークフローはすべて英語なので、必要であれば日本語に書き換えます。
不要なフローを削除する場合
不要なフローにマウスカーソルをあてると、右側にゴミ箱マークが表示されますのでゴミ箱マークをクリックし、さらに「Delete」をクリックします。
テキストを修正する場合
下記のテキストを修正することができます。
- ワークフローのタイトル
- 各フローの手順名
- 必要であれば、詳細な手順を記載
修正の仕方は簡単です。修正したいテキストをクリックすると、テキスト入力が可能になります。
また、詳細な手順を記載したい場合は、各フローの手順名をクリックすると、入力エリアが現れます。
画像を編集する場合
ハイライト部分の追加が必要だったり、ハイライトしたい部分が見えていなかったりする場合があります。
そういった場合も自由に修正が可能です。
まず、編集したい画像の上にマウスカーソルをあてると、左下にメニューが出てきますので、メニューの中の真ん中にある鉛筆ボタン「Edit Screenshot」をクリックします。
すると、画像の編集画面が開き、四角や丸などの造形・矢印の追加や、テキストの入力、フリーハンドの入力が可能になります。また、トリミングしたり、モザイクをかけたりすることも可能です。
↑編集例
画像編集すると、画像が「引き」の状態で表示されますが、その場合はズームすると、見やすくなります。
画像は、手順の中で必要なければ「削除」もできます。
また、Alt設定も可能です。
ワークフローを保存する
すべての編集が完了したら、ワークフローを保存します。
画面右上にある「Save Workflow」をクリックします。
保存後のデータ共有・エクスポート方法
Tangoでは、下記6つのデータ共有・エクスポート方法があります。
- メールで招待
- HTMLをコピー
- Markdownをコピー
- PDFをダウンロード
- リンクをコピー
- 埋め込みコードをコピー
用途に合わせて、データの取得を行いましょう。
今回私が作成したフローは、下記リンクからご確認いただけます。
また、PDFもよろしければご覧ください。
有料版について
Tangoは、Pro機能が存在します。
Prp機能ですと、無料版のようなブラウザ上だけではなく、デスクトップ全体でスクリーンショットが可能になります。
またその他にも、ワークフローの数や、ダウンロードしたPDFに記載される「Tango」表記を透かすことができるようです。
必要に応じてはこちらを検討してみてはいかがでしょうか。
まとめ
今回はChrome拡張機能「Tango」をご紹介いたしました。
すべて英語ですが、ページを日本語に翻訳しても使うこともできますし、使ってみるととても簡単ですので、是非一度お試しください！
この記事を書いた人
- ソリューション事業部 webディレクター
- 関東の理系大学にてプロダクトデザインを学ぶ。千葉県にて百貨店社員として接客・マネジメント・商品PR、東京都にて人材紹介の営業を経験した後に、地元浜松へUターン転職。アーティス入社後はWebディレクターとして、大学・病院サイトを始め、コーポレートサイトのディレクション・企画業務に携わっている。
関連記事
最新記事
FOLLOW US
最新の情報をお届けします
- facebookでフォロー
- Twitterでフォロー
- Feedlyでフォロー