情報デザイン基礎演習 2013: 2013

2013年7月27日土曜日

最終回

15週、おつかれさまでした。

院生の私たちからみると初々しくて毎回ほのぼのしていました。
そして！若い！と！
私たちTAも頑張らなきゃですね！

最後の挨拶はさらっといきましょ。

この講義、そしてこのブログが
みなさんの今後に役立つことを願っています。
ありがとうございました。

2013年7月27日
河西真柚子　酒井芳樹

2013年7月22日月曜日

第13回、第14回　講評会

おはようございます。ゆずこです。

前回は山崎先生、田邉先生と安藤先生によるパネル講評会。

今回は田邉先生によるポートフォリオ講評会。

ということで本日は

特に重要と思われるコメントをまとめました。

グラフィックのデザインについて

・プロセスを図化して入れる

・色を使いすぎない、色使いを整理する、ポイントだけに色を使う

・タイトルにもこだわる

・情報のグループ分け(線で区切らないで余白で区切る)

・流れがわかるようにする

・手描きのときにあったインパクトや温度をそのままパソコンでも表現できるといい

・イラストや写真と文字のリンク

・画像の開きかたを揃える(つめすぎない余白をあける)

・余白を設けてバランスをとる

ポートフォリオのまとめかた

・修正前と修正後のものを左右に並べる

・アピールポイントのページを設ける(追加ページにも力を入れる)

・資料をいかに編集して載せるか

・パソコンでまとめる場合には印刷して目で確認すること

・目次を入れる

文字のデザインについて

・装飾の共通性

・文字の大きさと行間を調節する、文字の大きさの1.5倍はとる(15ptなら22.5pt以上)

・文字の大きさの強弱

・小タイトルの文字の大きさ、文章の文字の大きさは揃える(同じレベルの文字の大きさを揃える)

・手描き風のフォントをタイトルに使う

・説明文の文字のサイズは小さめにする

今日のちょこっとアドバイス

「フォントの選び方のはなし」
イラストレーターで仕上げる場合。
タイトルにのフォントは遊びを入れたもの
中の文章はオーソドックスなゴシックのフォント(小塚ゴシック、AXISなど)を使うといい。
フォントの大きさはは文章のレベルごとに揃える。

私はいつも

見出しの文字の太さはM、文字の太さはLを使っています。
文字に色は基本的に使わないです。見出しには使いますが。

たとえばこういう感じにしてます。

説明文で一番伝えたいことを見出しとしてまとめて

文字を太め、大きめにして強弱をつけています。

このようにすることで言いたいことがはっきりとしますし、

さっと読みたい人にはさっと読めるように

じっくり読みたい人にはじっくり読めるように

することができます。

「まとまりを見せるためのはなし」

最初に画像を見てください。

線なしと線あり

左は私のポートフォリオ、右はそれの文章に枠線をつけたもの。

どうでしょうか。右の方が少し見づらくありませんか。

どうして見づらいか、それは線が増えたことによって視覚的な情報が増えたから。

このように線をつけることはまとまりを見せるという点においては良いのですが

見やすさの点については悪くなってしまいます。

なので空間をあけてまとまりをつけたほうが見やすさの点においては良いです。

最後に

今日は2つのことをお話ししましたが、

変わったフォントや線を使うなというわけではありません。

大切なのは使い分けです。

次回予告

次回は7月27日(土)です。ポートフォリオ最終評価です。

優秀なポートフォリオは今後、オープンキャンパスなどで展示しますので

27日まで残り数日ですが、一部でも良いのでクオリティを上げてくださいね。

それでは！

2013年7月8日月曜日

第12回　情報プロダクトの発表会

最近暑くなってきましたね。
もうクーラー無しでは生きていられない、TA酒井です。

今日は情報プロダクトの発表会

みんなでペーパープロトタイプの展覧会＆投票会

本日のベストオブペーパープロトタイプ！！
(前半組は都合上行えませんでした)

ポイントまとめ
■表紙も工夫する(どんな作品なのか臭わせる)
■ペーパープロトタイプと料理がどんな風に変化していくのかを分かりやすくする
■どうやって使うのか、ペーパープロトタイプ以外の物も利用して伝わりやすくする
■ストーリーの中に楽しさ要素を入れる
■最後のオチも重要！

次回予告
・今回のパネルを含んだ今までのパネル、計４枚を提出
・今回はイラレなどPCでの制作も可
・どのようなテーマであるか、タイトルを記載する

情報プロダクトのパネルはプロセスとペーパープロトタイプ、パラパラアニメなど情報量が多いのでどうやって分かりやすく見せるかかポイントになります。

このブログにパネル制作のポイントをいっぱい書いてあるので、参考にしてみてねx

酒井でした。

2013年7月1日月曜日

第11回　ペーパープロトタイプを使用したアニメーションの検討

どーも、ゆずこです。

今日は来週の課題のために相談会です。

ペーパープロトタイプは機能のポイントとなる部分に色を付けたり、ボタンを付け加えたりすることで魅力的なプロトタイプになります。(ロゴを付けるのもいいかもね。)

必ずしも全て紙でなくてOKです。
自分のプロトタイプがより魅力的になる素材を追加して制作してください。

ポイントのまとめ
・機能のポイントになるところに色を付ける
・スイッチや調節ダイヤルを付ける
・製品のロゴを付ける
・魅力的な名前にする
・背景もこだわる
・表示画面も入れる(入れ替えられるようにして動きを表現する)
・回っているようすや音が出ているようすも入れる
・表現しやすい素材を使う

来週提出するもの
タイトル+ペーパープロとの写真+12コマのアニメーション=14コマ

2013年6月24日月曜日

第10回　ペーパープロトタイピングを学ぶ

こんにちは！ゆずこです！

今日はパネル提出でした。

アニメーションのパネルはみんな個性的ですね〜♪
世界観があって素敵でした。
(最後にパネルのアドバイスがあるのでお見逃しなく！)

というわけで本日は、ペーパープロトタイピングを学ぶ。です。

ペーパープロトタイピングとは紙でプロトタイプを作り、検証することです。
この方法を使うと発案段階で簡易的に作って製品やシステムの検証ができるので
Webサイトの画面の検証などにもよく用いられます。
相手に実際の形やアイデアを説明をするときに便利です。

ポイントは実際のサイズより大きめに作ることです。

今回はこの方法を使って食べるためのツールをつくって
それぞれの絵コンテに合わせて擬似体験をしてみましょう。

来週の提出物

1.どのように料理を楽しむのか、4コマの絵コンテを書く

2.料理を楽しむための道具のサムネイルスケッチを描く

3.ペーパープロトタイプを作り、写真をレポートに貼る

ペーパープロトタイプも持ってきてください。

最後に！
パネルの最終提出が近づいているので

まとめるポイントについて今日はアドバイスです。

アドバイス！
「説明文を端的にまとめてフレーズをつくるべし！」

みなさんパネルでやりがちなのがプロセス、コンセプト、アイデアなどのことばを大きく書いてしまうこと。

パネルを客観的に見てください。

これらのことばってそこまで重要ではありませんよね。

ここでどうしたらいいか！ポイント！

説明文を端的にまとめてフレーズにすることが重要です(画像参照)。

画像を見てもわかるようにこのフレーズを読むだけで下にどんな内容が書いてあるかわかりますよね。

今日提出があった「和装四季」のパネルを例に挙げて説明すると

コンセプト
時の流れを四季の着物で表現する
日本の四季は世界中でも美しいとされている。その四季を着物におさめ、全身を見せることで時間が流れていることを表現。

それぞれの重要度を表すと

「コンセプト」＜「説明文」＜「端的にまとめたフレーズ」

となります。

このフレーズの方法は雑誌や新聞でも使われています。
今度ちょっと気にして見てみてください♪

伝えたいことを吟味して、本当に伝えたいことだけを載せるというのもデザインの重要なテクニックです。

少なくても言いたいことは伝わらない

かといって多すぎると読んでもらえない

この微妙なボーダーを見極めてまとめあげてみてください。

(これまで話があったことは第７回と第９回を参照してください。)

このアドバイスがみなさんのお役に立てますように！

では！また！

2013年6月17日月曜日

第９回　時を感じるアニメーションの制作

おはようございます。
むしむしじめじめしてますね。
じめじめ気分をふっとばしてがんばりましょ！

さて！本日は「時を感じるアニメーション」の提出です。
この課題のポイントは
1. 限られたコマ数の中で起承転結を表現する
2.パーツ化して綺麗なアニメーションを作る

ここでちょっとしたテクニックをご紹介します。

1.壁にはって撮影するべし！
(正面から撮影しやすくなります、光も均等に当てるとよいです)

2.Photoshopのイメージ→色調補正を活用すべし！
(暗くなってしまった写真も綺麗に補正されます)

3.角度のズレはPhotoshopの「ものさしツール」を活要すべし！
(ものさしでピーッと引いた後に上のレイヤーの角度補正を押すと…？)

その他なにか質問がありましたらブログのコメントへ〜♪

いくら綺麗にできていても綺麗に見せていなかったら目に止まりません…。
綺麗な作品を綺麗に見せてワンランク上をめざしましょう！

全体を見て最終提出までの直しのポイントまとめ
・アニメーションを綺麗に見せる工夫をする
・線ではなくしっかり色を付けて表現する
・えんぴつ書きだと見えないのでペン等でなぞる
・しっかり正面から撮る
・色の塗りを丁寧にする

来週の課題
このアニメーションをA3のパネルにまとめて提出です。
・初めて見た人にわかりやすく伝える
・最終版がボールペン書きや鉛筆書きは不可
・テーマの解説を入れる
・作るプロセスを見せる( 資料、絵コンテ、写真など)

2013年6月10日月曜日

第８回　アイデアを視覚化する

こんにちは、TAの酒井です。
久しぶりに投稿します。
普段は歩きまわってるので、とっ捕まえていろいろ聞いちゃってください。

第一課題：12コマの絵コンテを描く。

４コマの絵コンテを基に、肉付けをして12コマの絵コンテを作ります。

アニメーションのポイントは『起承転結』を意識したストーリー作りだと思います。

12コマの中で見た人を”クスッ”と笑わせられるようなストーリーを考えるといいと思います。

4コマの絵コンテにどうやって肉付けをして

より豊かな表現になるようにしましょう！

第二課題：A5サイズでアニメーションとなる画面のスケッチを描く。
提出する課題のアニメーションの画面スケッチを描きます。
スマホの枠にいれるとリアリティが増してイメージがつきやすいです。
背景や人などを別々で作って組み合わせるのもひとつの手ですね。
効果的で魅力的に作れる方法を楽しく模索しながら作ってください。

綺麗に枠をつけると良いです。

授業で紹介した多摩美と東芝でやった待受画面のプロジェクト
http://www.toshiba.co.jp/product/etsg/cmt/kankyou/sangaku/index_j.html

来週までの課題
・携帯アプリの画面スケッチを描く
・12コマまたは16コマのデジカメアニメーションを作る
・写真を撮って、pdf形式で授業支援システムに提出

ポイント！
アニメーションの起承転結を意識する
パーツ化して綺麗なアニメーションを作る

2013年6月3日月曜日

第７回アイデア出しの方法を知る

じめじめな梅雨の到来ですね。

今日はとても寒くて何着ようか迷いました。

こんにちは、ゆずこです。

今日で７回目！情報デザイン基礎演習の講義も残り7回となりました。

デジカメアニメーションのパネルの提出です。

ずらーっと並んでるパネル

この中からパネルを一部、紹介したいと思います。

自分がどこにこだわってアニメーションを制作したかが伝わってくる
(絵コンテやこだわりの一枚など)
ちょっとした工夫を入れてありました　　↓
この分、他の人より載せられる情報が多い↓

黒いところをめくると
アニメーション17コマが出てきます！

資料や機材についても書かれている

絵コンテと実際の写真が対比されている

アニメーションが全て見えるようになるとよい

アニメの全コマが入っている

どの部分をピックアップしたかがわかりやすい

ピックアップしたコマについて工夫点と改善点がある

写真や絵コンテが鮮明になるとよりよい

テーマや撮影の設定までのプロセスが記されている

ステップ分けがわかりやすい

世界観を出せるようになるとよりよくなる

おでんの世界観が表現されている
写真も鮮明できれい
絵コンテを鮮明にするとよりよくなる

絵コンテの部分がたこ焼き器をモチーフにしていていい

アニメーションの流れもたこ焼きを焼く動作とリンクしていい

タイトルや本文でフォントを使い分けている

これによってタイトルのフォントがより生きている

キャラクターのデザインがいい

コンセプトや撮影方法、撮影でのこだわりがわかる

こだわったところの写真をもう少し大きく

写真がもう少しきれいになるとよい

それぞれのステップにアイコンがあるのがよい

全体的に柔らかい雰囲気で統一されていてきれい

実際に自分がやった部分(絵コンテなど)をもう少し入れられるとよい

イメージイラストがいい

アニメーションの流れがわかりやすくなるとよい

全体がきれいにまとめられている

絵コンテやことばに対応させて写真を使うとよりよい

作品のコンセプトに合わせて写真が飛び出していたらよかった

他にも魅力的なパネルはあったのですが時間が限られているのですみません。

コメントが欲しい！という方はブログにコメントください。
または授業後に相談してください．
パネルをまとめるポイントについては第6回も参照♪

それでは本日の講義の開始です。

課題１：手で描く練習をしよう！
参考書は寄藤文平さんのラクガキマスターです。
A4の紙に手で描く練習をしてみましょう。
10cmの線を100本描く→5cmの四角を描く→5cmの丸を描く→立方体を描く

とにかく描く！描く！

たくさん描いて自分のものにしましょう！
毎日やれば確実にうまくなります！

課題２：アイデアを出してグループわけしてみよう！
1.ポストイットに「時を感じるとき」を書き出してみましょう。

どんどんアイデアが出てきます

2.チームで共有してみましょう。

チーム内で発表

3.似たアイデアをグルーピングしましょう。

アイデアをまとめる

4.テーマを決める

5.絵コンテ(4コマ)を描く

来週の提出レポート
1.時を感じること、時を感じるもの各メンバー8個以上書き出す
2.その中から3点程度を選んで、グループで1点テーマを設定する
3.テーマより時を感じる、4コマの絵コンテを書く(各メンバーで3点以上)※授業中に作成
4.時を感じる写真や雑誌の切り抜きを準備する(3点以上)

2013年5月27日月曜日

第６回　魅力的なプレゼンテーションをする

こんにちは！だんだん暑くなってきましたね〜。

今日はいよいよデジカメアニメーションの発表会です！

(プレゼンテーション中…)

私も2年生のときにアニメーションやりました。

弱肉強食というテーマで。…あの頃が懐かしいです。

というわけで！

発表お疲れさまでした！

どの作品も遠近法や背景、服装を活かしていてすてきな作品に仕上がっていました。

来週までの課題は

食べるデジカメアニメーションを作る活動で行ったことを、

初めて見る人に分かりやすく伝えるパネルにする。

です。

撮影したアニメーションだけでなくプロセスも魅力的にまとめてきてください。

ポイントは以下の3つです。

・自分の作品をわかりやすくまとめてタイトルにする

・誰がどこでどのように食べるのかなどテーマの解説をする

・作るプロセス(絵コンテ、撮影風景の写真など)も一緒に載せる

第３回　グリッドシステムを使ってレイアウトを考える
を思い出しながら綺麗にまとめてください。

今日の映像で伝えきれなかったことをたっぷり詰めた
魅力的なパネルを楽しみにしています！

ではまた！

2013年5月20日月曜日

第５回　コマ撮りアニメーションを撮影する

コマ撮りアニメーションの絵コンテを描いてみよう！

コマ撮りアニメーションとは…

このように「静止している物体を1コマ毎に少しずつ動かしカメラで撮影し、あたかもそれ自身が連続して動いているかのように見せる映画の撮影技術(Wikiより)」
のことです。
別名ストップモーションアニメーションです。

アニメーションを撮る前に絵コンテを描いてみましょう。

絵コンテがなぜ必要なの？
・映像的アイデアをまとめるため
・映像表現を役者、撮影者、協力者などに伝えるため

どうやって描いたらいいの？
ポイント1：人物の顔は◯と＋で表現する
　顔の位置と大きさ、顔の向き

ポイント2：人物の身体はおおまかに表現する
　特徴的な動きはしっかり表現する(e.g.手を上げる表現)

ポイント3：シーンを表現する
　人物の位置、背景の位置、カメラの位置を明確にする

課題1：4コマで人間の動きを表現する
・4コマの絵コンテを描く
・二人一組で撮影

絵コンテができましたか？
それではアニメーションを実際に撮影してみましょう！

いい動きしてますね

ポイント1：映像の基本はぱらぱらマンガ
　仮想運動で静止画が動いているように見える

ポイント2：パントマイムで人物の動きを表現
　声や説明はないが動作で見せる

ポイント3：見立ての活用
　見立てを活用して楽しく見せる

ポイント4：遠近法や錯覚の活用
　遠近法を活用して楽しく見せる

ポイント5：背景をシンプルに
余計な背景が邪魔をする

さあ、応用編やってみよう！

課題2：4コマでバナナを食べるアニメーションを作成する
・起承転結のシナリオを作成
・4コマの絵コンテを描く
・デジカメで4コマの撮影
・完成したアニメーションを見てみる

恥じらいを捨てて実際に動いて！

動かないとコツも見えてこないです！

全力な人がいました

来週提出の課題
16コマのアニメーション！

「食べる」ことをテーマとした、デジカメを使った簡単なコマ送りアニメを制作。

・グループで制作
・メンバー全員がうつっていること
・自分たち意外は使わないこと
・服装、場所を工夫する
・16コマ完結

アニメーションは授業支援システムに提出してください。

提出締切：5/27(月)8:00

データサイズ：は2M以内(zip または PDF)

その次の週(6月3日)は
アニメーションのプロセスをA3のパネルにまとめる。
プロセスもあらかじめ記録しておくとあとでまとめやすいです。

来週の発表が楽しみですね！
ではまた！

2013年5月13日月曜日

第４回　デジカメアニメーションを学ぶ

こんにちは。

飛行機パネルの課題おつかれさまでした。
個性あふれるパネルがいっぱいあって、見ていて楽しかったです。

情報が整理されていたり、プロセスが分かりやすかったりという要素も必要不可欠ですが、
飛行機を作ったり、遊んだりしている楽しさが伝わるともっと魅力的なパネルになると思いました。

選出作品↓

さて、今週からはグループワークで新しい課題が始まります。
今回の課題は、「食べること」をテーマにした、デジカメを使ったコマ送りアニメーションの制作です。
何も道具を使わずに自分の身体で表現したストーリーをデジカメで撮った写真を並べて一つのアニメーションを作ります。

-課題の条件-
・グループで制作
・メンバー全員がうつっていること
・自分たち意外は使わないこと
・服装、場所を工夫する
・16コマ完結

そして、今週は身体を使った表現の練習ということでパントマイムのワークショップ。
・コップを飲む動作
・思いモノを押す動作
をパントマイムで表現します。

パントマイムの表現をする上での以下の７つプロセスをふまえて行いましょう。
-7つのプロセス-　　（壁を押す時の動作）
・見る　　　　　　　(壁を見る)
・準備　　　　　　　(手を出す)
・コンタクト　　　（壁に触る）
・クリック　　　　（壁を押そうとする）
・アクション　　　（壁を押す）
・アンクリック　　（壁を押すのをやめる）
・戻す　　　　　　（手を戻す）

次回までの宿題
グループで決めた「食のテーマ」にに関する情報を集めて各自レポートを提出
観察、Webや本、インタビューなどを活用して情報収集して来て下さい。
-レポートのポイント-
・「面白さ」を発見して書く
・たくさん集める

面白い発見をいっぱい集めてきてくださいね！

2013年4月22日月曜日

第３回　グリッドシステムを使ってレイアウトを考える

授業の開始です。

こんにちは。山崎先生とTA河西、TA酒井ミラノから帰ってきました。
今日からよろしくお願いします。

というわけで今日はグリッドシステムについての講義です。

このグリッドシステム！とても重要なものです！

デザインをする上ですぐパソコンの前に向かってやってもうまくいかないです。
”手で描くこと” が大切です。
グリッドシステムも手で描いて自分のものにしてほしいです。