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秒かぁ)を行い、作品の骨格となる音声データを整えます。

(続く)

2020年7月16日木曜日

プレゼンテーション:メディアデザイン_映像制作

制作した冊子メディアを、オンライン展覧会での展示を想定して、映像で紹介せよ。

今後、デザインに関わる専門家にとって、映像表現は欠かせない説明の道具となります。今回はその練習問題として、自身の制作した作品のプレゼンテーション資料(作品)を、映像化してみます。

◉概要
・オンライン展覧会での映像展示を想定する
・長さは1分程度
・YouTubeに限定公開(YouTubeの規格や特性の理解が必要)
・ファイル形式としては、YouTubeのフルHD画質に対応したもの(1920×1080)

◉スケージュル
・締め切りは7月21日(火)
・YouTubeへのアップ(限定公開)とWebDavへのファイル提出
 YouTubeにアップしたら、URLをslackの#presentationチャンネルにリンクを貼ってください。
・7月27日の最終授業で講評の予定

◉内容
・映像のタイトルは、冊子作品のタイトルを基本とする
・作者名はハンドルネームで
・作者は映像としては登場しない(個人情報保護の観点)
・作品の概要、アピールポイント、制作プロセスでのトピック、工夫した点、この活動で学んだこと・・・など、制作者として語りたいこと、伝えたいことを、簡潔にまとめる
・字幕、ナレーションを活用する
・授業や課題の説明は不要。作品そのものの説明に専念する。
・ナレーションは可能な範囲で、工夫して入れてください(テレワークの環境では扱いにくい場合もあるかと思います)。

◉使用ツール(アプリ)
・自由
・せっかくなのでAdobeの映像系アプリに触ってみよう
・プレゼンソフトの映像化機能を使って良い
・ナレーションの録音は、受講生それぞれの環境の中で工夫して

◉オンライン公開
・今回はYouTubeの規定に準する
・不特定多数が視聴する
・前提を知らない人が見ても内容を把握でき、実際の冊子が欲しいなぁ、と思わせる

◉ヒント
・テレビCMは15秒、テレビ番組のオープニングソングは大体1分。そう考えれば、たった1分でも結構語ることができます。
・自分の作ったもの、考えたことを簡潔に説明する練習。
・予めシナリオや絵コンテを用意してから実制作にかかることを推奨します。
・映像表現もコミュニケーションデザインの重要なメディアです。この機会に、ちょっと背伸びした表現やツールにチャレンジしてみてください。

2020年7月15日水曜日

やってみた⑱:m-3 その8:最後まで粘る

表現物を「完成」とすることは、そこで手を止める=諦めるという意味でもあります。
作者としては、時間がある限り完成度を上げたい・・・。

実際の冊子のかたちにして、じっくり眺めてみました。原寸で実際の使用状況で確かめる、という方法は表現に決着をつける上で重要なプロセスです。
で、実際の冊子のかたちにした課題作品を、じっくり眺めてみました。
「ああ、忘れてた」「そうだ、ここはおもっとこうした方がいい」・・・と、次から次へ出てくる、出てくる。そして締め切りまであと1日、まだ手は打てる。
出来立てホヤホヤの冊子の、直したい、いや直すべき箇所に赤ペンで思いっきり書き込んでいきます。これで、現状を捨てて新しい表現にジャンプアップする覚悟が決まります。

 ◉ひとまとまりのメデァとしての一貫性
インフォグラフィックスの修正、文章の校正・訂正、レイアウトの調整など、一通り赤字を入れれば、これが次の工程の指示書、設計図となります。
時間がないので、Illustrator、Photoshop、InDesignを往き来しながら、粛々と修正作業を進めます。
そして半日後、なんとか「一旦決着」と思えるところまでたどり着きました。

・表紙
何かもの足りないなぁと、色を変えたり、場所を示す記号を加えたりと試行錯誤の結果、タイトルから地図上に伸びる矢印を加え、決着としました。ワンポイントですが、ちょっとしたことで印象が大きかかわり、キャラが立ちました。

・2-3ページ

図にタイトルをつけた。
地図のベースカラーを他のページに合わせた。
スケッチの画質調整(薄くて見えない→Photoshopの「トーンカーブ」を使用)
スケッチのレイアウトを変更し、円形の枠に収めた。
地図からの引き出し形の表現を他のページと合わせた。
本文のコラムをひとつにまとめた。
ページ番号をつけた。

・4-5ページ
図にタイトルをつけた。
スケッチの画質調整。
スケッチのレイアウトを変更し、円形の枠に収めた。
ページ番号をつけた。

・6-7ページ
図にタイトルをつけた。
引き出し罫の使い方とスケッチの配置がイマイチだったので、全ページの表現をふまえて作り直し。スケッチを丸で囲んで引出し罫と繋ぐ方法はこのページで考え、2-3ページにも反映させた。
スケッチの画質調整。
スケッチのレイアウトを変更し、円形の枠に収めた。
ページ番号をつけた。

・表4
見出しの変更(まだしっくりこない・・・)。
ページ番号もつけたけどまだ迷い中。

文章はまだ納得いっていないが、レイアウトはほぼ決着、ということで一区切りとしました。これにて全てのミッション完了です(ふぅ)。

2020年7月14日火曜日

やってみた⑰:m-3 その7:実際に綴じてみた

メディアデザインにおいて、完成に向けての最終チェックは、必ず実際の(本番の)メディアに乗せて行う、というのが定石です。
今回のmissionは冊子制作なので、内容がまとまったところで実際に冊子の形にして確かめる、というプロセスを踏んでおきたいところです。画面でみている状態と、冊子として手に取ってパラパラとページをめくる状態とでは、内容の受け止め方は全く変わってしまいます。
A4サイズの冊子を製本できる機材なんて家にないよ?それはごもっとも。それでも確認する方法は色々あるはずです。可能であればぜひ、このステップを踏んで見てくださいね。
(※A4サイズでページ単位に印刷さえできれば、テープなどで貼って組み立てられます。こうした手間が、あなたのデザインスキルの糧となるのです)

で、やってみました。

こんなステープラーを使って綴じました。便利です。


うむ、全体の流れはいい感じです。ちょっと説明不足かな。あ、ノンブル(ページ番号)を入れ忘れた・・・。あ、ここも。あ、あそこも。・・・見れば見るほど直したいところが。そう、これがプロトタイピングの効果です。

他の業務も考えると、あと半日くらいで決着をつけねば。がんばります。

プロトタイプ1号も綴じてみました。
このようにモノとして資料が残っていると、いろいろな場面で重宝します。

やってみた⑯:m-3 その6:インフォグラフィックス

冊子に用いる図版類について、手描きにするか、イラレで描くか、ギリギリまで迷いましたが、イラレで勝負(!?)することにしました。

表現のアイデアとして、見開き3セットを同じレイアウトで配置したいと思いました。ただ、1回目と2回目のフィールドワークはエリア全体を表示しても成立するのに対して、3回目のフィールドワークだけはエリア全体を対象としてはいないので、大丈夫かなという懸念も。こういうときは、考えているだけでは判断がつかないので、とにかくひとまずかたちにしてみる、というのがデザイン系のアプローチでは重要です。

で、やってみました。

◉インフォグラフィックスの積極的活用

私は、グラフィックメディアのデザインは基本的に図解だと思って取り組むことにしています。今回ももちろんこの方針で更生していきます。

表紙
地図をベースに、函館市内のランドマークとの位置関係と町の大きさを図で示しまた。

2-3ページ
1回目のフィールドワークの2つの視点、すなわち城郭としての町の中へのアクセス経路と発見したモノのスケッチを、地図と組み合わせて表現しました。これは比較的うまくまとまった気がします。

4-5ページ

悉皆調査で確認した各公園の遊具を一覧するための表を地図と組み合わせてみました。スケッチを表の中に埋め込んだのですが、これはもうちょっと検討の余地ありです。

6-7ページ
町の中央を貫く遊歩道を歩いて発見したコトを、地図上にマッピイングしてみました。スケッチと対応させてみたのですが、引き出し罫の並び方が今ひとつなのと、スケッチ画像の処理が美しくないので、再考の必要ありです。

全体の見栄えや並び方はまずまずだと思うので、ディテールを詰めて完成度を上げていきたいと思います。

m-3:ヒント3-d:データの書き出し(InDesign)

InDesignでは、印刷物の入稿などを想定して、ドキュメントファイルとこれにリンクされている画像や図版などを一式まとめて、フォルダに書き出す機能が用意されています。
mission-3課題提出に当たっては、この手順を踏んで、素材一式も一緒に提出してください。

完成したドキュメントを開いた状態から
「ファイル」→「パッケージ...」
選択するとこのような画面が。
ここは慌てず、よく確認してください。
この例では「リンクの未更新1」となっています。
一度キャンセルして、確認してみます。
イラレのファイルが更新されていませんでした。このウィンドウの下部、くるくる矢印のボタンをクリックして、このイラレファイルを最新のものに更新します。
「!」メッセージが消えました。
では最初から。「ファイル」→「パッケージ...」
大丈夫そうです。
「パッケージ...」ボタンをクリックすると、保存先を指定するウィンドウが開きます。
保存先を指定し、フォルダ名なども確認して「パッケージ...」ボタンをクリック。

こんなファイル構成で書き出されます。
拡張子inddがInDesignのファイル
Linksフォルダに、ドキュメントで使用しているリンクファイルがまとめられます。
PDFファイルもついています。

inmlは古いバージョンのInDesignで開く時のためのファイル
Document fontsは標準フォント以外でこのドキュメントに使われているフォント
これらは印刷会社にデータを渡すときに必要な場合があります。

さて、提出はPDFデータとしていましたが、WebDavにはこのようにパッケージ化さられた内容全てをアップしてください。
後日、教員の方で作品をまとめる場合に備えるためです。
ハンドルネームのフォルダ/パッケージ化されたフォルダ/パッケージの内容群
となるようお願いします。

やってみた⑮:m-3 その5:考えながらかたちにする

ラフスケッチを設計図に、InDesignで形を整えてみました。

3回のフィールドワークそれぞれのまとめは、イラレで描き起こしました。手書きのままでも良かったのですが、受講生に向けたサンプル、という意味合いもかねて、あえてやってみた感じです。
基本構成は左閉じ、横組み、本文は2段コラムでレイアウトしています。LATCHを意識して、構成しています。
全体は時間軸(T):フィールドワークをやった順で、町の理解が深まっていったから。
各ページは地図(L):エリアに何があったかを示したかった。
表示素材はできるだけ手書き:自分で調べて他に入れた情報であることを明示したかった
同じサイズの地図をベースに、3回分それぞれのフィールドワークで得た情報をマッピングしています。
・・・というように、自分の表現を説明するときに、利用した考えたや意識的にここなったことを説明する、というのもデザインスキルだと思います。

前回のバージョンと同様、この状態でも提出できるくらいまではつくりこみました。
この後ですが、まだ4-5ページの図が未完成なので、まずこれを仕上げます。その上で、全体をもう一度見直し、完成度をあげたいと思います。
締め切りまで後3日。焦りますが、なんとか頑張ります。

2020年7月13日月曜日

やってみた⑭:m-3 その4:かたちにしてから考える

◉方針を固めて覚悟を決める
コンセプトに合わせてラフに情報を配置した冊子バージョン1を眺めながら、数日間、落とし所について悩みました。
プランA:匿名性を前提に、架空の物語としてまとめるか、
プランB:せっかく集めたデータを、実体験として仲間に伝えたい、見て欲しい
プランC:フィクションとノンフィクションの中間のどこかに落とし所はあるのか

プランCをめざして数日間モヤモヤしていたのですが、決められませんでした。というか、可能性があり過ぎて、このギリギリのスケジュールではじっくり練る余裕がありません。そこで割り切って、プランAかプランCのどちらかに振り切って進めることにしました。

プランAも、実は可能性がありすぎて、どこまでやれるか迷うところ。
今回のコンセプトである「昭和の天空の城」企画は、架空の町を設定して特徴を解説していっても、うまく表現できる気がします。また、全国各地に似たような状況の町があるはずで、抽象化したほうが共感も得やすいかもしれません。
(90年代に『カノッサの屈辱』という、超イケてるテレビ番組がありました。世界史のドキュメンタリー風に現代社会の流行や出来事を切る内容。この手を使ってみたかった。)
ただ、せっかくフィールドワークで得た様々なデータの具体性が、架空の物語に変換することで失われてしまうよなぁ。
ということで、今回は覚悟を決めて(こっそり割り切って・・・汗)、プランBで仕上げることにしました。

自宅の場所は示さず、町全体を眺める旅行者の視点でまとめてみることにします。
さて、やってみっか!

◉サムネイルに戻って構成を固める
仮組みレイアウト(InDesign)を眺めながら、もう一度サムネイルを書いてみます。前回よりも具体的に、どこに何を入れるかもある程度イメージしながら。
え? ラフすぎるって??
いいんです。自分の頭の中を整理するための表現ですから。呟きも書き込んでおくと、後で見直したときに、その時の状況が脳裏に蘇りますよ。
(人に見せたりすることもあるかもしれないので、罵詈雑言は程々に・・・汗)

しばらく眺めて・・・「よし、やるぞ」と覚悟を決めました。
ここからはInDesignで直接作業します。このラフスケッチが設計図です。

受講生の皆さんもがんばってくださいね。面白いフィールドワーク報告冊子をたくさん生み出しましょう。

m-3:ヒント3-c:情報の組織化

今回は、3つの課題を完遂するための、受講生の皆さんに向けた最後のアドバイスです。

◉課題を自分のことばで再定義する
mission-3の課題でみなさんに期待していることを、ひとことでまとめると、以下のようになります。

集めた情報を 再構成して メディアのかたちにまとめて 誰かに届ける

おっと、わたしがやってしまいました。言いたいことは、このように、自分がこれから何をするべきか/何を期待されているかを、自分のことばで簡潔に説明してみよう、ということなのです。
授業に限らず日常のあらゆる課題は、ただ与えられた命令/作業ではありません。あなた自身が、自分ごととして、対象としている相手にとって良かれと信じていることを、提案や可能性として表現というかたちで示すために、一度自分のことばで説明し直す習慣をつけてください。少なくとも私たち(未来大のデザインコース)が提供するデザインの授業は、基本的にこのような考え方で、演習課題を提供しています。ただ作業としてこなすのではなく、自分と相手の問題として、何をすべきか考えなら行動する。そのような態度で臨んで欲しいのです。

上記の定義をよく見てください。
集めた情報を:mission-2でやったことです。
メディアの形にまとめて:mission-1でやりましたね。
再構成して、誰かに届ける:これがmission-3での新たな挑戦です!

◉情報の組織化
mission-3で学んで欲しい「再構成」について補足します。
「情報の組織化」の方法は6つ、です。LATCH+Iで覚えましょうか。
L:location 位置、場所 (地図、フロアガイド)
A:alphabet アルファベット順、アイウエオ順(辞書、名簿)
T:time 時間軸(年表、操作マニュアル)
C:category カテゴリー分類(商品陳列、動物園)
H:hierarchy 数量、重要度(ランキング、大きい順)
(I:intuition 直感)
今回の課題は、LATCHの中のいずれかを手掛かりに、ページを構成していく練習です。
地図上で説明(L)、歩いた道のりを順に紹介(T)、驚きの発見ベスト10(H)など、あなたが集めたデータ、情報を、どのような方法で誌面に配置していくのが最適か、じっくり悩んで、急いで美しく、冊子に仕上げてください。

ちなみに、『I』はネイサン・シェドロフがワーマンのLATCHに付け加えたもの。これはかなり高度な技なので、今回は使わないように。ただ、表現は自由なので、表現者の思いに委ねる、という組織化の方法も選択肢に含まれる、ということだけは覚えておいてください。

詳しくは・・・本を読んでくださいね。情報デザインを学ぶ人は必読です。
※リチャード・S・ワーマン『それは「情報」ではない。―無情報爆発時代を生き抜くためのコミュニケーション・デザイン』東京電機大学出版局、2004
※ ロバート ヤコブソン編『情報デザイン原論: 「ものごと」を形にするテンプレート』東京電機大学出版局、2004


◉誰のためのデザイン?
「ユーザセンタードデザイン」とは、ユーザの言いなりになることではありません。あなたもユーザのひとりだということを常に意識してください。これは、デザイン成果物についての責任を取る覚悟でプロジェクトに取り組みましょう、ということです。
具体的に読んで欲しい人をイメージしましょう。
誰かを喜ばせることが、他の誰かを傷つけることもあります。直接の読者の周辺の、他の読書の存在も意識しましょう。
あなた自身が読者としてこの冊子を手に取ったときに、意図どおりに楽しめるかをイメージしましょう。
(・・・これらは簡単ではありません。もうできているとしたら、あなたはスーパー編集者!)

さあ、ラストスパートです。楽しんでクライマックスを迎えましょう。

2020年7月9日木曜日

やってみた⑬:m-3 その3:プロトタイピング

サムネイルで確認した構成に沿って情報の量やバランスを確かめるため、InDesignで仮組みをしてみました。
▲表紙
▲p2-p3
▲p4-p5
▲p6-p7
▲表4

これから全体の流れ、個別ページの誌面の構成を検討しながら、ブラッシュアップしていきます。まずは、この状態をじっくり眺めながら、コンセプトとの隙間を埋めていきます。まずは中身、そして表紙、最後に表4、という手順かな。

◉アドバイス
授業課題としては、(最後の手段として)この状態でも出せるようになりました。締め切りのある仕事では、途中で時間切れになっても最低限の成果は提示できるようにしておくことが、プロとしての心得です。「間に合いませんでした」はどんな理由があっても言い訳にしかなりません。
途中のトラブル発生も想定して、デザインプロジェクトを遂行し、締め切りまでに結果を出す、ということもこの授業で学んで欲しい体験です。

m-3:ヒント3-b:InDesign

mission-3では、Adobe InDesignを使った表現にも挑戦してもらいます。
アプリの使い方説明は、キリがないのでここでは簡潔に。
今回の課題mission-3を遂行するための設定に絞って説明します。

◉ドキュメントの設定
InDesignを起動
 ↓
「新規作成」を選ぶと設定ウィンドウが開く
 ↓
「印刷」タブを選んで、制作するメディアのかたちを整える

A4、方向=縦、綴じ方=「A」左綴じ、ページ数=8、見開きページ、開始ページ番号=1

「マージン・段組…」ボタンをクリック

マージン・・・ここは後でデザインに合わせて調整可能。目安として数値を示します。
(「すべての設定を同一にする」チェックボックスはオフに)
 天:10mm
 地:25mm
 ノド:10mm
 小口:10mm
段落・・・数:2 間隔:10mm 組み方向:横組み

OK
※間違ってウィンドウを閉じてしまった場合は、
「レイアウト」→「マージン・段組…」で開けます。

ここから作業開始。

◉文字に関する入力と設定
「InDesign 文字入力」などで検索すると、たくさん情報が出てきます。
基本的な操作の流れは、
文字ツールを選択→横組み文字ツール→誌面上にコラムを作る→文字を入力
です。
文章は別のアプリで作成し、InDesignには流し込んで整えるだけ、にすると効率よく編集できます。

Illustratorと同じUIの文字設定/段落設定を使って、文字の設定がきます。それぞれの設定の名称と数値には意味があります。この機会に調べてみてくださいね。

InDesignでは、誌面で用いる文字について、ワープロソフトなどと同じように、本文、見出しなどにあらかじめ書体設定をした上でレイアウト作業ができるので、情報量の多い書籍などの編集もサクサクとできるようなツールになっています・・・が、今回はこの辺りは省略。

◉オブジェクトの配置
画像やイラストなどは、外部に用意したファイルを(読み込んで)配置します。
「ファイル」→「配置」
 ↓
使用する画像ファイルを選んで、「開く」
 ↓
サムネイル画像が、マウスポインタについてくるので、
画面上の適当な場所でクリックして仮配置

「選択ツール」で、画像を配置予定の場所にドラッグ
 ↓
「選択ツール」のまま、shiftキーを押しながら画像のフレームの角をドラッグして、サイズを整える
この操作では、フレームのみが変形されます。
 ↓
フレーム調整オプションで「内表をフレーム似合わせる」ボタンを押せば
(「オブジェクト」→「オブジェクトサイズの調整」からも選択できます。ここで細かい調整も可能)

はい、配置完了。

画像のトリミングやフレームの縦横比率を変えたい場合は・・・自分で調べてみてください。Adobeのチューリアルを始め、親切な説明サイトがたくさんあります。