2021年3月30日火曜日

2020年7月21日火曜日

情報デザイン1ブログ 目次

このブログは、授業の進行に合わせてライブ感満載の教材を、というコンセプトで記事をアップしてきましたが、実はこんな構成になっています。
教科書としてご活用ください。

2020年度 情報デザイン1⓪  受講生へのメッセージ

◉課題説明
mission-1:自己紹介シート
 課題1の説明
mission-2:フィールドワーク_経験と発見の視覚化
 課題2の説明
mission-3:メディアデザイン_冊子制作
 課題3の説明
プレゼンテーション:メディアデザイン_映像制作
 展示プレゼンテーション用映像制作の説明
授業の振り返り:今回学んだことをまとめておく
 最後の宿題説明

最終作品プレゼンテーション映像一覧

◉課題実践のヒント
・mission-1 遂行のヒント
m-1:ヒント1-a:テンプレート
m-1:ヒント1-b:写真撮影
m-1:ヒント1-c:図解表現
m-1:ヒント1-d:ことばのデザイン
m-1:ヒント1-e:グラフィックソフト
m-1:ヒント1-f:文字組
m-1:ヒント1-g:RGBとCMYK
・mission-2 遂行のヒント
m-2:ヒント2-a:観察スケッチ
m-2:ヒント2-b:活動や経験の視覚化:図解
m-2:ヒント2-c:お絵描きから使える素材へ
m-2:ヒント2-d:図解にイラレを活用する:イラレ
・mission-3 遂行のヒント
m-3:ヒント3-a:冊子制作
m-3:ヒント3-b:InDesign
m-3:ヒント3-c:情報の組織化
m-3:ヒント3-d:データの書き出し(InDesign)

◉やってみた(トーヤ・ヘンソン)
やってみた①:m-1 その1:本文の配置
やってみた②:m-1 その2:画像の配置
やってみた③:m-1 その3:図解制作
やってみた④:m-2 その1:FW-1の1
やってみた⑤:m-2 その2:FW-1の2
やってみた⑥:m-2 その3:FW-1の3
やってみた⑦:m-2 その4:FW-2の1
やってみた⑧:m-2 その5:FW-2の2
やってみた⑨:m-2 その6:FW-3の1
やってみた⑩:m-2 その7:FW-3の2
やってみた⑪:m-3 その1:ひとりで編集会議
やってみた⑫:m-3 その2:ページ構成を練る
やってみた⑬:m-3 その3:プロトタイピング
やってみた⑭:m-3 その4:かたちにしてから考える
やってみた⑮:m-3 その5:考えながらかたちにする
やってみた⑯:m-3 その6:インフォグラフィックス
やってみた⑰:m-3 その7:実際に綴じてみた
やってみた⑱:m-3 その8:最後まで粘る
やってみた⑲:映像プレゼン その1:企画
やってみた⑳:映像プレゼン その2:編集そして完成
やってみた㉑:振り返り

◉おまけ
おまけ01:スマホスタンド
おまけ02:Slack用プロフィール画像
おまけ03:お絵描き
おまけ04:写真のトリミング

◉お楽しみ企画
シン・はこだて未来犬・学⓪
シン・はこだて未来犬・学①
シン・はこだて未来犬・学②
シン・はこだて未来犬・学③
シン・はこだて未来犬・学④
シン・はこだて未来犬・学⑤
シン・はこだて未来犬・学⑥
シン・はこだて未来犬・学⑦

おまけ04:写真のトリミング

おまけというよりは、mission-1のヒントとして、掲載するべきだったかもしれません。

◉元の画像と異なる縦横比で配置するときに

こんな状態になっていませんか?
ワープロソフト、プレゼンソフト、グラフィックソフトで画像を扱う場合、そのアプリの表示画面上で、直接その画像の比率を変えてしまうと、上図のように変形されてしまいます。この時点で「変だなぁ?」と気づいて欲しいのですが、授業課題などでは、このまま提出されているものも少なくありません。お願い、気づいて・・・。(Webではこうなりやすいので、逆に気にならないのかな・・・)
意図的にこのような方法をとることがないとは言えませんが、一般的にポートレートなどを掲載する場合は、縦横比率が崩れないように扱いたいところです。

◉トリミング
大抵のアプリには「トリミング」という機能が用意されているので、これを使いこなせるようになってください。
トリミングには2つの方法があります。
ひとつは、実際に画像をカットして使用サイズ(比率)に合わせる方法です。ファイルサイズを小さくしたり、後の余計な操作で手を加えられないようにしたい時などは、この方法を選択します。Photoshopはこれが得意。

もうひとつは、「マスク」などの機能を使って、画像の表示範囲を制限する方法です。
元の画像は加工せずに、マスクの形状で
目的に合わせて使い分けられるといいですね。


やってみた㉑:振り返り

授業全体を振り返るにあたって、もう一度、このブログをはじめ、自分の生み出した様々な表現物を見直してみました。もちろんフィールドワーク中に取った写真も一通り。
※googleに魂を売ってしまっている私ですが、そのおかけで写真が全てgoogleフォトに溜まっていて、いつでもどこでも写真を確かめられるようになっとことは、ITの恩恵と言えますかね。

そして、まずはスケッチブックに、この授業で感じてきたことを勢いでザッと書き出してみました。
もっと書けそうですが、勢いの鈍ったところで、「ここまで」とし、もう一度見直しながら、ペンの色を変えて補足的な思いを描き足してみました。

◉メディアデザイン
振り返りシートの条件はA3サイズなので、上記の資料を組み合わせて一枚のシートにまとめることにしました。ツールはイラレか、フォトショか、インデザインか・・・。
で、短時間でトリミングができて、書き込みができて、全体レイアウトも整えられるInDesignに決定。作業開始です。
説明に必要な材料を過去の活動から掘り出して、追加しました。

できた!
これをもとに、500字のレポートを書きます。

書きました。提出して・・・
mission完全コンプリート、惑星探査終了です。

◉誰のためのデザイン?
私の場合、「提出」が条件となっている表現物では、かならずそれを見て欲しい具体的な人をイメージして、その人がどうしたら喜んでくれるかを意識して制作に臨んでいます(これをここに書いちゃっていいものか・・・)。レポート(仕事上でも、たくさん書かされる)も同じだと思っています。
「利他主義」ということばを授業のオリエンテーションでも使いましたが、大事なキーワードだなぁと思います。ちゃんと見てもらえれば、反応してくれる。実際にそうでなくても、これが表現活動のモチベーションにつながるかなぁ。

2020年7月20日月曜日

授業の振り返り:今回学んだことをまとめておく

受講生のみなさん
ひとりぼっちの惑星探査、お疲れ様でした。

さて、この活動も最終段階です。
まずはここまでの道のりを、授業の最初に共有した「活動の全貌」マップでおさらいしておきましょう。
この図のmission-4にあたるのが今回の宿題です。
最後の宿題は、次の惑星探査に向かう前の大事なステップでもあります。
今回の経験の振り返りをしっかりやって締めくくりましょう。

◉宿題
この授業での自分自身の学びを振り返りシートとレポートにまとめる。
振り返りシート:A3用紙(縦横自由)に、この授業で学んだことを図解する。
レポート:500字程度で、振り返りシートの説明、補足となるもの。
締め切り:2020/07/21

◉提出
WebDavの「振り返り」フォルダに、ハンドルネームフォルダをつくり、その中に提出してください。

◉振り返りの内容
何を学んだかを、自分で説明してみてください。
授業課題の説明ではなく、自分自身がやってきたことについてです。
対象(生活世界)に対する気づきと、自分自身についての気づきを対応させてみるといいかもしれません。
何をしたか?なぜそうしたか?どうやったか?そのとき感じたこと、そのとき使った技、新たに手に入れた技、関連して調べたこと、出来上がった表現について、これからやるべきこと・・・たぶん、原稿を書き出したら、いろいろな思いが溢れ出してくるのではないでしょうか。これらを書き留めて、残しておきましょう。これは、未来の自分に向けてのメッセージです。急いで、丁寧に、具体的に、振り返ってみてください。
この授業の中で生み出した様々な表現物を一度目の前に並べて眺めてみると、そこにここまでの自分の姿が浮かび上がってくるはずです。

やってみた⑳:映像プレゼン その2:編集そして完成

シナリオが固まり、素材制作に入りました。
映像制作にも、様々なアプリケーションソフトが活用できます。
今回の私の挑戦は、冊子のページをめくるアニメーション。
AfterEffectsをつかってガッツリ作ってみる・・・と思ったのですが、諸事情により(つまり忙しくてじっくり試す時間がなかった、という言い訳ですが)あきらめました(泣)。

とはいえ、やり始めたら際限なくやれてしまうのが表現の世界。自分なりに制約を決めて、なんとかやり切りました。
まずはver.01ということでここにアップします。

まだBGMを入れたいし、グラフィックももうちょっとがんばりたいし。
締め切りまであと1日、ということで今回も粘ってみるか(7/18)。

BGM欲しいけど、iMovieで使える音源はなんかイマイチ・・・。そんななかで無理くり選んで付けてみました。ナレーションの音が小さかったのでこれも調整しています。

なんか急に、テレビ番組っぽくなった。音楽も考え始めるとキリがない、奥が深いです。

映像表現は、確認のために何度も同じ表現をみなければならない宿命です。しかしそのおかげで、徐々に考えがまとまったり新たなアイデアが浮かんだりと、表現者としての筋力が鍛えられる感じもします。
で、見返しながらいろいろと気付いてしまったことを反映させて、さらに手を加えました。(プロの仕事は、絵コンテの時点で設計図が出来上がっているので、こんなふうに後から修正ていたら大変なことになる、多分)

説明要素ごとにアイキャッチが欲しいなぁと、アルファベットや数字を入れてみましたが、うーん、これはちょっと日和過ぎかな。バージョン2の方がよかったと思います。
ちなみに、制作過程でファイルのバージョン管理はとても重要です。作り変えちゃうと元には戻れないけど、ファイルが残っていれば、ちょっと引き返して別の道に進むこともできますね。

今回、使用したアプリは
Pages
Keynote
Illustrator
Photoshop
Premiere Pro
AfterEffects
Animate
MediaEncorder
iMovie
ボイスメモ(iPhone)
これらのツールを、あっちに行ったりこっちにきたりと、職場の机の上のようにとっ散らかした状態で進めていくわけですが、まぁ仕方ないか。データ形式やファイルサイズなど、この作業の中で学べることもありますし、見えない部分にも気を遣う練習ですな。

これに3Dソフトが加われば、さらにパワーアップ。今回のページめくり映像についても、3DCGでの表現も可能ですね。

毎回、困っているのが、最終的な書き出し時間。どの組み合わせでどう書き出すのが早いか、いまだに答えの見えない旅路です。

2020年7月18日土曜日

やってみた⑲:映像プレゼン その1:企画

映像作品制作のアプローチ方法も、他の様々なメディア表現と同様に無限にあります。
広告CM、ドキュメンタリー、ドラマ仕立て、ニュースや紹介番組、etc.
作品紹介なら、日曜美術館など・・・
ドキュメンタリーなら、プロジェクトX(もう知らない世代?)やプロフェッショナル、情熱大陸・・・
プレゼンテーションそのままのTED・・・
かたちから入ると、際限なく妄想が広がって、収集がつかなくなりますね。

◉何を伝えるか
情報デザインはコンテンツから、という基本に戻って、まずは何を伝えるべきかを文章にしてみました。
課題作品のプレゼンテーションは課題の説明になりがちですが、そうではなく具体的に、自分が何をしてきたのかを書き出してみます。

◉シナリオ制作
これを1分に収まるように、iPhoneのボイスメモを使って、音読を録音しながら、修正(冗長な部分の削除、言いやすさや繋がりの調整)していきます。
第一稿は2分・・・。
第5稿で59秒・・・もっと削らねば。だけどとりあえずこの辺で、表現の構成も考えたい。

◉絵コンテ
シナリオを書きながらも、画面についてイメージはしています。これを絵コンテにしてみました。
ラフすぎるって?いいんです、自分がわかれば。
・・・まぁ行けそうなんだけどスカスカな気もするなぁ。

◉アニマティクス
表示する材料は決まったので、もうすこし本番をイメージできるよう、表現を進めます。
アニマティクスは、映像のプロトタイプといったところ。本番前に絵コンテやCGなどを使って映像を作り、仕上がりの方向性を確認するための表現物です。プリビズ:プリビジュアライゼーションとも言うらしい。
今回はKeynote(パワポのようなプレゼンソフト)で、画面の流れを作ってみました。
うむむ、やはりグラフィックデザイン的にちょっとスカスカかな。
しかし締め切りもあるので、これをベースにデザインを詰めていきます。
シナリオ=ナレーション原稿を読みながらこのKeynoteプロジェクトを調整して、画面切り替えのタイミングや表示要素の調整を行い、最低でもこの状態で映像化して提出できるようにします。

◉ナレーション録り
身の回りのツールだけを使ってどこまでできるかを試そうと、本番用のナレーションもiPhoneのボイスメモを使ってみます。で、毎回録音しながら、文言も少しづつ訂正して、最後まで一通り喋り切るのに16テイク(泣)。まだ微妙に噛んでいますが、ここで諦めて映像と組み合わせることにします。

◉音の調整
Adobe Auditionを使って、歯擦音の除去や尺の調整(結局1分10秒かぁ)を行い、作品の骨格となる音声データを整えます。

(続く)