仕事で作業マニュアルを作らなきゃいけない。画面のスクショを撮ったけど、画像に説明などを入れて加工したい。無料で良いソフトがあれば知りたい。使い方も分かりやすく解説してほしい。スポンサードサーチ主に使うソフトは2つ作業マニュアルを作るためには、大きく分けて2つの作業が必要になります。画面のスクショに、説明などを書き込んだ画像ファイルの作成1に詳しい説明をつけて、冊子やpdfなどに加工するこの記事では、1について解説します。「画像作成はいいから、すぐにマニュアルの作り方を教えてくれ」って方は、下記の記事をどうぞ。田舎フリーエンジニアのワークログWordで業務マニュアルを効率よく作成するテクニックをご紹介します。一つ覚えるだけでも、かなり作業を効率化できます。図をたくさん使って、初心者の方でも分かりやすいように解説します。この方法を使うと、ハウツー系記事の画像素材も作れます。※この記事でも使ってます。これらの作業のために、それぞれ下記のソフトを使用します。Wordそれぞれ解説します。XDadobe社が提供しているパソコン用のソフトです。本来は、webデザインやアプリのプロトタイプなどで使われるソフトですが、マニュアル画像の加工程度であれば、結構いい感じに使えます。Word続いては、皆さんご存知の文書作成ソフトWordです。マニュアル作成は、これがないと始まりません。KingsoftのWPSなど互換ソフトもありますが、圧倒的に純正(Microsoft)がおすすめです。理由は、操作方法などの情報が圧倒的に多いからです。今回の解説でも純正のWordを使います。普段使っている方も多いと思いますが、持っていない方はこの機会に購入してみては、いかがでしょうか?ExcelやPowerPointなども使えて、月額1,000円程度です。田舎フリーエンジニアのワークログOffice365とOffice2016の違いやそれぞれの特徴を解説します。購入するならどっちがお得になるのかもセットで解説します。XDを使った画像作成について、詳しく解説していきます。XDが、作業マニュアルの画像作成に向いているのか理由は2つあります。1無料で使えるこれはかなり大きいです。PhotoshopやIllustratorなどは、月2,000円ぐらいかかるので、普段使わない方にとっては、ハードルが高めです。PhotoshopやIllustratorに比べて、機能は少ないですが、シンプルがゆえに初心者でもカンタンに作業を進められます。XDの一番の強みだと思います。ぼくは今まで、Illustratorで業務マニュアル用の画像を作成していましたが、画像を何枚も貼り付けていると、だんだん動きが遅くなっていくんです。XDは、画像を何枚も貼り付けてもサクサク動きます。スポンサードサーチこの記事を読めばできること【完成イメージ】このような画像を量産できます。XDをインストールしましょう。https://www.adobe.com/jp/products/xd.html[ダウンロード]をクリックします。XDを使用するためには、adobeアカウント(無料)が必要になります。adobeアカウントを持っていない方は、このタイミングで作成してください。XDをインストールしてください。インストールが終わったら、ソフトを起動させます。下の図のような画面が出るので[Web1920]と書かれた、ブラウザっぽいアイコンをクリックします。※ここで選ぶものは、重要ではありません下の図のような画面になります。スポンサードサーチ画像ファイルを配置する続いてXDに、これから加工する画面のスクショ画像などを配置します。ちなみに、画面のスクショを取る方法は色々ありますが、ぼくはBandicamという有料のソフトを使っています。ショートカットキーを使って、バンバンスクショが取れるのでおすすめです。Windowsに標準で入っているスクショの機能は効率が悪いので。画像ファイルを、XDに直接ドラッグ&ドロップします。複数枚を一気に選んでもOKです。画像がXDに読み込まれ、自動で一列に配置されます。この作業も、Illustratorでやると画像が全部重なった状態で読み込まれるので、画像を配置し直す必要がありました。XDならめっちゃ楽です。Ctrlキーを押しながら、マウスのホイールを動かすと、画面を拡大・縮小できます。使う機会が多いので、ぜひ覚えておいてください。画像を配置できたら、配置した画像にロックをかけます。ショートカットキーを積極的に使って、作業時間を短縮していきましょう。これで画像をクリックしたり、移動したりできなくなります。この作業が必要かというと、画像をロックすることによって、画像の上に乗せた文字やアイコンなどが動かしやすくなるからです。この一手間が、作業時間の短縮につながります。必要なアイコンを作成する続いて画像の説明で使用する、アイコンを作成していきます。一度作ってしまえば、次回からはコピーして使いまわしができるので、最初だけ必要になる作業です。矢印マーク四角の枠線それぞれの作り方を解説します。文字を入れるには、左端のメニューから[テキスト]のボタンをクリックします。画面のどこでもいいので、クリックして文字を入れます。右側の[テキスト]のメニューから、フォントの種類やフォントサイズが変更できます。右側の[アピアランス]から[塗り]をクリックして、文字色も変更しましょう。これで文字ができました。矢印マークの作り方ペンツールを使って、矢印マークを作ります。左端のメニューから[ペン]をクリックします。画面上をクリックして、図のような形を作り、Escキーを押して確定させます。Shiftキーを押しながら、クリックすると直線が引けます。一度[ペン]をクリックして、今度はななめ線を引き、Escキーで確定します。ここでもShiftキーを押しながらクリックすると、45度のキレイな線が引けます。矢印の太さと、線の色を変更します。作成した矢印を、選択します。ペンツールのままになっている場合は、左端のメニューから[選択]をクリックします。[アピアランス]の[境界線]をクリックして、線の色を変えます。サイズの数値を変更して、線の太さを変えられます。角を丸くした矢印にしたい場合は、下の図のようにクリックします。最後に、出来上がった矢印をグループ化しておきます。四角の枠線は、矢印よりもかなりカンタンに作成できます。左端のメニューから[長方形]をクリックします。画面の好きな位置で、ドラックすると四角の枠線を引けます。右側の[アピアランス]で[塗り]のチェックを外します。[アピアランス]で[境界線]をクリックして、線の色を変更します。[サイズ]の数値を入力して、線の太さも変更できます。これで、3つのアイコンが作成できました。次からは、いよいよ画像にアイコンを配置していきます。アイコンや文字を配置する作成したアイコンをドラックして、画像の上に配置します。文字をダブルクリックすると、編集できるようになるので、好きな文章に打ち替えます。矢印をクリックすると、白い点が表示されるので、これをドラッグすると矢印の大きさを変えられます。四角の枠線も同様に大きさを変えられます。クリックしてほしいボタンや、説明したい箇所を強調するために使います。アイコンは、一回作成したらコピーして使い回せます。Altキーを押しながらドラッグすると、同じアイコンをコピーできます。全ての画像を編集し終わったら、画像を書き出す準備に入っていきます。画像を書き出す準備をする作成した画像を書き出すためには、書き出したい要素をひとまとまり(グループ化)にしておく必要があります。しないと、下の図のように、アイコンなどがバラバラに書き出されてしまいます。書き出したい要素をグループ化する前に、最初にかけた画像のロックを解除します。押して、全要素を選択します。ワンポイントちなみに、このショートカットキーは「全部を選択する」という効果があるもので、XDに限らずさまざまなソフトで使えます。覚えておいてください。これによって、一度全部の要素にロックがかかりますが、2回目の入力でロックが解除されます。これで、画像にかかったロックを一括で解除できました。次に、書き出したい要素を選んで、グループ化します。それぞれの画像をグループ化できたら、いよいよ画像を書き出します。【これで完成】画像をまとめて書き出すここまでくれば、あとはカンタンに画像を書き出せます。ショートカットキーが使えます。[書き出し]のダイアログが表示されます。設定は必要ありませんが、保存場所を変えたい場合は、下の図のように[書き出し先]の設定を変更します。[書き出し]ボタンをクリックすると、画像が一括で書き出されます。ファイル形式をJPGで保存したい場合は[形式]から[JPG]を選択します。[JPG]は画質の調整ができるので、Webサイトなどで画像を使用するときは、画質を落としてファイルを軽くしてあげるのがおすすめです。まとめここまで、adobeXDを使って、マニュアル用の画像を作成する方法をご紹介しました。無料で使えるのに、高性能で、やりたいことは一通りできるので、入れておいて損はないです。今回のポイントをまとめます。XDで作るのが圧倒的におすすめアイコンは、一度作っておけばコピーして使いまわしができる書き出したい要素を、ひとまとまり(グループ化)にしておくWebなどで使う場合は、形式をJPGにして画質を落とすとよい画像の用意ができたら、Wordでマニュアルを作成していきましょう!下の記事でポイントを解説していますので、画像の用意ができた方は、参考にしてみてください。田舎フリーエンジニアのワークログWordで業務マニュアルを効率よく作成するテクニックをご紹介します。一つ覚えるだけでも、かなり作業を効率化できます。図をたくさん使って、初心者の方でも分かりやすいように解説します。田舎で暮らしながらパソコンを修理したり、エクセルの使い方を教えたりしています。最近はWeb制作やプログラミングに興味を持ち、本業にすべく武者修行中です。基本的にひきこもって作業することが好き。XDで作業マニュアルを作る方法このブログについて秋田でITのお仕事をしています。マイクロソフト製品の扱いが得意です。プログラミングやITの技術など、学んだことを書き記していきます。