映像表現における技術革新と社会的テーマの深層分析

主たる業務が忙しくなって、少し間が空きましたが、引き続き過去に制作した授業資料をAIを用いて整理しなおした文章をアップします。
今までとは違って、授業で取り上げた映像作品の紹介やまとめスライドを基に、どうしてそれらの作品を選んだのかという自身の意識・無意識の部分を客観視してまとめてもらったような形です。
なお、レポートを確認して、内容的に微妙だと思った部分などは編集しております。

デザインの基礎～Web系を前提として

今回はデジタルメディア概論の次の段階で具体的なデザイン手法の解説部分のスライドを文章化したものを公開しました。

図版の公開は難しいのですが、その内容は上手く加味出来ているかと思います。

デジタルメディア概論・2010年代

このところ連続投稿している「授業スライドをAIで文章化する」試みですが、スライドはこれで区切り。

この後は、表現に関するコンテンツ・技術・知識などを紹介してレポート提出という授業になっておりました。

出講が2022年まででしたので2010年代までしか遡っていませんが、2020年代も半分を超えたところで大きく様変わりしている気がしますので、続きを2020年代前半でまとめてもいいかも知れませんね。

デジタルメディア概論・2000年代

前回に続いて、今回は2000年代をまとめています。

個人的に色々大変な時期でしたが、大きく成長したようにも思います。

デジタルメディア概論・1990年代

前回に引き続いて授業で使用したプレゼンスライドの文章化です。
AIと推敲作業をしてみましたが、意外と修正箇所が少なくて、自身の時代背景の認識が比較的ちゃんとしていたのでちょっと安心しました。
ここからは暫く年代を区切って振り返っていく形です。

「デジタルメディア概論・序文」を公開します

仕事用にまとめたプレゼンスライドをAIで文章化して、推敲しなおしたものです。

Word基礎編：ビジネス文書を作ってみる（２）

【これまでの記事】

• Word基礎編：ビジネス文書を作ってみる（1）

Wordの２回目です。

今回は文章自体の記述に入っていきます。

◎本文の記述１・タイトルまで

＊画像はクリックまたはタップで拡大します。細部の確認にご利用ください。

1.日付を１行目に記述します。西暦でも和暦でも良いので日付を書いてみて下さい。

日付の入力中。ある程度文字を入れると現在の日時が候補として表示される。

2.年まで入れた段階で、その時点での日時が候補として表示されますので、そのままエンターキー（Enter↲）を押します。

3.日付の入力が確定しますので、そのまま改行し、宛名と送り主の名前などを記述、一行空けて文書のタイトル・表題を記述します。

今回は以下のような内容にしてみます。

各位
なのはなパソコン教室
代表　谷口弘師

夏休みイベント開催のお知らせ

4.この時点では文字の並びのようなレイアウトは指定せず、全ての文を最初の状態のままの左揃えで記述してください。（この時点でレイアウトを取ると見た目が崩れやすくなります）

また、文字の大きさ・太さなども変更しません。

文章入力中の画面。

基本的には左揃えのまま記述を続ける。

5.記述が出来たら、ここまでの文体を整えていきます。

１行目の日付の文頭をクリックしてカーソルを点滅させます。

6.「ホーム」タブをクリックして「段落」グループの「右揃え」アイコンをクリックします。

「ホーム」タブをクリックしたところ。

主な機能がまとめられています。

「ホーム」タブ内の「段落」グループ。

灰色になっているのが「右揃え」アイコンをクリックした状態。

クリック後、日付の文字列が右側に表示されたのが確認できます。

「右揃え」にした状態。

7.同じ要領で送り主の部分を選択して右揃えにします。（ドラッグでまとめて選択しても、一行ずつ右揃えにしてもOKです）

「右揃え」にした状態。

8.タイトル・表題の文字列の文頭をクリックして同じく「ホーム」タブの「段落」の「中央揃え」アイコンをクリックし、文字列を文書中央に表示させます。

「ホーム」タブ内の「段落」グループ。

灰色になっているのが「中央揃え」アイコン。

「中央揃え」に変更した状態。

9.中央に表示させたタイトルの文字列を選択して、「ホーム」タブ内の「フォント」グループにある「文字サイズ」の項目をクリックして文字の大きさを変更します。

「ホーム」タブの「フォント」グループ内の「文字サイズ」の項目をクリックしたところ。

右側の三角形のアイコンをクリックして、16ポイントというサイズに変更している。

文字のサイズを変更した状態。

表示の揃えの際はクリックでOKですが、サイズ変更は該当する文字列をドラッグで選択してから変更します。

今回はここまでです。

次回はあいさつ文などを追加していきます。

Word基礎編：ビジネス文書を作ってみる（１）

今回から数回に分けてMicrosoft Officeでの文書作成を解説してみようと思います。

Wordの基本操作練習としてお試しいただけると幸いです。

ご質問などはブログ上では対応いたしませんので、教室へお問い合わせください。

◎新規ファイルを作成する

＊画像はクリックまたはタップで拡大します。細部の確認にご利用ください。

Word起動時の画面

1.Wordアプリケーションを起動します。

2.新規書類を作成する画面が表示されるので、白紙の文書を選択します。

グレーになっていると選択状態

3.白紙の画面が最初に表示される場合は左上の「ファイル」タブをクリックして新規書類の作成画面を表示するか、そのまま進んでください。

「ファイル」タブ（赤枠内）をクリックすると新規書類の作成画面になります

白紙の書類が表示されたら、余白の大きさを調整します。

4.上部の「レイアウト」タブをクリックして表示を切り替えてください。

Microsoft Officeでは「タブ」という部分をクリックするとその下に様々な機能が表示され、タブを切り替える事で機能を変更して行く事が出来ます。（リボンインターフェースと言います）

「レイアウト」タブの「余白」をクリックしたところ

「レイアウト」タブ内に様々な機能が一覧されます。

5.機能はカテゴリで分類されているので、「ページ設定」のグループ内の「余白」という項目をクリックしメニューを表示します。

6.今回はその中から「標準」を選択します。（必要に応じて変更もできます）

「標準」の青い線の内側に文章が表示される事になる

7.次に用紙サイズを選択します同じ「ページ設定」グループ内の「サイズ」をクリックし、用紙サイズを選択します。

「サイズ」をクリックしたところ

8.今回は一般的な「A4」サイズを選択します。

「サイズ」メニューの表示。一般的な用紙サイズが選択できる。

9.更に「ページ設定」グループ内の「用紙の向き」を選択します。

「用紙の向き」をクリックしたところ。

10.今回は縦方向を選択します。

「用紙の向き」メニューの表示。

後から変更するとレイアウトが崩れる可能性があるので、先に決定しておく方が良い。

以上、今回は新規書類を作成するところまででした。

次回は内容を記述して行きます。お楽しみに。

iPhoneを「らくらくホン」にする

iOS17の機能で「アシスティブアクセス」というものがあり、これを利用するとiPhoneのインターフェースを通常のものから機能限定した「簡単アクセス」風に変更できるようになっています。

どうしてもパソコンやスマホなどは操作が理解できないという方もいる中で、その利用頻度は必須レベルに多いので、こういう機能があるのは当然となるでしょうね。

Androidスマホの場合はインターフェースのカスタマイズは比較的柔軟に行えるので、iPhoneでようやく出来るようになったのは遅過ぎるようにも思いますが。

私の使用しているiPhoneのホーム画面です。

通常はこのような形でアプリのアイコンやウィジェットという小型アプリが表示されています。

「設定」アプリの「アクセシビリティ」の項目を選びます。

「一般」の項目に「アシスティブアクセス」がありますので選択します。

端末のPIN番号以外にアシスティブアクセス管理用のパスコードを作る必要がありますが、作成後にアイコンの配置方法と配置するアプリの選択を行う画面が表示されます。

使用頻度の高いものや必須と思われるアプリを選択しておきます。

（アシスティブアクセス画面ではスクリーンショットが撮れないのでこの画像はアップルのサイトからの引用です）

再起動後に画面が切り替わり、大きなアイコン表示のインターフェースに切り替わります。

表示を元に戻す事も可能です。（機種により操作は異なるようです）

 アプリアイコンが大きく、表示制限を行えるだけでなく、Apple製のアプリの場合は機能も限定化でき、例えば通話であれば連絡先の限定を行えたり、カメラアプリも機能限定させたりする事が可能で、子供用にも使えるかと思います。

機能を最低限にして、デジタルデトックスというのもいいかも知れませんね。

ホームページ制作入門～ 画像とディレクトリ

ホームページ作成講座の動画を追加しました。

今回は画像の表示とそれに必要なディレクトリ・相対パスの説明です。

HTMLの学習で一番ややこしいところでもあるので、上手くまとめられたかやや心配ではあります。

今までの動画はこちらです。

ホームページ作成講座 動画追加しました

動画講座3本目を公開しました。
今回は文字の表示に関する記述です。

HTML/CSS入門講座「HTMLの構造」公開しました

動画で解説するHTML/CSSの入門講座を追加しました。
今回はHTMLの基本記述とHTMLファイルの作成に関する内容です。

今回からスクリーンキャプチャによる操作例が入っています。

次回は文字の表示に関する内容の予定です。

HTML/CSS入門講座「HTMLの文法」公開開始します

一昨年から制作していたビデオ講座「HTML/CSS入門講座」を無償公開いたします。

これはとある理由で制作していた初心者向けのホームページ制作講座ビデオなのですが、色々ありましてお流れになっていたので、随時作り直して公開して行こうというものです。

内容的には全くHTML/CSSというホームページ制作用の言語を知らなくても、簡単な静的なWEBサイトを作る事が出来るようになるのを目標としています。

そういう意味では現場メソッド的なものではありません。

今回は概論的なパートを公開しますが、随時公開可能になったものからアップロードしていきます。

仕事が比較的余裕のあるこの時期に全てアップしようと思ったのですが、新年度の出講対応などで全部は難しいかも知れませんので、少しずつになるのをご了承ください。

教室の方でもHTML/CSSは対応いたしますので、お気軽にお問い合わせください。

Windows10の授業資料公開

4月からの講師業のために作成していたWindows10の基本操作マニュアルを公開します。

というのも、最初機種選定をPCで考えていたのですが、Macintoshになりそうなので、Mac版をこれを元にまた作り直す事になりそうなのです。
まぁ、両方使えるので良いんですが。

多分、これは日の目を見る事は無くなると思いますので、Windows10の乗り換え促進の意味も込めて、公開しておきます。

一応公開はしますが、画像・文章などの著作権は放棄しておりませんので、ご注意を。
個人的使用に関しては特に良識の範囲でお使いください。

・デジタルメディア演習01
（別ウィンドウ・タブで表示されます）

レタッチ入門～トーンカーブ序論

GIMP講座、レベル補正が一段落してそのまま放置しておりました。（汗
まぁ、実際のところ、あれくらいが出来るだけでも写真は劇的に印象を変える事が出来るのですが、より高度な処理が出来るものに「トーンカーブ」があります。
次はトーンカーブの解説をしていきます。

●トーンカーブとは？
トーンカーブはレベル補正をより高度に設定できるようにしたもので、使い方によっては明るさ・コントラストの修正だけでなく、「ソラリゼーション」のような特殊な画像処理もおこなう事が可能です。

ソラリゼーションの例。

フィルムで言うネガとポジが合わさったような状態になる。

高度な事が出来る反面、概念がやや分かりにくい物でもあるので、簡易レタッチソフトなどでは採用されていなかったりするのですが、使い方が分かればレベル補正以上の表現が行えるようになります。

●トーンカーブの構造
GIMPで使われているトーンカーブをベースにその基本構造を確認してみましょう。
メニューバーの「色」→「トーンカーブ」でダイアログを開く事が出来ます。

これがトーンカーブなのですが、正確には中央にある右上がりになっている直線がトーンカーブです。
このトーンカーブは線上の任意の場所をドラッグする事で曲げる事が可能です。

この場合は中央の部分をドラッグして上にカーブを作りました。
このようにカーブを作って画像の「明るさ」を変更するのが基本的な使い方になります。
ちなみにこの状態だと、画像は「明るく」なります。

その原理を確認してみましょう。

トーンカーブは下と左側にあるグラデーションの意味が重要になります。
下側のグラデーションは入力と言い、加工する前の画像の最も暗いピクセルから最も明るいピクセルへのトーンの変化を表しています。
トーンカーブの後ろに画像のヒストグラムがあるので、レベル補正の理論が分かっていれば問題無く読み取れるでしょう。
特徴的なのは「出力」のグラデーションです。
この出力は「トーンカーブで加工した後」の明るさを示すもので、この出力を基準に全体の明るさを変更して行きます。

 トーンカーブが直線状態の時は入力と出力のグラデーション上の明るさが同じであるため、画像に変化は起こりません。
では、これを中央の部分を上に上げるようにドラッグしてみます。

カーブの形が変わります。
すると、入力の明るさは変わりませんが出力が大きく上にドラッグした分だけ明るくなります。
このようにして画像の明るさを変えるのがトーンカーブです。

で、更に特徴的なのが、両端の部分です。
変更前と変更後のトーンカーブの画像のカーブ両端、つまり最も明るい部分と最も暗い部分が「動いていない」事に注目してください。
つまり画像は明るくなるのですが、全体に明るくなるのではなく、ドラッグした部分を中心に「全体のトーン（明暗の変化）を大きく変える事無く明るくなる」のです。

実際にどのように変化するかは、今後実例を挙げながら解説していきます。

今回はここまで。

レタッチ入門～レベル補正その5

＊GIMP講座まとめはこちら。

・レベル補正・実践

レベル補正機能を使って写真の補正を行なってみましょう。

4.色かぶりの補正（ホワイトバランス）

GIMPのレベル補正機能にはホワイトバランスの調整が備わっています。
これを使って「色かぶり」の修正をしてみましょう。

この画像は全体的に赤系統の色が強く出てしまっています。
こういう状態を「色かぶり」などと言います。
フィルムもデジタルもカメラは光を記録する道具なので、光線が太陽光だったり蛍光灯だったりで光が強く含む色味が画像に影響し、実際の色味が出てこない事が普通に起こります。

通常はデジタルカメラ等ではAWB（オート・ホワイトバランス）などの補正機能が付いており、ある程度の処理はしてくれるのですが、意外に不完全な場合が多いです。

これらのどうしても起こる色かぶりの処理をして画像の色味を自然なものに変更します。

GIMPのレベル機能ではスポイドの形のボタンでこの処理を行います。

「レベル」のダイアログの右下に3種類のスポイドのボタンが有るのが確認できるかと思います。
これらは左から黒・グレー・白となっており、それぞれの色のボタンを押してから画像をクリックすると、クリックした所が無彩色の黒・グレー・白になるという機能を持っています。

無彩色というのは色味を持たない色で、上記の通り黒と白、その間に存在するグレーの階調が該当します。
撮影した画像において「無彩色であるはずの部分」がある場合、その部分をこのボタンで「完全な無彩色」にする事で、全体に被っている色みを除去できるという訳です。

この画像であれば、ニンニクが置かれている平面が白色で、少し陰になっている事から、本来グレーに映るべきなのですが、色が付いてしまっています。
そこで、グレーのスポイドのボタンを押して、平面のグレーの部分をクリックします。

すると、クリックした所の色味が消えて無彩色のグレーになります。
と、同時に削除された色味と同じだけ、画像全体から色かぶりが消えるので、画像が自然な色味になります。

このような処理を行う事で、画像を最適な状態にする事が出来ますが、無彩色の箇所が画像に含まれている必要があり、もし、無彩色の部分が無ければ、トーンカーブなどを用いて、細かな色調補正作業を行う必要があります。

これに関してはトーンカーブの解説で行いたいと思います。

レタッチ入門～レベル補正その4

久々にGIMP講座を再開します。（汗

出来るだけ定期的に進めますので、進めるつもりですので（多分）、宜しくお付き合い下さい。

それと、ご報告ですが、ホームページまたはブログ右のリンクの「メール」にありますメールフォームがサービス側のデータベースの変更でちゃんと使えない状態になっておりました。
先日ご指摘を受けて、修正を行いました。
ご迷惑をお掛けして申し訳ありません。以後気を付けます。

---

＊GIMP講座まとめはこちら。

5.レベル補正・実践

レベル補正機能を使って写真の補正を行なってみましょう。

3.中間調の調整（明るさの割合変更）

レベル補正を用いる事で、画像全体の調子（トーン）を崩す事無く、明暗のバランスを変更する事が可能です。

例えば、最も明るい部分（ハイライト）と最も暗い部分（シャドウ）の濃度（濃さ・明るさ）を変更する事無く全体的に画像を明るくしたり暗くしたりする事が出来ます。

この画像を用いて中間調の変更を行なってみます。

が、その前にこの画像を単に明るくする処理を行なってみます。

画像は明るくなりましたが、影の部分も全体的に明るくなっています。

これは全ての画素が均等に明るくなっているので、最も暗い画素が消失した状態になります。

画像は明るくなるのですが影が薄くなるので全体時に締まりの無い画像になります。

では、中間調の変更を行います。

メニューの「色」の項目「レベル」を選びます。

レベル補正のダイアログが表示されたら、ヒストグラムの下にある真ん中のグレーのスライダーを左に動かします。

スライダーが左に動くと黒のスライダとの間隔が狭くなり、白のスライダーとの間隔が広くなります。

このグレーのスライダーは白と黒つまりハイライトとシャドウのちょうど中間の明るさを意味しており、この場合グレーのスライダーの右側が明るい画素の範囲に、左側が暗い画素の範囲になります。

スライダーの間隔が広くなると画素の明暗の範囲が増減し、つまり画像の明暗の割合を変更出来るのです。

実際に上記の設定の中間調で明るい画素の割合を増やして画像を明るくしました。

元画像よりも明るくなっていますが、背景などに見られるシャドウのトーンにあまり大きな変化は見られません。

明暗の幅は元画像を維持して締りのある画像になっています。

では、グレーのスライダを右に動かして暗い部分の割合を増やすとどうなるでしょうか？

このような暗い画像になりますが、ニンニク右上のハイライトが潰れていない事が確認できます。

つまり一番明るい画素の状態は維持して、全体のトーンはそのままに、画像を暗くする事が出来ています。

このように出来るだけ元画像の明暗のトーンのバランスを維持した状態で画像を明るくしたり、暗くしたりする事が出来るのです。

ちなみにこれはトーンカーブという手法でも変更可能で、より詳細な調整を行う事が可能になります。今後また紹介します。

レタッチ入門〜レベル補正その３

前回の続きです。

5.レベル補正・実践

レベル補正機能を使って写真の補正を行なってみましょう。

2.  暗すぎる画像（露出アンダー）の修正

この写真は全体的に黒っぽく撮影時の光の量（露光量）が少ない状態であった事が分かります。

明るすぎる写真と同じように適正な露出に変更し、トーンを作り出します。

・先程と同じく、メニューバーの「色」を選び、項目から「レベル」を選びます。

・ヒストグラムを確認すると、明るいピクセルが「無い」事が分かります。暗すぎる画像の場合はこうなっている事が多いです。

・明るい画像の時と逆に右の白のスライダをヒストグラムが始まる所まで移動させます。以前解説した通り、白のスライダのある所が最も明るいピクセルになるので、ヒストグラムの右端のピクセルはグレーから白（ハイライト）に変わります。

・画像にハイライトのピクセルが出来たので、明るい部分の階調が出来ます。

左が補正後、右が補正前。

左側の上部に明るいハイライトが出来たのが確認できる。

ハイライト、つまり明るい部分が出来ると明暗差が生まれ立体感・質感が増す印象があります。

ヒストグラムは基本的に右端が白、左端が黒になるように調整して適正な明るさを指定します。

レタッチ入門～レベル補正その2

久々にレタッチ入門を更新します。
今回は実践編。

5.レベル補正・実践

レベル補正機能を使って写真の補正を行なってみましょう。

1.  明るすぎる画像（露出オーバー）の修正

この写真は全体的に白っぽく撮影時の光の量（露光量）が多い状態であった事が分かります。

写真は黒から白への階調（トーン）が充分にある方が良いのでこの写真を適正な露出に変更します。

・メニューバーの「色」を選び、項目から「レベル」を選びます。

・ヒストグラムを確認すると、暗いピクセルが「無い」事が分かります。明るすぎる画像の場合はこうなっている事が多いです。

・左側の黒のスライダをヒストグラムが始まる所まで移動させます。以前解説した通り、黒のスライダのある所が最も暗いピクセルになるので、ヒストグラムの左端のピクセルはグレーから黒に変わります。

・画像に黒いピクセルが出来たので、画像に陰の階調が出来ます。

左が補正後、右が補正前。

左側の影の部分に黒が目立つようになっているのが確認できる。

陰の階調が出来ると画像が黒く引き締まるので力強く程良い明暗が出来ます。

ヒストグラムは基本的に右端が白、左端が黒になるように調整して適正な明るさを指定します。

レタッチ入門～レベル補正その1

教室の看板が日に焼けて早速色褪せてました。
また、このところの雨や風でかなり傷んできてもいます。

しかし、7月に入ってついに教室運営が本格化、つまり受講生が誕生しそうな状況なので本腰入れて頑張らねばというところです。


結構軽率に見切り発車したところもあるので、少しずつ軌道修正をかけて行かないとなぁ。


と、近況を書いた所で、また、見切り発車なGIMP講座です。
ではでは。

------

レタッチ入門編

写真を修正してみよう（色調補正編）

・レベル補正とヒストグラム

GIMPにはデジタル画像の色味や明るさなどを修正する様々な機能が備わっています。この機能を用いて色調補正という作業を行ってみましょう。 

レベル補正とは画像の明るさの分布の修正です。画像の明るさの分布というのは、画像を構成している画素(ピクセル）がそれぞれどの程度の明るさを放っているのかという分布になります。これらの画素に最大・最小の明るさや中間の明るさなどを指定する事で画像を明るくしたり、暗くしたり、また、明暗のコントラストを強調したり、一定以上の明るさを均一にしたりという処理が行えます。

このレベル補正と切っても切れないのが、ヒストグラムという画素の明暗の分布図です。(図）

ヒストグラムは画像に使われている画素の明暗の数を黒（暗）から白（明）のグラデーション上に分布したグラフの様なものです。このヒストグラムで明るさを変更する事でレベル補正を容易に行う事が出来ます。

具体的な操作を説明します。

画像ウィンドウ上部のメニュー欄に「色」と書いてある項目があります。これを選択して、中から「レベル...」と書かれている項目を選んでください。

「レベル」というパネルが表示されます。この中の黒い山のようなグラフがヒストグラムです。

ヒストグラムの下に黒・グレー・白の3種類の三角形があります。この三角形を一般的に「スライダー」と呼びます。このスライダーを動かすことでコントラストの調整などを行う事ができます。

1.ハイライトの設定

画像の明るい部分の調整をしてみましょう。

レベルパネルのヒストグラムの右下の白い三角のスライダをマウスでドラッグして左に移動させてみてください。

スライダを動かす前と比べて白く明るい部分が非常に強調されているのが分かるでしょうか。

この白いスライダーは移動させた位置より右側にあるヒストグラムの明暗（階調・トーン）を全て最大の明るさである白に変更するという機能を持っています。つまり、明暗のあった部分を単一の白という色・明るさに変更したため白い部分が増え、画面に明るさ（ハイライト）が増したのです。

2.シャドウの設定

では、白のスライダを元に戻して左側の黒のスライダを同じくドラッグして右にずらしてみましょう。

先程とは逆に、暗い部分が強調された画像になっているのが分かるでしょうか。

黒いスライダーは移動させた位置より左側にあるヒストグラムの明暗を全て最大の暗さである黒に変更するという機能を持っています。つまり明暗のあった部分を単一の黒という色・明るさに変更したため黒い部分が増え画面に影（シャドウ）が増したのです。

3.中間調の設定 

更に黒のスライダを左に戻して、真ん中のグレーのスライダを動かしてみましょう。

この画像では左の方に移動させていますが、画像を見ると影になっていた部分が明るくなっているのが分かると思います。

グレーのスライダは中間調を表すものです。中間調とは白と黒が半々の状態で混色された「中間の明るさ」を意味し、このスライダのあるヒストグラムの位置（明るさ）が明暗の半分の位置になります。

上の画像のように中間調のスライダを左に動かすと、右側の広くなったヒストグラムの部分が「明るい色の分布」となり、左側が「暗い色の分布」となる。すると、画像全体では明るい色の分布が増え、暗い色が減るので画像自体は明るくなるのです。そして逆に動かすと画像は暗くなります。

中間調は明るさの配分を変更するので、白・黒のスライダで画像の明るさを変更するのとは全く異なった結果になります。