図の作成・調整

図は，文章だけでは伝わりにくい構造，関係，手順を示すために使います．そのため，図を作るときは，最初に「何を伝える図か」を決めます．次に，その図をどこで使うかを考えます．WEB ページ，Word 文書，PowerPoint，LaTeX では，適した画像形式が少しずつ異なるからです．

原則は単純です．模式図，回路図，フローチャート，グラフのように線や文字で構成される図は，できるだけベクター形式で保存します．写真，スキャン画像，画面キャプチャのように細かな色の変化を持つ画像は，ラスター形式で保存します．この使い分けを守るだけで，拡大しても読みやすい文書になります．

ラスター図とベクター図

画像形式は，大きくラスター図とベクター図に分けられます．図1に示す通り，ラスター図は小さな点の集まり．ベクター図は線，曲線，文字，塗りつぶしなどの命令で図を表します．その特徴は表1の通りです．「ラスター図とベクター図」に，より詳しい説明があります．

ラスター図とベクター図の違い

種類	特徴	代表的な形式
ラスター図	画素の集まりで表現する形式です．写真や画面キャプチャに向いています．拡大すると輪郭や文字がぼけるため，必要な解像度で保存します．	PNG, JPEG, BMP, TIFF
ベクター図	線や図形の命令で表現する形式です．模式図，グラフ，ロゴ，文字を含む図に向いています．拡大しても線や文字が比較的きれいに表示されます．	SVG, PDF, EPS, PS, EMF, WMF

BMP と PNG は，どちらもラスター画像を扱う形式です．同じ画素数と色深度で可逆に保存するなら，保持できる画像情報はほぼ同じです．ただし，BMP は非圧縮で保存されることが多いため，PNG よりファイルサイズが大きくなりがちです．一方，PNG は可逆圧縮なので，画質を落とさずにファイルサイズを小さくできます．そのため，通常の文書や WEB ページでは，BMP を使う意味はほとんどなく，線画や文字を含む画面キャプチャには PNG，写真には JPEG を使うのが実用的です．

図の形式の選び方

図の形式は，図の内容と利用先で決めます．まず，元の図がラスター図かベクター図かを判断します．次に，その図を WEB ページ，Office 文書，LaTeX 文書のどれで使うかを決めます．

迷ったときは，元データを必ず残します．作図ソフトの編集用図ファイルを残しておけば，あとから用途に合わせて SVG，PDF，PNG などを書き出せます．最終的な配布形式だけを残すと，修正や再利用が難しくなります．

用途別の推奨形式を表にまとめます．ここでの推奨は，きれいに表示できること，後で修正しやすいこと，ファイルサイズが過度に大きくならないことを重視しています．

用途別の推奨フォーマット

用途	ベクター図	ラスター図
WEB ページ	SVG	PNG, JPEG
Microsoft Office	EMF, SVG	PNG, JPEG
LaTeX	PDF, EPS	PNG, JPEG

WEB ページ

WEB ページでは，ベクター図には SVG を使うのが基本です．SVG はブラウザーでそのまま表示でき，線や文字がきれいに拡大されます．ただし，SVG の中に細かな写真を埋め込むとファイルが大きくなるため，写真は JPEG，画面キャプチャや線画のラスター画像は PNG にします．

図を HTML に挿入するときは，画像の代替文字列とキャプションを付けます．このサイトでは，図番号とキャプションを付けるために PHP の Figure クラスを使っています．詳しい書き方は，WEB ページ作成基準の「図の挿入」に従います．

Microsoft Office

Microsoft Office で線画やグラフを扱う場合は，ベクター形式を優先します．Windows 版 Office で互換性を重視する場合は EMF が扱いやすいです．一方，新しい Microsoft 365 や Office 2019 以降では SVG も利用できます．共同作業や提出先の Office のバージョンが分からない場合は，表示崩れがないか PDF にして確認します．

写真や画面キャプチャは PNG または JPEG を使います．Word や PowerPoint にスクリーンショットを貼り付けるだけで済ませると，解像度や圧縮の影響で文字が読みにくくなることがあります．必要であれば，元の画像ファイルを別に保存し，文書にはそのファイルを挿入します．

LaTeX

LaTeX では，PDF を使うとベクター図をきれいに扱えます．古い作業環境や PostScript 系の処理では EPS を使うこともありますが，現在の一般的な PDF 出力では PDF 形式が扱いやすいです．写真や画面キャプチャは PNG または JPEG を使います．

LaTeX で使う図は，本文とは別ファイルとして管理することが多いです．論文やレポートでは，同じ図を修正して再出力することが多いため，作図ソフトの元データと，LaTeX に挿入する PDF などの出力ファイルを分けて保存します．

模式図や説明図を作る場合は，ベクター図を扱えるアプリケーションを使います．このページでは，次の使い分けを勧めます．

アプリケーション	使いどころ
Inkscape	無料で使えるベクター画像編集ソフトです．SVG を標準形式として扱えるため，WEB ページ用の図や説明図の作成に向いています．
Microsoft Visio	フローチャート，ネットワーク図，構成図など，業務文書向けの図を整えて作るときに便利です．有償ソフトなので，利用できる環境では有力な選択肢です．
PowerPoint / Excel	Office 文書の中で完結する図やグラフを作るときに便利です．他の環境で再利用する可能性がある場合は，元データと書き出した画像ファイルを別に保存します．
IrfanView などの画像ビューアー	ラスター画像の確認，切り抜き，形式変換に使います．ベクター図の作成には向きませんが，PNG や JPEG の調整には便利です．

一番のお勧めは Inkscape です．無料で利用でき，SVG をそのまま編集できます．WEB ページの図，講義資料の模式図，簡単なロゴや説明図を作る用途では十分な機能があります．Office 文書の作成が中心で，図も Office 文書の中で完結する場合は，PowerPoint や Visio で作る方が速いこともあります．

拡大縮小に耐える図にする

図は，作成したときの大きさだけでなく，閲覧者が拡大したときの見え方も確認します．PDF で配布する文書や WEB ページでは，読み手が図を拡大することがあります．線画や文字を含む図がラスター画像になっていると，拡大時にぼけて読みにくくなります．

図の中の文字は小さくしすぎないようにします．本文に入れた状態で読めること，さらに拡大しても文字と線が崩れないことを確認します．グラフでは，軸ラベル，凡例，単位が読めることが重要です．

ファイル名と元データを残す

図は，編集用の元データと，文書に挿入する出力ファイルを分けて保存します．例えば，Inkscape の編集用ファイルは SVG として残し，LaTeX 用には PDF，WEB 用には SVG，必要に応じて PNG を書き出します．

ファイル名は，内容が分かる名前にします．「fig1.png」のような番号だけの名前は，図が増えると管理しにくくなります．このページの図のように，raster_vector.svg や format_flow.svg のような名前にすると，後で探しやすくなります．

Office 文書から図を取り出す

Office 文書に貼り付けられた図を取り出す場合は，可能であれば元の作図ファイルから書き出します．元データがない場合は，.docx，.xlsx，.pptx の拡張子を .zip に変更して展開し，内部の media フォルダーを確認します．

コピーアンドペーストやスクリーンショットによる取り出しは，画質が落ちたり，元がベクター図でもラスター画像になったりすることがあります．最後の手段として使い，重要な図では必ず拡大表示して確認します．

このページは，図を扱うときの全体方針です．具体的な操作やアプリケーション別のメモは，次のページに分けます．

• Microsoft Office: Word，Excel，PowerPoint で図を扱うときの注意点と，Office 文書から図を取り出す方法をまとめます．
• Inkscape: Inkscape を使ったベクター図の作成と，SVG などへの書き出し方法をまとめます．
• WEB ページ作成基準: 図の挿入: このサイトで図番号，キャプション，Lightbox を使って図を挿入する方法です．

参考資料

更新履歴