授業概要
野口研究室は、以下のキーワードに関連するプロジェクト／作品制作を行ないます。
ソフトウェアデザイン、インフォメーションデザイン、インタラクティブアート
基本的にはソフトウェア開発を中心に作品制作や研究を行います。作品としてはスマホ／タブレットアプリ、サウンドヴィジュアライザ、VJシステム、A.R.などがあります。Max/MSPやQuarz Composerなどのヴィジュアルプログラミング環境も含みます。
学生への要求条件
やる気がある人。作品制作の基盤としてインフォメーションデザインの実習とプログラミングの実習が中心ですが、習熟度は問いません。ゼミでのカリキュラムは基礎的なところから復習します。アイデア／企画力と実現能力の両方を高めたい人を希望します。
習得する能力の目標
- 芸術的な感性と工学的な技術開発能力の洗練
- 授業内での発表やディスカッションによる、プレゼンテーション能力の洗練
- 自身のプロジェクトのリサーチや文献研究を通した、リサーチ力の養成
- 自身でイベントを企画/運営することによる、プロデュース能力、ディレクション能力、社会性の養成
目標とする人材
頭も手も体も動く人
授業内容
今年度は前半は、1, 2年次の復習としてProcessingを使ったプログラミング基礎実習、openFrameworksを使った応用実習を行う。後半には、インフォメーションデザインの基礎的な要素となる色彩とタイポグラフィ（文字組のデザイン）を行い、その結果としてのダイアグラムデザイン（図のデザイン）を行う。
最終的に上記の実習を元にした作品を制作する。
さらに、後期にはゼミ展を開催する予定です。予算はゼミ費から出ますが、この展示運営における予算編成、広報関連の実務を通して、自主的に表現の場を作り、社会との接点を探ることの意味を考えます。
http://www.tdwa.com/
教員の専門領域
以下のサイトを参照のこと
http://r-dimension.xsrv.jp/
教員の得意分野
＜領域＞
ソフトウェアデザイン全般、メディアアート全般、グラフィックデザイン（元々はこの分野の出身）、現代美術（今やっている）、都市論、文化人類学（現在、人類学者と共同研究中）
＜技術＞
画像処理プログラミング、Processing、Quartz ComposerやMax/MSPなどのビジュアルプログラミング、Objective-C（Cocoaアプリケーション）、OpenGL、C言語、PHP、MySQL、映像編集など
前期スケジュール
1.（5/12）プログラミング1(Processing)
2.（5/19）プログラミング2
4.（6/2）プログラミング4
openFrameworks2
5.（6/9）プログラミング5
6.（6/16）色彩
- ロゴのカラー研究
7.（6/23）色彩2（対面）
8.（6/30）タイポグラフィ1（遠隔）
9.（7/7）タイポグラフィ2（遠隔）
10.（7/14）ロゴデザイン（遠隔）
11.（7/21）レイアウト1（対面）
12.（7/28）レイアウト2（遠隔）
13.（8/4）最終課題講評（遠隔）
後期スケジュール
1~3. ゼミ展準備（9/8~9/29）
4. ゼミ展（10/5~10/11）
休講（10/13）
5. UIデザイン1（10/20）*対面
6. UIデザイン2（10/27）
- 企画発表
- 画面遷移図作成
祝日（11/3）
7. UIデザイン3（11/10）
- 企画発表（アップデート版）
- 画面遷移図発表
8. UIデザイン4（11/17）*対面
- ワイヤーフレーム発表
- グループ制作進捗状況チェック
9. 後期課題制作（11/24）
- ワイヤーフレーム発表（アップデート版）
- ポートフォリオ課題進捗状況チェック
10. 後期課題制作（12/1）
- デザインカンプ進捗状況発表
11. 後期課題制作（12/8）
- デザインカンプ進捗状況発表
12. 最終課題制作（12/15）
13. 講評（12/22）*対面
課題
グループ制作課題
「インタラクティブ・カラーズ」と題した展覧会にむけ、頭や体を使って色と遊ぶことができ、色の面白さ、楽しさ、奥深さなどを伝える体験型作品を制作する。
・作品形態は自由だが、プログラムは必ず使うこと。
・ターゲットを明確に設定すること。年齢、性別など
小課題1 レーザーカッター課題
Processingを使って作成したパターンをもとにして、レーザーカッターを使用してコースターもしくは本のしおりを作成する。
Illustratorなどで追加で処理をしてもかまわないが、必ずプログラミングによって作成したパターンをメインにすること。
- コースターやしおり以外のもを作りたかったら、自由に選んでもかまわない。一応、他にアイデア思いつかない人はコースターやしおりでいいが、色々な形が考えられるし、穴があいていてもいい。あまり機能性は考えなくていい。
- 使用する素材は木やアクリルなど、レーザーカッターで切れるものであれば自由に選んでいい。
- 点数自由。最低1点は作る。
- processingでのpdf出力は以下のサイトを参照する事。一旦pdfで出してからイラレでaiファイルに変換する。
- 材料は自分で用意すること。他の人と共有してもかまわない。
- 前期中はレーザーカッターの講習の目処が立っていないので、レーザーカッターで切ったものの提出は講習後にする。
小課題2 色のイメージ
色彩というものは、それぞれ固有のイメージを持っており、広く一般に知られているものもある（例：赤→情熱、白→清潔）。
それらの色彩とイメージの関係を踏まえ、与えられたテンプレートの中でそれぞれ与えられたイメージにふさわしい色の組み合わせを選び、四角形の中を彩色する。
ポイントは、「色のイメージ」、「彩度」、「明度」、「コントラスト」。
小課題3 ロゴのカラー研究
・スタディ1
赤、青、緑、黄、オレンジ、紫の中から3色選んで、1色のロゴタイプやシンボルマークを15個ずつ収集する。自分が気に入ったロゴを集める。
例：バンダイ（赤）
分析：その色が使われているロゴにどのようなイメージがあるかを分析して記述。形容詞を使う（例：清潔な、力強い、自然な）。
それぞれの色によってどのような傾向があるかを分析し、メモしておくこと。
・スタディ2
スタディ1を分析する。以下のカラーサンプルを参考にして、「色彩と形態によるロゴのイメージ分布図」を作成する。
サンプル
基本的に横軸がwarm-cool、縦軸がsoft-hard。各自、独自に対義語を設定しても構わない。
スタディ1で選んだ1色につき15個のロゴは、10個ずつに減らす。似た性格のロゴは排除する。合計30個をレイアウトする。
・スタディ3
スタディ2をモノクロにして、「形態によるロゴのイメージ分布図」を作成する。座標は「色彩と形態によるロゴのイメージ分布図」と同じものを使う。
色の情報が失われた時に、どのように印象が変化するかを検討しながらレイアウトし直す。
小課題4 タイポグラフィ
「Software Design Lab.」というロゴタイプを4種類デザインする。このロゴタイプは、以下の8種類の中から、ローマン体を2種類、サンセリフ体を2種類選ぶ。
- ローマン体：Garamond、Jenson、Minion、Times New Roman
- サンセリフ体：Avenir、Helvetica Neue、Myriad、Universe
さらに、気に入ったロゴをベースにしてアウトライン化し、アレンジを加える。この場合、Software Designに関連した要素を付加する。使用するのはグレースケールのみ。
例：スペース
例：電源
例：カップ
小課題5 ロゴのデザイン
https://r-dimension.xsrv.jp/classes_j/logo-design/
小課題6 レイアウト1
課題内容
A4横位置中央に150 x 150mmの正方形を取り、それを縦横6分割した一辺25mmのグリッドを作成する。
1. 与えられたテキストを使って、グリッドを強く意識した構成を3パターン以上作成する。
条件:
・書体はヒラギノゴシックとヒラギノ明朝のファミリーのどちらかもしくは両方
・白地に黒の文字のみを使用して構成
2. 自身でグリッドを作り、そのグリッドを使った構成を1点作成する。
条件:
・テキストは同じ
・書体、ファミリーの使用は自由
・グリッドをどの程度意識するかは自由だが、意図は明確にしておくこと
・白地に黒の文字のみを使用して構成
使用するテキスト
オラファー・エリアソン ときに川は橋となる
オラファー・エリアソンは1990年代初めから、写真、彫刻、ドローイング、インスタレーション、デザイン、建築など、多岐にわたる表現活動を展開してきました。本展は、エリアソンの代表作を含む、多くが国内初公開となる作品の数々で構成されています。自然現象を再構築したインスタレーション、光と幾何学に対する長年の関心が反映された彫刻、写真のシリーズ、ドローイングと水彩画、公共空間への介入をめぐる作品等が展示されます
●会期 2020年6月9日（火）－ 9月27日（日）
●休館日 月曜日（8月10日、9月21日は開館）、8月11日、9月23日
●開館時間 10:00－18:00（展示室入場は閉館の30分前まで）
●会場 東京都現代美術館 企画展示室 地下2F
小課題7 レイアウト2
課題内容
画像とテキストを使って構成する。テキストとグリッドはレイアウト1で使ったものをそのまま使用する。
1. 与えられた画像とテキストを使って、グリッドを強く意識した構成を1パターン以上作成する。
- 画面サイズはレイアウト1と同じ。
- 書体、ファミリーの使用、文字の色、背景、写真の加工・トリミングなど全て自由
- 与えられた画像のうち最低1点は使用する。何点使用しても構わない
2. 自身でグリッドを作り、そのグリッドを使った構成を1点作成する。
- 画面サイズ自由
- 書体、ファミリーの使用、文字の色、背景、写真の加工・トリミングなど全て自由
- グリッドをどの程度意識するかは自由だが、意図は明確にしておくこと
- 与えられた画像のうち最低1点は使用する
前期最終課題
https://docs.google.com/document/d/12JlPUvnmwoIcTi78aLffm9hihTyc_ANKUeh8sZK-x5g/edit?usp=sharing
後期最終課題
インターネット上のサービスは、時代の変遷につれて常にトッププレイヤーが入れ替わってきた。近年だとInstagram、TikTok、YouTubeのエンターテインメント系サービスや、メルカリなどのフリマサイト、クックパッドなどの料理サイトなどがある。当然のことながら、5年後にはその勢力図は全く違ったものになっているだろう。 そこで後期課題は、「5年後に人気が出ていると予想されるサービスや商品を考案し、デザインカンプまでを作成する」とする。UIデザインの課題なので、使われるメディアは、webサイトかモバイルアプリとする。
- 分野は音楽、映像などのほか、ショッピング、医療、流通など広範囲に設定していい。分野の制限はない。
- webサイトの場合、PC用の画面とレスポンシブデザインの両方の画面を作ること。
- Adobe XDを使って作成する。それ以外のツール（Sketch、Figmaなど）を使いたい人は使っても構わない。
- やりたい人は実際のwebサイトやアプリを作ってもいい（大変だけど）。
後期小課題1：企画書
後期課題の企画書を作成する。A4-1ページ。縦横自由。以下のgoogleドライブのディレクトリにgoogleドキュメントを作成する。体裁は自由だが、「選んだサービスや商品が、なぜ人気が出るのか」について、第三者が納得できる理由を記載すること。
https://drive.google.com/drive/folders/106YLOedohGzYnKJYJ74JUgup0KoXy6z_
後期小課題2：画面遷移図
画面遷移図を作成して処理の流れを視覚化する。画面名と機能のみを掲載した簡単な図。フローチャートやサイトマップ（web）とも言われることがある。
- ここではdraw.ioを使ってみるが、他のソフトでも構わない（Cacooなど）。
- pdfで提出すること。
後期小課題3：ワイヤーフレームを作る
ワイヤーフレームとは、webページやモバイルアプリのレイアウトや構成要素を決める設計図です。デザインカンプ作成より前の初期の段階で作成し、必要な開発項目を確定する役割があります。ここでは、webサイトやアプリの仕様を決定するために、ワイヤーフレームを作成してみます。
- ページ遷移まで作成すること。
- ワイヤーフレームのパーツ
- 無料のUIキット、アイコンセット
後期・ポートフォリオ課題
自分の今までの活動をまとめたポートフォリオサイトを作成する。 Wixなどのwebサイト作成サービス、ViViViTなどのポートフォリオサイト、Wordpressなどのブログサイト、html+CSSのコーディングなど、媒体は自由だが、自分が進みたい分野でどのような媒体が使われるかは想定しておくこと。まずは始めることが重要。
評価基準
出席は前期、後期それぞれの日程の2/3以上。この出席には、発表会、展示、講評会などが全て含まれる。
前期の採点基準： 出席 –> 50% 小課題 –> 15% 最終制作 –> 25% 授業参加 –> 10%
後期の採点基準： 出席 –> 50% グループ制作 –> 20% 最終制作 –> 20% 授業参加 –> 10%