アウトライン
1. はじめに
2. 情報化社会の到来
3. データ、コード化
4. デジタル画像
5. 画像制作とコンピュータ
2
2-1 はじめに
3
内容の要点
• コンピュータによる画像制作体験
コンピュータ上で画像やイラストを制作できる
• ICTの発展による社会の変化
ICT（情報通信技術）の発展により、社会は大きく変化した。
情報をいつでもどこでもアクセスできる。情報は、ビジネス
や社会において非常に重要な資産となってきた。
• コード化とは？
コード化は、情報を特定の記号や符号で表現すること。コン
ピュータで情報を扱うための大切な考え方である。
• デジタル画像の仕組み
デジタル画像は、小さなドット（画素）で構成。画素は，
RGB（赤、緑、青）の3つの色の濃さが数値で割り当て。
4
今日の授業では以下のことが学べます
• コンピュータの機能や役割について
• コンピュータの本質は、ネットワークでつながってデータ
の共有、保存、活用が簡単かつ高性能に行えることです。
• コンピュータによる画像製作の体験もできます。コン
ピュータとインターネットを持っている人は、ぜひ試して
みてください。
5
次の外部ページを使用
WikiPedia: https://ja.wikipedia.org/wiki
• OpenStreetMap: https://openstreetmap.jp
• ルーブル美術館のバーチャルツ
アー: https://www.louvre.fr/en/online-tours
• Fluid Paint: https://david.li/paint/
• Silk: http://weavesilk.com/
• WebGL Fluid Simulation:
https://paveldogreat.github.io/WebGL-Fluid-Simulation/
• AutoDraw: https://www.autodraw.com/
• "Start Drawing" をクリック
Variational Auto-Encoder:
https://magenta.tensorflow.org/sketch-rnn-demo
• edges2cats: https://affinelayer.com/pixsrv/index.html
（これらの作者に感謝します）
6
2-2 情報化社会の到来
7
情報化社会 1940年台～
《新技術の創出》
• インターネット、情報通信機器、コンピュータなどが生み出
されている。
《社会全体への波及効果》
• 高性能で安価な情報通信機器の普及により、社会全体に大き
な波及効果が生じている。
• 「情報」が価値を持つ時代になっており、情報を上手に活用
することが求められている。
《生活、文化の変化》
• スマートフォンが手放せない時代になり、誰もが情報発信で
きるようになった。
• 世界中の人々とつながり、交流できるようになり、多様な文
化が世界に広がっている。
8
情報化社会
• 情報化社会では、個人がコンピュータを持ち、それがネッ
トワークでつながる
• 個人が自由に情報のやり取りや共有を行うことができる
• コンピュータのネットワーク化により、大量の情報を高速
かつ効率的に処理することができる
私たちの生活やビジネスのあり方を大きく変えている
9
コンピュータや情報技術に関するソフトウェア
• オフィスソフト
文書作成、表計算、プレゼンテーションなど。業務や学習に
便利。Microsoft Office など
• オペレーティングシステム
コンピュータ上で動作する基本ソフトウェア。ハードウェア
と他のソフトウェアの仲介。Windows、macOS、Linux など
• プログラミング開発環境
プログラミングの作業を効率化のためのソフトウェアです。
Anaconda、Visual Studio など
• ライブラリ
よく使用される機能をまとめたプログラムの集まりで、プロ
グラム作成時に便利。
• その他
3次元グラフィックス、ゲームエンジン、ウェブブラウザ、
メディアプレーヤー、画像編集ソフトウェアなどさまざま。
10
11
Word (ワープロ) Excel (表計算) PowerPoint (プレゼン)
• オフィスソフト
電子メール，
オンライン
ストレージ
なども
https://portal.office.com でオンライン利用
• Windows の標準機能
ファイルマネージャ
（エクスプローラー）
Web ブラウザ
エディタ
（メモ帳）
13
• ライブラリ
TensorFlow
※ 人工知能に便利な
フレームワーク
OpenCV
※ コンピュータビ
ジョン，画像処理
のライブラリ
Dlib
※顔検知，顔認識
のライブラリ
14
• 3次元コンピュータグラフィックス、ゲームエンジ
ンなど
３次元グラフィックス blender
３次元メッシュ
MeshLab
ゲームエンジン
Unreal Engine
情報化社会における危険
情報化社会においては、情報が簡単に入手できるようになり、
多くの人がオンラインで交流している
• 不正確な情報や悪意のある情報
情報が正しいとは限らず、悪意のある情報も存在。情報を鵜
呑みにすることは避け、情報の出所や信憑性を確認すること
が重要。
• プライバシの侵害
個人情報が拡散されることがある。削除してもデータが残る
ことがある。個人情報の取り扱いには十分注意が必要。
情報化社会の危険を避けるために、正しい情報の取り扱いや
個人情報の保護について常に意識することが必要。
18
まとめ
• 情報化社会では、個人がコンピュータを持ち、ネットワー
クでつながり、情報のやり取りや共有が自由に行える。
• 大量の情報を高速かつ効率的に処理でき、生活やビジネス
のあり方が大きく変わっている。
• ソフトウェアやデータの活用も便利になり、オフィスソフ
トやオペレーティングシステムなど様々あり、また、オー
プンな百科事典や地図なども活用できる。
• しかし、情報化社会においては、不正確な情報や悪意のあ
る情報が存在し、情報を鵜呑みにすることは避け、情報の
出所や信憑性を確認することが重要。
• プライバシーを侵害する危険を避けるため、個人情報の取
り扱いには十分注意が必要。
19
2-3 データ、コード化
20
• データは、世界や人間のあらゆる出来事、内容、
事情などを、文字や数字や符号などで表したもの
21
文字や数字や符号などで置き換える
ためのコード化
車両用の信号機
22
青
黄
赤
直進し、左折し、又は右折することができる
停止位置をこえて進行してはならない。
ただし、黄色の灯火の信号が表示された時に
おいて当該停止位置に近接しているため安全
に停止することができない場合を除く。
停止位置を越えて進行してはならない
赤黄
青
は分かりやすい目印（サイン）
コード化の例
昼ごはんは、次の２種類しかないとする
23
昼定食
うどん
コード化の例
24
次のように決めたとする
コード
元の情報
昼定食
うどん
赤
青
肉うどん
昼定食
情報
データ
うどん
昼定食
うどん
4月13日
4月14日
4月15日
4月16日
4月17日
赤
青
青
赤
青
コード化
コード化の例
25
次のように決めたとする
コード
元の情報
うどん
赤
青
肉うどん
昼定食
情報
データ
4月27日
4月28日
4月30日
青
昼定食
元に戻す
赤
元に戻すときも、コードと元の情報の
対応情報が必要 （当たり前）
青
うどん
コード化
• コンピュータが情報を扱うためには、情報をコンピュー
タが理解できる形に変換する必要がある。
• そのため、 「コード化」の考え方が重要になる。「コー
ド化」により、文字や数字や符号などでの表現ができる
ようになる。
26
情報のコード化
27
福山大学 720-0292
元の情報
郵便番号
コード化
コード化の逆
720-0292 と書くだけで、
「福山大学」だと分かる．
便利．
「720-0292」は、「福山大学」のコードだ というように、コード化
のルールを、全地名について決めておく必要があることに注意
ルイ１４世の暗号
• ルイ14世は、重要な文書を記録・保管する際に暗号化するこ
とを行っていた。
• 暗号化する理由は、第三者に文書が盗まれた場合でも、情報
の漏洩を防ぐことができるため。
• ルイ14世が使用していた暗号は、フランス語の単語を3文字
ずつ分割して、コードに置き換えるという方法。
28
action
元の文
act ion
分割
コード化
486 102
秘密のコード
ブックを使用
これを保管
暗号文
2-4 デジタル画像
29
画像と画素
30
それぞれの格子が画素
画像
画像の種類
31
カラー画像 濃淡画像
輝度と色の情報
輝度のみの情報
濃淡画像でのコード化
32
画像の輝度の情報
例えば： 黒 ＝ ０，
暗い灰色 ＝ １，
明るい灰色 ＝ ２，
白 ＝ ３
のようにコード化
画素
幅: 8
高さ: 8
輝度が４段階の場合：
0
1 2 3
カラー画像の成分
• R（赤）成分，G（緑）成分，B（青）成分で考え
る場合
• 輝度成分，色成分で考える場合
33
R（赤）成分
G（緑）成分 B（青）成分
輝度成分 色成分
R（赤）成分，G（緑），B（青）成分で考える
場合
34
R（赤）成分
G（緑）成分 B（青）成分
画素ごとに
１つの数値
画素ごとに
１つの数値
画素ごとに
１つの数値
すべてあわせて，画素ごとに３つの数値
2-5 画像制作とコンピュータ
35
36
38
④ ペイントソフト Fluid Paint
筆の設定は簡単にできる
・色
・サイズ
・毛先の多さ
・毛先の流動性など
⑤ Fluid Paint では，筆の設定は左側のメニューで．
書き直すときは「Clear」をクリック
39
⑥ Silk は，アート作品を手書きで作ることができる
サイト
40
⑦ 次の Silk のページを開いたら，
http://weavesilk.com/
「Draw Something」をクリックして開始
41
⑧ Silk では，左上のメニューで，色を選ぶことがで
きる
42
⑨ WebGL Fluid Simulation は，光の渦などを作るこ
とができる
43
2-6 画像制作と人工知能
45
人工知能を使ってイラストを描く AutoDraw
47
① ウェブブラウザで次の URL を開く
https://www.autodraw.com/
②「Start Drawing」をクリック
48
③ 描きたいものをざっくり描く
https://www.autodraw.com/
④上のメニューに候補が出るのでクリック
49
人工知能で，スケッチを生成するサイト
https://magenta.tensorflow.org/sketch-rnn-demo
50
① スクロールして、
下の方の「Variational Auto-Encoder」を探す
② 「Variational AutoEncoder
Demo」をクリック
start over
始めから
auto-encode
スケッチ生成
種類を
選べる
51
人工知能で猫を描くウエブサイト
「手書き」の絵に合うように，猫の画像を人工知
能が描く
52
① ウェブブラウザで次の URL を開く
http://affinelayer.com/pixsrv/index.html
② 「edges2cats」を探す
53
③ 「Clear」をクリックして消す
④ 猫を手書きして「process」をクリック
54
まとめ
• コンピュータを活用することで、画像やイラストの制作が
可能になる。
コンピュータとインターネットがあれば、誰でも簡単に試す
ことができる。
• コンピュータは、人間と協力してさまざまな創造的活動に
利用されている。
例えば、コンテンツ制作、プログラム制作、レポート制作な
ど。コンピュータは、これらの活動にとって重要なツールと
なっています。
• さらに、自由利用可能なソフトウェアやデータもたくさん
存在しています。
皆さんも、興味のある分野について自主的に調べてみること
をおすすめします。
55
