Transcript パワーポイント97-2000&95形式データ

平成１３年度 新教科「情報」現職教員等講習会
コンピュータデザ
イン
平成１３年８月２７日（火）１３：００～１４：３０
会場：横浜国立大学・総合情報処理センター
担当：神奈川県立川崎北高等学校 柴田 功
コンピュータデザインの基礎
•講習会テキスト（２） P205～272
•学習指導要領
P343
•学習指導要領解説 P139～144
•座学１コマ １３：００～１４：３０
•演習１コマ １４：４０～１６：１０
•総合演習 （選択した方）
講座の内容
１．目的とねらい
２．内容
２．１ デザインとは
２．２ 造形とは
３．指導上の留意点
４．演習例
１．目 的
１.１
コンピュータデザインの
目的
• コンピュータデザインに関する
– 基礎的な知識と技術を習得させ
– 実際に創造し
– 応用する能力と態度を育てる。
高等学校学習指導要領解説P139
１.２ コンピュータデザイン
とは
～収集された「データ」を加工して
「有益なメッセージ」（＝情報）を提示すること
デ
ー
タ
行
情
活 用
デザイン
報
動
１.３ 普通教科「情報」では
～見やすく解りやすい表現をするためには
デザインの知識が必要であることを理解させる
デ
ー
タ
情
デザインの必要性
報
１.４ 専門教科「情報」では
～デザインの知識と技術を習得させ
実際に創造し応用する能力と態度を育てる
デ
ー デザインの知識と技術
タ
情
報
１.５ 学習指導要領による位置づけ
①
普通教科「情報」の場合
情報Ａ（２）情報収集・発信と情報機器の活用
イ 情報発信の共有に適した情報の表し方
情報Ｂ（２）コンピュータの仕組みと働き
ア コンピュータにおける情報の表し方
ウ 情報の表し方と処理手順の工夫の必要性
情報Ｃ（１）情報のディジタル化
ア 情報のディジタル化の仕組み
ウ 情報機器を活用した表現方法
１.６ 学習指導要領による位置づけ
②
専門教科「情報」の場合
（１）造形表現の基礎
ア デザインの意義
イ デザインの条件
ウ 数理的造形
（２）コンピュータデザインの基礎
ア 表現と心理
イ 記号の操作と意味の演出
（３）コンピュータデザインの基本要素と構成
ア デザインエレメント
イ エレメントの視覚的構成
２．内 容
２.１ デザインとは
２.１ デザインの成立条件
①合目的性
伝えたいメッセージがある
②アイデア
メッセージを印象づける工夫
③造形性
適切な造形表現
２.１ デザインの成立条件
３つの条件が揃ってデザインが成立
デザインの３本柱
２.１.１ デザインの合目的性
目的がわかりにくいグラフの例
２.１.１ デザインの合目的性
目的がわかるグラフの例
２.１.１ デザインの合目的性
比較すると
メッセージが伝わるようになった
２.１.２ アイデアのあるデザ
イン
漢字と図形を組み合わせるアイデア
２.１.３ 適切な造形表現
何か変だぞ！
２.１.３ 適切な造形表現
どちらが陸？どちらが海？
２.１.３ 適切な造形表現
•目的があっても
•アイデアがあっても
•表現する造形表現が不適切だと
上手く内容が伝わらない
造形についての基礎的な理解が必要
２.１ デザインの成立条件（追
加）
①合目的性
伝えたいメッセージがある
②アイデア
メッセージを印象づける工夫
③造形性
適切な造形表現
④倫理性と社会性
エコロジーに配慮、バリアフリー・デザイン
ユニバーサル・デザイン
２.１.４ 倫理性と社会性
•差別的表現・偏見がないデザイン
•環境によいデザイン
•エコロジーに配慮したデザイン
•ハンディキャップを持った人々への配慮
•バリアフリーデザイン
•ユニバーサル・デザイン
２.１.４ ユニバーサルデザイン
の例
シャンプーであることが
手でわかる
•だれにとっても使いやすいデザイン
２.１.４ ユニバーサルデザイン
の例
テレホンカード
５０度数と１００度数の
区別が刻みでわかる
•だれにとっても使いやすいデザイン
２.１ デザインの成立条件
２.１
デザインといえないもの
• 目的のないもの
• 偶然により生じたもの
• 見た目を美しくすることだけに
とらわれたもの
デザインといえない
２．内 容
２.１ デザインとは
２.２ 造形とは
２.２ 造形とは
蜂の巣
蜘蛛の巣
造形
建築物
日用品
機械
デザイン
コンピュータ
デザイン 図
ポスター
砂丘の模様
紅葉した山
造形＝人間が意志をもって形作ったもの
２.２ 造形要素
① 形態
② 色彩
③ 材質感（テクス
チャ）
④ 空間・時間
２.２ 造形要素
① 形態
①
形態
② 色彩
③ 材質感（テクス
チャ）
④ 空間・時間
２.２.１ 造形表現 ～形態～
•点
•線
•面
•立体
２.２.１ 注目させる造形表現
群化したものは
図形になりやす
い
２.２.１ 注目させる造形表現
均等に並んだ正方形の中から
２.２.１ 注目させる造形表現
「Ｔ」の文字を浮かび上がらせる
２.２.１ 注目させる造形表現
対称形は図になりやすい
２.２.１ ２通りに見える造形表
現
図と地（ルビンの盃）
２.２.１ 数理的造形
•等差数列（２，４，６，８，１０・・・・・）
•調和数列（１／２，１／４，１／６，１／８・・）
•等比数列（２，４，８，１６，３２・・・・・）
•フィナボッチ数列
（１，１，２，３，５，８，１３・・）
•黄金比 （１．６１８）
•白銀比 （１．４１４）
２.２.１ 数理的造形
サイクロイド
黄金比
リサージュ
スパイラル
ルート矩形
数学的に深入りしないようにする
２.２.１ 形態についての錯視
幾何学的錯視
幾何学的な線の配置による錯視
ミュラーリヤー錯視
オービソン錯視
２.２.１ 形態についての錯視
幾何学的錯視
幾何学的な線の配置による錯視
ミュラーリヤー錯視
オービソン錯視
２.２.１ 形態についての錯視
幾何学的錯視
幾何学的な線の配置による錯視
２.２.１ 形態についての錯視
幾何学的錯視
幾何学的な線の配置による錯視
２.２.１ 形態についての錯視
２.２.１ 形態についての錯視
２.２.１ 形態についての錯視
２.２.１ 形態についての錯視
２.２.１ 形態についての錯視
２.２.１ 形態についての錯視
２.２.１ 形態についての錯視
２.２.１ 形態についての錯視
２.２.１ 形態についての錯視
２.２.１ 形態についての錯視
ヨコハマ
こくだい
２.２ 造形要素
① 形態
①
形態
② 色彩
②
色彩
③ 材質感（テクス
チャ）
④ 空間・時間
２.２.２
色光の３原色
カラーテレビ
コンピュータ
カラー印刷
写真
ＲＧＢ（加色混合）
ＣＭＹＫ（減色混合）
２.２.２
色の３属性
①色相～色あい（赤・青・黄など）
②明度～色の明暗
③彩度～色の鮮やかさ
２.２.２
色の３属性
① 色相
２.２.２
色の３属性
②明度 と ③彩度
トーン～明度と彩度で色をグループ化したもの
２.２.２
色の３属性
①色相 ②明度 ③彩度
２.２.２
色の３属性
①色相 ②明度 ③彩度
２.２.２
色の分類
・人間の識別できる色～750万色
・コンピュータが表現できる色
Ｒ：256段階
×Ｇ：256段階
×Ｂ：256段階＝２24＝1670万色
・ＷＥＢセーフカラー（ブラウザ共有
色）
２.２.２ 色のディジタル化
・＃RRGGBB
RR：赤色光の強さ（00～FF）
GG：緑色光の強さ（00～FF）
BB：青色光の強さ（00～FF）
16×16×16×16×16×16＝
２の２４乗＝1670万色
２.２.２ 色のディジタル化
青0000FF
マゼンダ
FF00FF
白 FFFFFF
シアン
00FFFF
黒
000000
0000FF緑
赤 FF0000
黄 FFFF00
２.２.２ 色の心理的効果
赤系＝暖色、進出色
青系＝寒色、後退色
２.２.２ 色の心理的効果
配色による心理的効果
２.２.２ 色の心理的効果
グラデーション～滑らかな変化を表現
２.２.２ 色の心理的効果
ハレーション
～対比する２色のコントラストが
大きいときに生じる
２.２.２ 色の心理的効果
ハレーション
～無彩色の緩衝帯を設けること
で調和がとれる
２.２.２ 色についての錯視
同化・対比
隣接する対象の影響による錯視
明るさの同化
明るさの対比
２.２ 造形要素
① 形態
①
形態
② 色彩
②
色彩
③
材質感（テクス
③ 材質感（テクス
チャ）
チャ）
④ 空間・時間
２.２.３ 材質感（テクス
チャ）
大理石
木目
水滴
麻
デニム
紙袋
２.２.４ 記号の操作と演出
•移動・回転・反転・拡大・縮小
•ディストーション・分割
•シンメトリー・バランス・対比
•グラデーション
２.２.５ デザインエレメント
•レタリング
•シンボルマーク
•タイポグラフィ •ロゴタイプ
•サイン
•イラスト
•ピクトグラム
•キャラクターデザイン
２.２.５ ロゴタイプ
２.２.５ サイン
２.２.５
エレメントの視覚的構
成
•空間的
•時間的
•ポスター
•映画
•新聞
•アニメーション
•雑誌
•ＣＦ
•Ｗｅｂページ
•サイン計画
３．指導上の留意
点
３ 指導上の留意点
（１） デザインの役割・造形感覚
（２） 実践的な課題
（３） 表現力や造形力を
身につけさせる
３.１ 指導上の留意点
（１）デザインの役割を理解させる
•コンピュータによる表現手法のみを習
得しても有意義なデザインはできない
•造形についての基礎的な理解と造形
感覚の育成
•アイデアを発想する能力の育成が重
要
デザインの３本柱
３.２ 指導上の留意点
（２） より実践的な課題を設定する
•デザインエレメント
～ピクトグラム、ロゴタイプなど
•空間的デザイン
～広告・パッケージ・ダイヤグラム・編集
•時間的デザイン
～映像デザイン
総合的なデザイン力を養う
３.３ 指導上の留意点
（３）コンピュータを利用した表現力や造形力
を身につけさせるように指導する
絵の具 色鉛筆 粘土
クレヨン 表現力・造形力 彫刻刀
コンピュータ
道具としてのコンピューター
４．演習例
４.１ 演習例②
• 「ダイナミズム」という言葉をテーマにして
色・面による構成表現を試みる
４.２ 演習例③
• 「季節感」をテーマに、色面による構成表現な
どを通して調和の取れた配色を試みる
秋
？
夏
春
冬
４.３ 演習例⑥
• 具体的な団体を設定して、シンボルマークやロ
ゴタイプのデザインを考案・作成する
例） ○○高校の情報科の
ホームページのロゴタイプを作ろう
イメージするもの
４.３ 演習例⑥
○○高校の情報科のホームページのロゴタイプの作品例
色について
形について
銀（メタリックな部品）
赤（インターネットの結線）
青（グローバルな地球）
中間色ではなく原色（赤・青・黄）
楕円（地球を囲むインターネット）
円（ネットワークを伝わる情報）
太い文字（スケールの大きさ）
４.３ シンボルマークの参考
例
４.３ シンボルマークの参考
例
４.３ シンボルマークの参考
例
４.３
演習の進め方
具体的なテーマを決める
テーマからイメージされる物・言葉
その物・言葉からイメージされる色・形
作業開始
４.３
演習の進め方
テーマ： 柴田功電気店（家電販売の店）
物・言葉： 功、家電品、電気の＋－
色・形： 功という漢字、丸と四角、青と赤
作業開始
４.３
演習の参考例
柴田功電気店のシンボルマーク完成
４.３
演習の参考例
記号フォントもあります
４.４
演習例 ⑥
総合演習では
ある団体を設定し、
シンボルマーク、タイトルロゴ、
レイアウト、配色など
統一したデザインのWebページを
作成する。
平成１３年度 新教科「情報」現職教員等講習会
コンピュータデザイン
講義編 おわり
ご静聴ありがとうございました
神奈川県立川崎北高等学校 教諭
柴田
功
Ｅ－ｍａｉｌ [email protected]
ＵＲＬ http://www.johoka.net