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