平成１４年８月６日（火）１３：００～１４：３０ 会場：神奈川県立産業技術短期大学校 担当：神奈川県立川崎北高等学校 柴田 功 平成１４年度　新教科「情報」現職教員等講習会 コンピュータデザイン 平成１４年８月６日（火）１３：００～１４：３０ 会場：神奈川県立産業技術短期大学校　　　　 担当：神奈川県立川崎北高等学校　柴田　功

コンピュータデザインの基礎 講習会テキスト（２） P205～272 学習指導要領 P343 学習指導要領解説 P139～144 座学１コマ　１３：００～１４：３０ 演習１コマ　１４：４０～１６：１０ 総合演習　（選択した方）

講座の内容 　１．目的とねらい 　２．内容 　２．１　デザインとは 　２．２　造形とは 　３．指導上の留意点 　４．演習例

１．目　的

１.１ コンピュータデザインの目的 コンピュータデザインに関する 基礎的な知識と技術を習得させ 実際に創造し 応用する能力と態度を育てる。 １.１　コンピュータデザインの目的 コンピュータデザインに関する 基礎的な知識と技術を習得させ 実際に創造し 応用する能力と態度を育てる。 高等学校学習指導要領解説P139

１.２ コンピュータデザインとは データ 情 報 行 動 活 用 ～収集された「データ」を加工して １.２　コンピュータデザインとは ～収集された「データ」を加工して 　「有益なメッセージ」（＝情報）を提示すること データ 情　報 行　動 　デザイン 活　用

１.３ 普通教科「情報」では 情 報 データ ～見やすく解りやすい表現をするためには デザインの知識が必要であることを理解させる １.３　普通教科「情報」では ～見やすく解りやすい表現をするためには デザインの知識が必要であることを理解させる 情　報 データ 　デザインの必要性

１.４　専門教科「情報」では ～デザインの知識と技術を習得させ 実際に創造し応用する能力と態度を育てる 情　報 データ 　デザインの知識と技術

普通教科「情報」の場合 １.５ 学習指導要領による位置づけ① 情報Ａ（２）情報収集・発信と情報機器の活用 １.５　学習指導要領による位置づけ① 普通教科「情報」の場合 情報Ａ（２）情報収集・発信と情報機器の活用 イ　情報発信の共有に適した情報の表し方 情報Ｂ（２）コンピュータの仕組みと働き ア　コンピュータにおける情報の表し方 ウ　情報の表し方と処理手順の工夫の必要性　 情報Ｃ（１）情報のディジタル化 ア　情報のディジタル化の仕組み ウ　情報機器を活用した表現方法

専門教科「情報」の場合 １.６ 学習指導要領による位置づけ② （１）造形表現の基礎 （２）コンピュータデザインの基礎 １.６　学習指導要領による位置づけ② 専門教科「情報」の場合 （１）造形表現の基礎 ア　デザインの意義 イ　デザインの条件 ウ　数理的造形 （２）コンピュータデザインの基礎 ア　表現と心理 イ　記号の操作と意味の演出 （３）コンピュータデザインの基本要素と構成 ア　デザインエレメント イ　エレメントの視覚的構成

２．内　容 ２.１　デザインとは

２.１　デザインの成立条件 ①合目的性 伝えたいメッセージがある ②アイデア メッセージを印象づける工夫 ③造形性 適切な造形表現

２.１　デザインの成立条件 ３つの条件が揃ってデザインが成立 デザイン 目 的 造 形 表 現 ア イ デ デザインの３本柱

２.１.１　デザインの合目的性 目的がわかりにくいグラフの例

２.１.１　デザインの合目的性 目的がわかるグラフの例

２.１.１　デザインの合目的性 比較すると メッセージが伝わるようになった

２.１.２　アイデアのあるデザイン 漢字と図形を組み合わせるアイデア

２.１.３　適切な造形表現 何か変だぞ！

２.１.３　適切な造形表現 どちらが陸？どちらが海？

表現する造形表現が不適切だと 上手く内容が伝わらない ２.１.３　適切な造形表現 目的があっても アイデアがあっても 表現する造形表現が不適切だと 上手く内容が伝わらない 造形についての基礎的な理解が必要

２.１ デザインの成立条件（追加） ①合目的性 ②アイデア ③造形性 ④倫理性と社会性 伝えたいメッセージがある メッセージを印象づける工夫 ２.１　デザインの成立条件（追加） ①合目的性 伝えたいメッセージがある ②アイデア メッセージを印象づける工夫 ③造形性 適切な造形表現 ④倫理性と社会性 エコロジーに配慮、バリアフリー・デザイン ユニバーサル・デザイン

２.１.４ 倫理性と社会性 差別的表現・偏見がないデザイン 環境によいデザイン エコロジーに配慮したデザイン ２.１.４　倫理性と社会性 差別的表現・偏見がないデザイン 環境によいデザイン エコロジーに配慮したデザイン ハンディキャップを持った人々への配慮 バリアフリーデザイン ユニバーサル・デザイン

２.１.４　ユニバーサルデザインの例 シャンプーであることが手でわかる だれにとっても使いやすいデザイン

２.１.４　ユニバーサルデザインの例 テレホンカード ５０度数と１００度数の区別が刻みでわかる だれにとっても使いやすいデザイン

２.１　デザインの成立条件 デザイン 目 的 造 形 表 現 ア イ デ 倫理性 社会性

見た目を美しくすることだけにとらわれたもの ２.１　デザインといえないもの 目的のないもの 偶然により生じたもの 見た目を美しくすることだけにとらわれたもの デザインといえない

２．内　容 ２.１　デザインとは ２.２　造形とは

造形 ２.２ 造形とは デザイン 蜘蛛の巣 蜂の巣 砂丘の模様 紅葉した山 建築物 機械 日用品 図 造形＝人間が意志をもって形作ったもの ２.２　造形とは 蜘蛛の巣 蜂の巣 砂丘の模様 紅葉した山 造形 建築物 機械 日用品 デザイン コンピュータデザイン ポスター 図 造形＝人間が意志をもって形作ったもの

２.２　造形要素 ①　形態 ②　色彩 ③　材質感（テクスチャ） ④　空間・時間

２.２　造形要素 ①　形態 ①　形態 ②　色彩 ③　材質感（テクスチャ） ④　空間・時間

２.２.１　造形表現　～形態～ 点 線 面 立体

２.２.１　注目させる造形表現 群化したものは図形になりやすい

２.２.１　注目させる造形表現 均等に並んだ正方形の中から

２.２.１　注目させる造形表現 「Ｔ」の文字を浮かび上がらせる

２.２.１　注目させる造形表現 対称形は図になりやすい

２.２.１　２通りに見える造形表現 図と地（ルビンの盃）

２.２.１　２通りに見える造形表現

２.２.１　２通りに見える造形表現

２.２.１　２通りに見える造形表現 曖昧さ 多義図形（若妻と姑）

２.２.１ 数理的造形 等差数列（２，４，６，８，１０・・・・・） 調和数列（１／２，１／４，１／６，１／８・・） ２.２.１　数理的造形 等差数列（２，４，６，８，１０・・・・・） 調和数列（１／２，１／４，１／６，１／８・・） 等比数列（２，４，８，１６，３２・・・・・） フィナボッチ数列 　　　　　（１，１，２，３，５，８，１３・・） 黄金比　（１．６１８）　 白銀比　（１．４１４）

２.２.１　数理的造形 サイクロイド 黄金比 リサージュ スパイラル ルート矩形 数学的に深入りしないようにする

２.２.１　形態についての錯視 幾何学的錯視 　幾何学的な線の配置による錯視 オービソン錯視 ミュラーリヤー錯視

２.２.１　形態についての錯視 幾何学的錯視 　幾何学的な線の配置による錯視 ミュラーリヤー錯視 オービソン錯視

２.２.１　形態についての錯視 幾何学的錯視 　幾何学的な線の配置による錯視

２.２.１　形態についての錯視 幾何学的錯視 　幾何学的な線の配置による錯視

２.２.１　形態についての錯視

２.２.１　形態についての錯視

２.２.１　形態についての錯視

２.２.１　形態についての錯視

２.２.１　形態についての錯視

２.２.１　形態についての錯視

２.２.１　形態についての錯視

２.２.１　形態についての錯視

２.２.１　形態についての錯視

２.２.１　形態についての錯視 ヨコハマ こくだい

２.２　造形要素 ①　形態 ②　色彩 ①　形態 ②　色彩 ③　材質感（テクスチャ） ④　空間・時間

２.２.２　色光の３原色 カラーテレビ コンピュータ ＲＧＢ（加色混合） カラー印刷 写真 ＣＭＹＫ（減色混合）

２.２.２　色の３属性 ①色相～色あい（赤・青・黄など） ②明度～色の明暗 ③彩度～色の鮮やかさ

２.２.２　色の３属性 ①　色相

トーン～明度と彩度で色をグループ化したもの ２.２.２　色の３属性 ②明度　と　③彩度 トーン～明度と彩度で色をグループ化したもの

２.２.２　色の３属性 ①色相　②明度　③彩度

２.２.２　色の３属性 ①色相　②明度　③彩度 白 明 度 彩度 　　　色相環 色立体 黒

２.２.２ 色の分類 ・人間の識別できる色～750万色 ・コンピュータが表現できる色 ・ＷＥＢセーフカラー（ブラウザ共有色） Ｒ：256段階 ２.２.２　色の分類 ・人間の識別できる色～750万色 ・コンピュータが表現できる色 　　Ｒ：256段階 　×Ｇ：256段階 　×Ｂ：256段階＝２24＝1670万色 ・ＷＥＢセーフカラー（ブラウザ共有色） 　　　256ー40（機種依存色）＝216色

２.２.２　色のディジタル化 ・＃RRGGBB 　RR：赤色光の強さ（00～FF） 　GG：緑色光の強さ（00～FF） 　BB：青色光の強さ（00～FF） 16×16×16×16×16×16＝ 　　　２の２４乗＝1670万色

２.２.２ 色のディジタル化 青 0000FF FF00FF 白 FFFFFF 00FFFF 黒 FF0000 000000 FFFF00 ２.２.２　色のディジタル化 青 マゼンダ FF00FF FF0000 FFFF00 FFFFFF 0000FF 00FFFF 000000 白 シアン 黒 赤 黄 緑

２.２.２　色の心理的効果 赤系＝暖色、進出色 青系＝寒色、後退色

２.２.２　色の心理的効果 配色による心理的効果

２.２.２　色の心理的効果 グラデーション～滑らかな変化を表現

２.２.２　色の心理的効果 ハレーション ～対比する２色のコントラストが 大きいときに生じる

２.２.２　色の心理的効果 ハレーション ～無彩色の緩衝帯を設けること で調和がとれる

２.２.２　色についての錯視 同化・対比 　隣接する対象の影響による錯視 明るさの同化 明るさの対比

２.２　造形要素 ①　形態 ②　色彩 ③　材質感（テクスチャ） ①　形態 ②　色彩 ③　材質感（テクスチャ） ④　空間・時間

２.２.３　材質感（テクスチャ） 大理石 木目 水滴 麻 デニム 紙袋

２.２.４　記号の操作と演出 移動・回転・反転・拡大・縮小 ディストーション・分割 シンメトリー・バランス・対比 グラデーション

２.２.４　記号の操作と演出 移動 分割 縮小

２.２.４　記号の操作と演出 回転

２.２.５　デザインエレメント レタリング タイポグラフィ サイン ピクトグラム シンボルマーク ロゴタイプ イラスト キャラクターデザイン

２.２.５　ロゴタイプ

２.２.５　サイン

２.２.５　エレメントの視覚的構成 空間的 ポスター 新聞 雑誌 Ｗｅｂページ サイン計画 時間的 映画 アニメーション ＣＦ

３．指導上の留意点

３　指導上の留意点 （１）　デザインの役割・造形感覚 （２）　実践的な課題 （３）　表現力や造形力を 　　　　　　　　　　身につけさせる

３.１ 指導上の留意点 （１）デザインの役割を理解させる デザインの３本柱 ３.１　指導上の留意点 （１）デザインの役割を理解させる コンピュータによる表現手法のみを習得しても有意義なデザインはできない 造形についての基礎的な理解と造形感覚の育成 アイデアを発想する能力の育成が重要 デザインの３本柱

３.２ 指導上の留意点 総合的なデザイン力を養う （２） より実践的な課題を設定する デザインエレメント 空間的デザイン 時間的デザイン ３.２　指導上の留意点 （２）　より実践的な課題を設定する デザインエレメント ～ピクトグラム、ロゴタイプなど 空間的デザイン ～広告・パッケージ・ダイヤグラム・編集 時間的デザイン ～映像デザイン 総合的なデザイン力を養う

３.３ 指導上の留意点 表現力・造形力 コンピュータ 道具としてのコンピューター ３.３　指導上の留意点 （３）コンピュータを利用した表現力や造形力を身につけさせるように指導する 表現力・造形力 色鉛筆 絵の具 粘土 クレヨン 彫刻刀 コンピュータ 道具としてのコンピューター

４．演習例

４.１　演習例② 「ダイナミズム」という言葉をテーマにして 　　色・面による構成表現を試みる

４.２　演習例③ 「季節感」をテーマに、色面による構成表現などを通して調和の取れた配色を試みる 春 夏 冬 秋 ？

４.３ 演習例⑥ イメージするもの 具体的な団体を設定して、シンボルマークやロゴタイプのデザインを考案・作成する 例） ○○高校の情報科の ４.３　演習例⑥ 具体的な団体を設定して、シンボルマークやロゴタイプのデザインを考案・作成する 例）　○○高校の情報科の ホームページのロゴタイプを作ろう イメージするもの

○○高校の情報科のホームページのロゴタイプの作品例 ４.３　演習例⑥ ○○高校の情報科のホームページのロゴタイプの作品例 色について 銀（メタリックな部品） 赤（インターネットの結線） 青（グローバルな地球） 中間色ではなく原色（赤・青・黄） 形について 楕円（地球を囲むインターネット） 円（ネットワークを伝わる情報） 太い文字（スケールの大きさ）

４.３　シンボルマークの参考例

４.３　シンボルマークの参考例

４.３　シンボルマークの参考例

４.３　演習の進め方 具体的なテーマを決める テーマからイメージされる物・言葉 その物・言葉からイメージされる色・形 作業開始

４.３ 演習の進め方 テーマ： 柴田功電気店（家電販売の店） 物・言葉： 功、家電品、電気の＋－ 色・形： 功という漢字、丸と四角、青と赤 ４.３　演習の進め方 テーマ：　柴田功電気店（家電販売の店） 物・言葉：　功、家電品、電気の＋－ 色・形：　功という漢字、丸と四角、青と赤 作業開始

４.３　演習の参考例 柴田功電気店のシンボルマーク完成

４.３　演習の参考例 記号フォントもあります

４.４ 演習例 ⑥ 総合演習では ある団体を設定し、 シンボルマーク、タイトルロゴ、 レイアウト、配色など 統一したデザインのWebページを ４.４　演習例　⑥ 総合演習では ある団体を設定し、 シンボルマーク、タイトルロゴ、 レイアウト、配色など 統一したデザインのWebページを 作成する。

作業の手順 １．ペイントで作品を描く ２．ＢＭＰ形式で保存する ３．フォトエディターで ＢＭＰファイルを開く ４．ＧＩＦ形式で保存する 　　　ＢＭＰファイルを開く ４．ＧＩＦ形式で保存する ５，ＨＴＭＬファイルを作る ６．ファイル転送（ＦＴＰ）する ７．作品を閲覧する

神奈川県立川崎北高等学校 教諭 柴田 功 Ｅ－ｍａｉｌ isao@johoka.net ＵＲＬ http://www.johoka.net 平成１４年度　新教科「情報」現職教員等講習会 コンピュータデザイン 講義編　おわり ご静聴ありがとうございました 神奈川県立川崎北高等学校　教諭　柴田　功 Ｅ－ｍａｉｌ　isao@johoka.net ＵＲＬ　http://www.johoka.net