スマホ操作の画像付き手順書の作り方|PC連携で時短するコツを解説

スマホ操作の画像付き手順書の作り方|PC連携で時短するコツを解説

顧客や社内向けに、スマートフォンの操作手順書を作成したいと思ったことはありませんか?

スマホが生活の主流となった今、スマホの使い方をはじめ、サービスの申し込み方法、申請方法、アプリの操作方法などを、画像付きの手順書でわかりやすく説明したいという要望が増えています。

一方で、スマホ用の手順書を作成するために、

  • スクリーンショットを撮る
  • それをGoogle フォトやDropboxなどで PC と共有する
  • Word や Excel に貼り付ける
  • 画像をトリミングする
  • タップの場所を赤枠で囲む

これらの作業は、想像以上に手間も時間もかかります。

そこで今回は、スマホ操作の手順書を作る代表的な4つの方法を紹介し、その中から Windows 標準アプリの「スマートフォン連携」 と「手順書作成ツール」を使用して、画像取得の手間を半分以下に減らす方法を解説します。

※ 本記事では Windows PC と Android スマートフォンの組み合わせを対象にしています。スマートフォンの種類や OS のバージョンによって、正しく動作しないこともあります。詳しくは Microsoft の公式ページをご確認いただくか、実際に動作するか検証してみてください。

スマホ操作の画像付き手順書を作成する4つの方法

スマホの操作手順を画像付きで説明する方法は、大きく分けると4つあります。それぞれ手軽さや作りやすさが違うため、手順の多さや更新の頻度、手順の内容などによって選択してみてください。

1. スマホでスクリーンショットを撮影する

もっとも一般的なのは、スマホでスクリーンショットを撮り、それを PC にメールで送るか、Google フォトやDropboxなどで共有してから Word や Excel に貼り付ける方法です。追加のツールがなくても始めやすく、少ない手順であれば実用的です。

一方で、手順が増えると、画像の貼り付け、トリミング、注釈の追加といった手作業が増えます。かんたんに始められる反面、更新や修正のたびに手間が発生しやすい方法です。

2. スマホの画面を録画する

スマホの画面録画を使えば、操作の流れをそのまま残せます。スワイプや画面遷移までを見せたい場合や、手順が少ない場合には早くて便利です。

ただし、動画は見返したい箇所を探しにくいため、マニュアルや手順書として社内や顧客に公開する場合はやや不向きです。動画から静止画を切り出して手順書にすることもできますが、編集作業が必要になります。

3.「スマートフォン連携」で スクリーンショットを撮影する

スマートフォン連携で PC に映したスマホ画面を Snipping Tool で撮影

Windows の標準アプリ「スマートフォン連携」で PC 上にスマホ画面を表示し、Snipping Tool 等でスクリーンショットを撮る方法です。スマホでスクリーンショットを撮って転送するという手間が減るため、これだけでも時短になります。

4.【おすすめ】「スマートフォン連携」+ 「手順書作成ツール」を利用する

上記の「3」に加え、手順書作成ツールを併用することで、画像取得から編集、差し替えまでを一気通貫で進めることができ、作業時間を大幅に減らすことができます。手順が多い場合や、UI の変更により更新頻度が高い場合には手順書作成ツールの併用がおすすめです。

本記事では、もっとも効率よく作れる「4」 を解説していきます。次の章で、まずは必要な2つのツールを準備しましょう。

そもそも手順書の作り方は?という方は、わかりやすい手順書の作り方を6ステップで解説 も参考にしてみてください。

準備:「スマートフォン連携」と「手順書作成ツール」を用意する

使用するツールは、「スマートフォン連携」と、「手順書作成ツール」の Folge(フォルゲ)、この2つだけです。どちらも数分で準備できます。

準備1:「スマートフォン連携」でスマホ画面を PC に映す

スマートフォン連携

まず初めに、「スマートフォン連携」とお持ちのスマートフォンを接続します。アプリは標準機能であるため、検索から「スマートフォン連携」と入力すれば見つかります。

もし、初期設定の方法を詳しく知りたいという方は、こちら「スマートフォン連携とスマホの初期設定方法」をクリックしてください。手順書がご覧いただけます。

「スマートフォン連携」を使うと、スマホの画面を PC 上に表示できます。スマホ本体だけで操作するのではなく、PC で画面を見ながらスクリーンショットを撮れるため、「スマホでスクリーンショットを撮ってから PC へ送る」という転送の手間がなくなります。

準備2:Folge を無料ダウンロードする

Folge(フォルゲ)は、PC に表示した画面をクリックごとに自動記録してくれる手順書作成ツールです。スクリーンショットの取得から編集、出力までを一気通貫で進められます。

次の章で、具体的な流れを解説していきますので、PC から Folge の公式ページ に行き、Folgeを無料でダウンロードしてみてください。わずか1分、メアドも登録も不要でダウンロードできるので、すぐに試せます。

Folge でスマホ操作の手順書を作成する流れ

Folge は PC 専用の手順書作成ツールです。PC 上に表示したスマホ画面を利用することで、スマホアプリやブラウザ操作、設定方法などの画像付き手順書を、誰でもかんたんに、短時間で作成できます。

STEP1

スマホ画面の PC 表示

まずは「スマートフォン連携」を使い、スマホ画面を PC 上に表示します。手順書にしたい操作を PC で見られる状態にします。

STEP2

記録範囲の指定

次に Folge を起動し、「マニュアル作成」→「スクリーンショットを撮る」をクリックしてください。複数画面を利用している場合は、「記録する画面をクリックしてください」と表示されるので、スマホ画面が映っているモニターをクリックします。

次に、「記録モード」で3つの選択肢が出てきますので、「選択した範囲」をクリックし、スマホ画面が表示されている範囲を指定します。これにより、余計なデスクトップ部分を含めず、毎回スクショの範囲を指定する必要がなくなるため大幅な時短になります。(記録モードで、「アクティブウィンドウ」を選択してもOKです)

STEP3

PC 上のスマホ画面の操作・記録

記録を開始したら、PC 上に表示されたスマホ画面を、マウスでクリックして操作していきます。ボタンを押す、入力欄を選ぶ、写真をアップロードするなど、実際の流れに沿って進めます。

Folge は、PC 上のスマホ画面をクリックするごとに上の画像のように、
・ステップとしてスクショが自動で記録される。
・クリックした場所にポインターと円マークが自動で付与される。
そのため、操作はスマホ側ではなく、 PC のマウスで行ってください。

ひととおり操作を終えたら、Folge の「記録の終了」をクリックします。

STEP4

記録されたスクリーンショットの確認

続いて、取得されたスクリーンショットやステップを確認します。抜けている画面がないか、順番が自然かをここで見直します。(下写真、左側赤枠内が一覧)

STEP5

説明文の調整

Folge は通常、クリックした箇所の文章を読み取りますが、スマートフォン連携の画面内の文字は読み取れません。したがって、「◯◯をタップ」のように、◯◯を書き直します。デフォルトの設定で「◯◯をタップ」にしておけば毎回「をタップ」を入力する手間が省けます。(下画像の右側赤枠内)

STEP6

赤枠・矢印・ぼかしの追加

Folge はクリックした場所に円形の図とポインターが自動で入りますが、編集画面で、操作箇所を示す赤枠や矢印を追加できます。また、個人情報や機密情報が映っている場合は、ぼかし機能で保護します。

STEP7

PDF・Word・HTML への出力

仕上がった手順書は、利用者の用途に合わせて PDF、Word、HTML、Markdown、WordPress、Notion などのフォーマットで共有することができます。(無料版は PDF と GIF 出力のみ。ConfluenceとHuduはビジネスライセンスのみ)

スマホ操作を手順書にするときの注意点

スマホの操作手順を手順書にするときは、作りやすさだけでなく、事前確認や情報の扱いにも気を配る必要があります。

スマホ画面を PC に映せるかの事前確認

まず確認したいのは、対象となるスマホ画面を PC に表示できるかどうかです。「スマートフォン連携」の利用可否や、端末・OS の組み合わせによって表示できる範囲は変わることがあります。

作り始めてから「この画面は表示できなかった」とならないよう、事前に一通り確認しておくと安心です。

画面表示や記録が制限されるアプリ

アプリによっては、セキュリティ上の理由で画面表示やスクリーンショット取得が制限される場合があります。特に、金融系や本人確認系のアプリでは起こりやすいです。

また、ブラウザのシークレットモードや、著作権・プライバシー保護のかかった画面では、スクリーンショットの取得自体が許可されていないため、PC に表示したスマホ画面が黒くなり記録できないことがあります。

手順書にしたい対象がある場合は、実際にその画面が PC 上で表示されるか確認してから進めるのがおすすめです。

個人情報・機密情報のぼかし

手順書に使う画像には、氏名、メールアドレス、金額、通知内容などが映り込むことがあります。公開用・配布用の資料では、こうした情報をそのまま残さないよう注意が必要です。

ダミーデータを使うか、ぼかしを入れるかを事前に決めておくと、あとで慌てずに済みます。

スマホで操作する人目線の説明文

PC 上で作業していると、説明文も PC 目線になりがちです。しかし、実際に手順書を見る人はスマホで操作します。説明文は「クリック」ではなく「タップ」、「入力して送信」ではなく「『送信する』をタップ」のように、相手の操作に合わせて整えた方が伝わりやすくなります

よくある質問

最後に、スマホ操作の手順書づくりでよくある質問をまとめます。

スマホだけで手順書を作成できますか?

簡単な案内であれば可能です。ただし、画像の整理や編集、差し替えまで考えると、PC を使った方が作業しやすい場面が多くなります。今回は、スマホ画面を PC に表示して手順書を作る方法を前提にしています。

画面録画と画像付き手順書はどちらがよいですか?

スワイプや画面の切り替えなど、動きの流れそのものを見せたい場合は画面録画が便利です。一方で、受け手が必要な手順だけを素早く見返したい場合は、画像付き手順書の方が確認しやすくなります。申し込み、登録、アップロードのような操作は、画像付き手順書の方が向いていることが多いです。

Folge はスマホ対応の手順書作成ツールですか?

スマホアプリとして動くツールではありません。Folge は PC 用の手順書作成ツールです。スマホ画面を PC に表示し、その画面を使って手順書化する、という使い方になります。

iPhone でもスマホ画面の手順書を作成できますか?

Windows 標準のスマートフォン連携では、iPhone の画面を PC に映すことはできません。Mac と iPhone の組み合わせであれば、Apple の iPhoneミラーリング や AirPlay を使って iPhone 画面を Mac に表示できる場合があります。しかし、iPhone 画面を Mac に映して Folge で記録するという流れは動作確認を行っていないため、本記事では Windows PC と Android スマートフォンを対象にしています。iPhone や Mac 環境で利用したい場合は、Folge をダウンロードして、ご自身の環境でお試しください(登録不要の無料版をお試しいただけます)。

スマホアプリやブラウザの操作も記録できますか?

PC に表示できる範囲であれば、どちらも手順書化できます。アプリの初期設定・通知設定・ログイン方法はもちろん、ブラウザでの申し込み・会員登録・写真アップロードなども記録できます。

Folge の無料版を仕事で使えますか?

お試しとして使う分には、無料版で問題ありません。ただし、業務での配布や顧客への提供といった商用利用には、有料ライセンスが必要です。ライセンスは買い切りで、パーソナルが¥14,800(税込)、ビジネスが1席あたり¥24,800(税込)です。まずは無料版で使い勝手を確かめてから、業務で使う場合に購入を検討するとよいでしょう。

まとめ

スマホの操作手順を画像付きでわかりやすく説明するという需要は年々増加しています。スクリーンショットを使った手作業でも手順書は作れますが、画像や動画の転送、注釈追加、UI 変更時の差し替えまで含めると、思った以上に時間がかかります。

Windows 標準アプリの「スマートフォン連携」を使えば、スマホ画面を PC 上に表示できます。そこから PC でスクリーンショットを撮り、Word や Excel にまとめるだけでも、従来より作りやすくなります。

さらに、編集や差し替えまで含めて効率よく進めたい場合は、Folge のような専用ツールが便利です。スマホアプリやスマホブラウザの操作を、画像付きで分かりやすくまとめたいときは、ぜひ一度試してみてください。

Folge は、名前やメールアドレス等の登録は一切不要で、気軽に無料版を試せます。公式サイトは https://jp.folge.me です。

マニュアル・手順書作成ツール|Folge(フォルゲ)

上部へスクロール