マルチメディアⅠ （担当：降旗）

2022 年 4 月 19 日

第 2 回 ラスター画像の編集（1）

今回からの数回はラスター画像の編集について取り上げます．5204 教室ならば（少し古いバージョンとはいえ）
Photoshop を使用して実習を行うことができますが，レインボールームでの開講ですし，自宅でも作業ができるよう
Photopea を取り上げて実習を行うことにします．なお，本日の実習は Zoom や Teams の背景画像を作成すること
を念頭に置いています．

1．ラスター画像
ラスター画像（raster graphics）は Bitmap 方式とも呼ばれ，私たちが普段最も目にする画像形式です．Web ペ
ージや SNS で目にする画像，スマートフォンで撮影した写真など，これらのほとんどがラスター画像です．
ラスター画像は，図 1 に示したように，格子状に並んだ画素（pixel）が何色かと定義されたデータで，非常にシ
ンプルな構造になっています．図 1 中の関数 f はディスプレイでは輝度値，モノクロのプリンタでは濃淡値を表
現しています．画像を構成する最小単位である画素が小さいほど精密な画像となります．解像度は 1 インチ当た
りの画素数 dpi （dot per inch）で定義されています．

出所：情報メディア入門，実教出版，2006．

図 1．ラスター画像のイメージ

例えば，Windows の「設定」，「システム」，「ディスプレイ」で見ることができる図 2 のディスプレイの解像度は，フ

ル HD と呼ばれる最近の PC ではよく見かける解像度の例です．皆さんが使っているノート型 PC の 14 インチ型
液晶ディスプレイですと，サイズが 310.9mm×174.9mm ですから 1 インチが約 2.54cm なので，1366×768 の解
像度で約 112dpi，1920×1080 で約 157dpi となります．ディスプレイの大きさは同じですから，解像度をあげると文
字等が約 29%縮小されて表示されているということになります．

図 2．ディスプレイの解像度の例

1
マルチメディアⅠ （担当：降旗）

上記のとおりに，ディスプレイは解像度を変更することができます．ラスター画像は，ディスプレイ表示上，拡大
縮小されて表示されますが，元のデータは図 1 のように整列した形式になっています．
例えば，Windows 付属の「ペイント」という作図ツールで，あるラスター画像を開いて表示させてみます．図 3 は，
著作権上，あたりさわりがないところで，高千穂大学経営学部紹介 Web ページのトップ画像を「マルチメディアⅠ
第 02 回 manage_top.jpg」というファイル名として保存してからペイントで開いたものです．

図 3．高千穂大学経営学部紹介 Web ページのトップ画像

「ファイル」メニューから「プロパティ」を選択すると，図 4 のダイアログボックスが開きます．800×300 ピクセルの

画像で，解像度が 72dpi であることがわかります．
次に図 1 のようなイメージを確認するため，図 3 に示したペイントにおいて「表示」リボンの「拡大」ボタンを何回
もクリックして大きく拡大してみましょう．図 5 は図 3 左上の白板に書かれた文字列部分を示したものです．図 3 で
は文字列が書いてあることを肉眼で識別できますが，図 5 では，格子状にグレースケールで色がついているだけ
で文字列とは認識できません．画素単位に色がつけられていることがわかります．文字列がないところは同じ色で
綺麗に整列していることがわかります．この色の画素への付け方によってラスター画像のファイルサイズが変わっ
てきます．
画素の色はカラーモデルによって規定されます．中でも RGB モデルは，その代表です．赤（Red），緑（Green），
青（Blue）が光の 3 原色と呼ばれ，人間の視覚は，この 3 色の光の混同色（加法混色）を新たな色として認識でき
るようになっています．人間が識別可能な色の数は約 750 万色といわれています．RGB モデルは，3 原色に 256
段階のレベルを持たせた 16,777,216 色（2563）の色相（基本的な色の種別），明度（色の明るさ），彩度（色の鮮や
かさ）の異なる表現をいい，人間の識別可能な色をはるかに超えた色数を取り扱うことができます．なぜ 256 段階
になっているかというと，1 色に 1 バイトを割り振っているからです．1 バイトは 8 ビットですから，8 ビットは 28 で 256

2
マルチメディアⅠ （担当：降旗）

となります．

図 4．イメージのプロパティ

図 5．図 3 の拡大画像（一部）

今，図 3 の画像を表示させていますので，ペイントで確認してみましょう．「ホーム」リボンの「色の編集」をクリッ
クします．図 6 のダイアログボックスが開きます．ダイアログボックス右下の「赤（R）」「緑（G）」「青（B）」が RGB の
256 段階の数値を表しています．256 段階なので，0～255 の値をとります．
図 6 では，すべて 0 となっていますが，これが純粋な「黒」です．すべて 255 とすれば「白」となります．つまり最
小値が黒，最大値が白ということになり，その他の色は，この間の値をとります．例えば，純粋な「赤」は R=255，
G=0，B=0 です．純粋な「緑」は R=0，G=255，B=0 です．純粋な「青」は R=0，G=0，B=255 です．純粋な「黄」は
R=255，G=255，B=0 となります．純粋な「紫」は R=255，G=0，B=255，「シアン」は R=0，G=255，B=255 となりま
す．
「色合い」「鮮やかさ」「明るさ」は色相，彩度，明度に対応します．ペイントでは 0～240 の範囲で指定するように

3
マルチメディアⅠ （担当：降旗）

なっています．RGB の値を変えてみて色がどのようになるか確認してみてください．

図 6．色の編集

さて，ラスター画像をファイルに保存するのには，いくつかの形式があります．代表的な形式をあげると次のよう
になります．
 BMP（Bit Map File）
Windows のグラフィックスアプリケーション，ワープロ，表計算，データベースなど様々なアプリケーションで
取り扱うことができる．拡張子は bmp．
 TIFF（Tag Image File Format）
アプリケーション間でのデータ交換用ファイルフォーマットで，グラフィックスや DTP ソフトのアプリケーション
で取り扱える．拡張子は tif または tiff．
 PNG（Portable Network Graphics）
カラーテーブルを使い 256 色のインデックスカラーを使用した GIF（Graphics Interchange Format）に対して，
ネットワーク経由での使用を想定した機能や透過処理など多くの機能をサポート．拡張子は png．
 JPEG（Joint Photographics Experts Group）
人の目に感じにくい要素を適度に省略する高い圧縮率を持つ．拡張子は jpg．

ペイントで先のファイルを，それぞれの画像形式で保存してみるとわかりますが，PNG と JPEG のファイルサイズ

が小さくなります．見た目も遜色ないというか肉眼では見分けがつきません．PNG と JPEG は綺麗な画質のままフ
ァイルサイズが小さくなるので，Web 上の画像は，ほぼこれら 2 つの画像形式となっています．事実上の標準とな
っています．

4
マルチメディアⅠ （担当：降旗）

図 3 の画像は JPEG 形式です．その他の画像形式で保存し，見た目の画質，および，ファイルサイズを比較し

てみてください．

2．ラスター画像の作成および編集
先に取り上げたペイントは，いわゆる「お絵かきソフト」です．「ツール」のペンやブラシを使って任意の絵を描く
ことができます．同時にデジタルカメラで撮影した写真の画像データも図 3 のように読み書きができます．文字を
入れたり，画像の一部分を切り取って他に使ったり，編集も行うことができます．簡単な画像作成・編集ならば，こ
のツールで十分でしょう．
しかし，世の中には，もっと高度な画像作成や編集が要求される場面が多々あります．例えば，アニメの作成，
広告等のポスターの作成，カタログなどの高度な編集などなどです．これらは，当然，その分野の専門家が制作
を担っています．こうした専門家がよく使用するツールが Photoshop になります．
Photoshop は商用アプリケーションですので，当然のことながら購入しないと使えません（サブスクリプションの契
約をしないと使えません）．5204 教室の PC には（CS3 というやや古いバージョンですが）インストールされており，
使用することができます．
この授業では Photoshop 以外のツールを使用します．Photoshop と同等の機能を持っていて，なおかつ無料で
使用できるフリーソフトウェアとして GIMP（ギンプ）があります．GIMP は GNU Image Manipulation Program の略
であり，GNU プロジェクトというフリーソフトウェアを教育研究用に開発する世界的プロジェクトの中で開発されたも
ので，当初は UNIX 上の X-Window System 用に開発されましたが，現在は，Windows 版や Mac 版もあり，マル
チプラットフォームなアプリケーションになっています．PC 上のすべての画像ファイルの編集に使用することがで
き，これだけあれば足りるといわれています．皆さんには，このアプリケーションの利用を勧めます．
GIMP はホームページ
https://www.gimp.org/
から入手することができます．インストールの仕方や使用法は，
https://gazocustomize.com/gimp/
などを参照するとよいでしょう．インストール後，起動すれば，図 7 のようなウィンドウが表示されます．この授業で
は GIMP は紹介にとどめ，次節にて紹介するツールを使用して実習を行ってみようと思います．

3．Photopea によるラスター画像の編集
Photopea は，Photoshop とほぼ同じインターフェースを持っており，Photoshop のユーザならばすぐに使うことが
できます．また，ブラウザさえあれば使用できるので，インストール作業を行う必要がありません．しかも広告によっ
て成立しているサービスなので，無料で使用することができます．Photopea は次のサイトへアクセスして使用しま
す．
https://www.photopea.com/

Photopea を起動すると，図 8 の画面がブラウザ内に表示されます．

5
マルチメディアⅠ （担当：降旗）

図 7．GIMP の起動画面

図 8．Photopea の起動画面

基本的な操作は，

https://freesoft-concierge.com/document/photopea/

などにわかりやすく説明されています．
一昨年 2020 年 9 月 28 日に出校した際，ちょうど雲一つない青空でしたので，キャンパス内の写真を撮ってお

6
マルチメディアⅠ （担当：降旗）

きました．5 つのファイルを Classroom にアップロードしてありますので，これらをダウンロードしてください．そして，

Photopea で開いてみてください．

4．画像の明るさの調整
Photopea を起動し，Classroom にて提供した高千穂大学キャンパスの写真データの中で，「マルチメディアⅠ第
02 回 20200928_095103.jpg」を開いてください．

図 9．Photopea で「マルチメディアⅠ第 02 回 20200928_095103.jpg」を表示

図 9 のように表示されるはずです．高千穂大学正門から入ってセントラルスクェアを臨んだ写真となっています．
雲一つない青空の下，太陽に照らされたセントラルスクェアと日陰になっている木陰が映し出されています．この
ように，この画像には明るい部分と暗い部分が左右に分かれて映し出されていますが，木の色合いがもっとはっき
り見えるように調整してみたいと思います．
「イメージ」メニューから「調整」サブメニュー内の「明るいさ／コントラスト」を選択します．「プレビュー」が☑にな
っていることを確認して，まず「明るさ」のスライダーを動かして調整します．そして，次に「コントラスト」のスライダー
を動かして，明るさにあったコントラストに調整します．
図 10 は「明るさ」を「+80」として基の画像より明るくし，そして明るすぎて，ぼやけてしまった部分を補うために，
「コントラスト」を「-90」にした例です．
明るさ／コントラストは画像の明るい部分と暗い部分の差で画像のメリハリをつける最も簡単な方法です．
図 10 のダイアログボックスにおいて「OK」ボタンをクリックすれば，調整が適用されますし，「Reset」ボタンをクリ
ックすれば，基に戻ります．いろいろと調整してみてください．

7
マルチメディアⅠ （担当：降旗）

図 10．明るさ／コントラストの調整

5．ヒストグラムによる色調補正
ヒストグラムは画像の色や明るさの状態を表したグラフです．ヒストグラムを使うと，補正したい画像の特徴が一
目でわかります．明暗や色調などの詳細な調整を行うことができます．
「イメージ」メニューから「調整」サブメニュー内の「レベル」を選択します．図 11 のように「レベル」のダイアログボ
ックスが表示されます．

入力レベルのスライダー

出力レベルのスライダー

図 11．レベルによる色調補正

8
マルチメディアⅠ （担当：降旗）

画像は色のついた画素が格子状にならんでいるわけですが，図 11 のヒストグラムは画像内にあるすべての画
素を 0～255 の階調（明るさの段階）ごとにいくつあるかの度数を表したグラフです．横軸が階調を表し，縦軸はそ
の画素数を表しています．グラフの山が高いほどその部分の階調が画像内に多く含まれていることを示していま
す．一般的に，全体として暗い画像はグラフの山が左に偏り，明るい画像では右に偏ります．黒（■）や白（□）の
スライダーを動かすと，残された階調の画素は黒もしくは白に統合されます．グレー（■）の入力レベルスライダー
は指定した位置が中間調になるように調整します．左へ動かすと明るく，右へ動かすと暗くなります．また，「チャ
ンネル」からは「赤」「緑」「青」をそれぞれ選択でき，それぞれの色調に強弱をつけることもできます．いろいろと調
整してみてください．

6．曲線（トーンカーブ）による色調補正
曲線は補正前と補正後の画像のデータ値を表した線です．線の傾きや曲がりをマウスでドラッグして補正しま
す．線にゆるやかなカーブをつけることで，なめらかな補正を行うことができます．
「イメージ」メニューから「調整」サブメニュー内の「曲線」を選択します．図 12 のように「曲線」のダイアログボック
スが表示されます．

図 12．曲線による色調補正

曲線ダイアログボックスに表示されているヒストグラムは，前節のヒストグラムを表しています．横軸は入力の階調
ですが，縦軸は度数ではなく，出力の階調を表しています．左下隅から右上隅への線分は，入力から出力へ色
調補正しないデフォルトの状態を表しています．
今，マウスで線分の真ん中あたりをドラッグして，左上に移動させると，図 13(a)のようになります．階調の中間値
が全体として明るい方向へ変換されますので，画像全体がなめらかに明るくなります．
逆にマウスで線分の真ん中あたりをドラッグして，右下に移動させると，図 13(b)のようになります．階調の中間
地が全体として暗い方向へ変換されますので，画像全体がなめらかに暗くなります．

9
マルチメディアⅠ （担当：降旗）

なお，線分をドラッグすると，ポイントが曲線上に表示されますが，ポイントを除去したい場合は，「Reset」ボタン
をクリックするか，または，ポイントをグラフの外までドラッグします．

(a) 凸型 (b) 凹型
図 13．曲線におけるポイント 1 つの色調補正例

(b) S 字型 (b) 逆 S 字型
図 14．曲線におけるポイント 2 つの色調補正例

ポイントを 2 つ使用した色調補正が図 14 です．S 字型と逆 S 字型が代表的で，この補正ができる点が専用ソフ

トウェアの強みになります．S 字型は，暗部はより暗く，明部はより明るくして，コントラストを強くします．逆 S 字型
は，暗部は明るく，明部は暗くして，コントラストを弱くします．図 14 の曲線は，いろいろな画像に使えますので，
覚えておく必要があります．いろいろと調整してみてください．

7．カラーバランスによる色調補正
室内で撮影した写真は，蛍光灯の下ですと青みがかり，電球の下ですと，黄色みがかる場合があります．これ
は色温度と呼ばれる光の性質によるものです．画像全体の色味がおかしい場合は，「カラーバランス」の調整が必
要になります．

10
マルチメディアⅠ （担当：降旗）

「イメージ」メニューから「調整」サブメニュー内の「カラーバランス」を選択します．図 15 のように「カラーバランス」
のダイアログボックスが表示されます．青みがかっていれば青を弱くし，黄色みがかっていれば，緑を弱くしたりし
て調整します（現在開いている画像では不要ですが）．

図 15．カラーバランスによる色調補正

8．シャドウ／ハイライトによる色調補正
今回取り上げた画像は建物の影や木陰など暗く映っている部分が多くあります．「イメージ」メニューから「調整」
サブメニュー内の「シャドウ／ハイライト」を選択すれば，図 16 のように影の部分を自動的に明るくしてくれます．
細かな調整もできますので，いろいろと試してみてください．

図 16．シャドウ／ハイライトによる色調補正

11
マルチメディアⅠ （担当：降旗）

9．テキストの入力
さて，本日の授業は Zoom や Teams の背景画像を作成することを念頭に置いています．色調補正を済ませた
画像にテキストを入力して，背景画像とすることを考えます．
テキストの入力は，ツールボックス内のテキストツール「T」をクリックしてから行います．

図 17．テキストツール

画像内のテキストを挿入したい位置をクリックしてからテキスト入力を行います．ここでは「高千穂大学」と入力し
てみます．すると，図 18 のようになります．画面右側のレイヤーウィンドウに「Text Layer 1」が追加されます．これは
黒で「高千穂大学」と書かれた透明なフィルムを画像の上にかぶせて俯瞰しているイメージになります．画像編集
ソフトウェアでは，レイヤー単位に画像やテキストを取り扱います．

テキスト「高千穂大学」の入力

レイヤー「Text Layer 1」

図 18．テキスト「高千穂大学」の入力

同じソフトウェアを使っているのですが，人によっては，「高千穂大学」と表示されずに，「□□□」などと表示さ
れる方がいるかもしれません．その場合は，フォントの変更を行います．フォントはデフォルトでは「DejaVu Sans」と
なっています．
「▼」をクリックし，図 19 のようにフォントメニューを開きます．Photoshop ならば，PC にインストールされているす
べてのフォントを使えるのですが，Photopea では，ここに若干制限がかかります．日本語のテキストを入力するの

12
マルチメディアⅠ （担当：降旗）

であれば，「Chi-Jap-Kor」に☑を入れて，「フォントを読み込み」をクリックします．そうしますと，CJK フォント（中国
語・日本語・韓国語で使用されるフォント）がメニューに表示されますので，任意のものを選択します．「M+1c」や
「M+1m」がよさように見えますが，時々表示できない日本語の文字があります．だましだまし使っていくしかありま
せん．表示できるフォントを選んでください．

図 19．フォントの変更

画像中のテキスト位置を変更するには，レイヤーウィンドウで「Text Layer 1」が選択されている状態で，図 20 の

ようにツールボックスから「移動ツール」を選択し，テキストを任意の位置に移動させます．オンライン会議システム
の背景画像を想定しておりますので，中央には人物が映りますから，左右どちらかに付置するとよいでしょう．
再び，テキストのサイズや書式設定を変更したい場合は，ツールボックス内のテキストツール「T」をクリックして，

13
マルチメディアⅠ （担当：降旗）

画像中のテキストをクリックすれば，再び編集可能となります．もちろん，「Text Layer 1」が選択されている状態で

操作しなければなりません．

図 20．移動ツールの選択

テキストの編集は，テキストツールが選択されると，画面上部のツールバーにテキスト編集用のメニューやボタ
ンが表示されますので，これらを操作し行います．Word や PowerPoint と同じように操作できます．
編集が終われば，ツールバー上の☑を選択するか「移動ツール」を選択すれば確定します．いろいろと試して
みてください．

図 21．テキストの書式設定

入力したテキストの装飾に関しては，「レイヤー」メニューの「レイヤースタイル」サブメニュー内にある「ブレンド
オプション」を選択するとよいでしょう．図 22 に示したように，テキストに限らず，画像を含むすべてのレイヤーに適
用可能なスタイルが多数準備されています．細かな微調整もレバーで行えるようになっています．
すべてマニュアルのように紹介しきれませんので，皆さんご自身でいろいろと試してみて，どのようなスタイルが
適用できるか確認してください．
完成したら，「ファイル」メニューの「PSD として保存」を選択し，Photoshop 形式でファイルへ保存します．ファイ

14
マルチメディアⅠ （担当：降旗）

ル名は「マルチメディアⅠ第 02 回背景画像.psd」とします．PSD 形式で保存すると，後で再編集を行うことができ

ます．また，Photoshop でも開くことができます．
そして，同じく「ファイル」メニューの「別名で保存」から「JPG」を選んで，JPEG 画像としてエクスポートします．フ
ァイル名は「マルチメディアⅠ第 02 回背景画像.jpg」とします．これが背景画像になります．Zoom や Teams にて
背景画像として読み込むことができます．

図 22．レイヤースタイルの設定

10．課題（背景画像の制作）
配布した画像データの中から 1 枚を選んで，前節までの説明を参考に，皆さん自身の背景画像を作成してみ
てください．ご自身で著作権に問題のない画像データを準備できるのであれば，そちらを使用していただいても
構いません．とにかく Zoom や Teams で使用できる，皆さんご自身の背景画像を作成してご提出ください．色調補
正とテキスト入力がなされていることが課題の満たすべき条件となります．

15