【プログミング初心者向け】
本授業では、プログラミング技術を前提としたインフォメーションデザイン実習を行う。
19世紀以降、情報を正確に楽しく視覚的に伝える事にデザインが果たして来た役割は非常に大きいといえる。しかし、20世紀以降のコンピュータ技術は、モダンデザインが培ってきた遺産を更に次の段階に展開している。それは、従来は紙の上や立体のみであったデザインに「インタラクティビティ」が存在し始めたという事である。そして、それを鮮やかに実現するのがプログラミング言語だということが言える。
本授業では、インフォメーションデザインの原理的要素である形態、色彩、タイポグラフィの実習から始まりプログラミング言語の実習に繋げる事により、現代を生きるデザイナー／アーティストに必要な感性および技術を身につける。
前半は、インフォメーションデザインの基礎的な要素となる形態、色彩、タイポグラフィ（文字組のデザイン）を行い、その結果としてのダイアグラムデザイン（図のデザイン）を行う。後半には、1, 2年次の復習としてProcessingを使ったプログラミング実習を行う。
最終的に上記の実習を元にした作品を制作する。
スケジュール
【4月11日】 インフォメーションデザイン演習
都道府県別のデータを使って、グラフおよび日本地図を作成する。日本地図は、明度差を使う。
参考サイト：
統計局ホームページ http://www.stat.go.jp/
農林水産省の統計 http://www.maff.go.jp/j/tokei/index.html
素材：statistics japan_map.ai japan_three_map.ai
参考：酒類の消費マップ
sake_map
【4月25日】 タイポグラフィ
タイポグラフィ
和文／欧文フォント
フォントファミリー
サイズ／カーニング／トラッキング／行間
素材：typo1.ai
【5月9日】 色彩
色彩の空間性、イメージ性
参考URL： https://r-dimension.xsrv.jp/classes_j/color_basic/
【5月16日】 ダイアグラムデザイン
スケッチ、グループディスカッション
【5月23日】 ダイアグラムデザイン
スケッチ発表、グループディスカッション、ダイアグラム制作
【5月30日】 ダイアグラムデザイン
ダイアグラム講評
プログラミング基礎実習
図形を描く
色彩
変数
画像の表示
【6月6日】
【6月13日】 プログラミング実習1
【6月20日】 プログラミング実習2
【6月27日】 プログラミング実習3
【7月4日】 プログラミング実習4
テキストの表示
棒グラフをプログラムで作ってみる
データベース・Excelシートからのデータの取得
円グラフをプログラムで作ってみる
【7月11日】 最終課題制作
【7月18日】 最終課題制作
【7月25日】 講評
課題
■小課題1：情報を伝達するための要素
実習で選んだ都道府県別のデータを、マップ1は「明度」、マップ2は「明度＋彩度」の違いで差別化した情報地図を作る。
さらに、マップ3は数値を5段階に分類し、「色相」によって差別化する。
テンプレートファイル：
japan_three_map.ai
■色彩課題
●小課題1 色彩の空間性
与えられたテンプレートの中の四角形に色をつけ、左側の四角形から右側の四角形まで、順番に滑らかに空間的に奥に見えるように操作する。
条件：
隣接する四角形の色相は、必ず60度以上離す。
テンプレート：color1.ai
参考作品（パスワード保護）
●小課題2 色彩のイメージ性
色彩というものは、それぞれ固有のイメージを持っており、広く一般に知られているものもある（例：赤→情熱、白→清潔）。
それらの色彩とイメージの関係を踏まえ、与えられたテンプレートの中でそれぞれ与えられたイメージにふさわしい色の組み合わせを選び、四角形の中を彩色する。
テンプレート：color2.ai
●中間課題
日本国内の統計（例：人口、人口密度、河川の水質、タレントの出身地など）をもとにして、都道府県別の日本地図を作成する。その際、地図は必ずしも実際の形である必要は無く、情報を整理するために変形してかまわない。
●条件：
・必ず、2種類の情報を組み合わせて地図を作ること。2種類の情報は何らかの相関関係（比例・反比例など）があることが望ましい。
例：ゴミの排出量と不法投棄の比率
・必ず作品の右下に引用元を明記する事
・使用ソフト： Adobe Illustrator
・用紙サイズ：A3
・横位置
●ポイント：
・扱う2つの情報の相関性
・単位をどのように区切るか
・それぞれの情報を何に置き換えるか（色？形？大きさ？）
●情報地図を作る時のポイント：
・地図の大きさや説明部分のレイアウトを考え、窮屈なレイアウトにならないようにする
・色は、なるべく違いが分かるように差をつける
●スケッチのポイント：
・2種類の情報はそれぞれ何か
・それらの情報は色、形、サイズ等、どう視覚化するか
・実数・割合など、どういった値に整形するか
・単位（区切り）を何段階にするか
均等に区切るか？不均衡に区切るか？
●ディスカッションのポイント
・2種類情報は実数か？割合か？その選択は適切か？
・2種類の情報に相関関係はあるか？
・データから色、形、サイズへの変換は適切か？分かりやすいか？
●最終課題
統計の数値データを形、色、アニメーション、インタラクションによって視覚化したインフォグラフィックを作成しなさい。
・インフォグラフィックの説明（Wikipedia）
・インフォグラフィックの例
条件
- XlsReaderを使って、excelシートからデータを読み込むこと。
- 選ぶ統計データは何でもいい。例えば、自分自身の情報（例：生活費の内訳、時間帯によるツイート数など）でもいいし、国勢調査のデータのようなものも考えられる。
- この課題は、「分かりやすく」というよりは、「データをグラフィックに変換する際にどのような可能性が考えられるか」という点を重視する。なので、必ずしも単純明快でなくてもかまわない。
- アニメーション、インタラクションがあるのが望ましいが、プログラムとしては難易度が高いので、静止画でもOKとする。
- 画面は、500 x 500 ピクセル以内で作成する
１つ１つのオブジェクトを選ぶとアクションがある（例：大きさ、色が変わる）というようなインタラクションをデザインしたい人は、オブジェクト指向の考え方が必要になります。やってみたい人は以下のレジュメをやるとわかります。また、Processingで3Dオブジェクトを扱う事もできます。
■3D
1. オブジェクトの作成
2. オブジェクトの移動、回転
3. 座標の保存（pushMatrix, popMatrix）
4. vertex（頂点）を使用した図形の描画
5. ライト
6. カメラ
成績評価
【授業開始30分までは遅刻を認める。それ以降は欠席扱いとする。】
出席→50%、小課題→10%、中間課題→10%、最終課題→30%の割合で評価する。