LogoMark.png

情報デザイン演習I/2019 の変更点


#author("2020-02-02T18:16:45+09:00;2020-01-13T21:32:23+09:00","default:inoue.ko","inoue.ko")
*Whiteboard
[[情報デザイン演習I]]|情報デザイン専攻|&small(火曜 1・2限 17号館5F デジタルラボ 504);
//-[[学科サイト>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]
-FTP接続先:ftp.ip.kyusan-u.ac.jp( 5F実習室からは 133.17.4.74 )
~

//***最終評価について
//-評価は、後期試験期間中に[[情報デザイン演習I 学科サイト>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]の個人ページから行います。
//-各自、ページ内の 演習01〜演習07 を最新の状態に更新して下さい。
//-個人ページの表現・内容も評価の対象となります。
//項目間の余白等を適切に処理して、見やすくレイアウトして下さい。

~

**最終回

***III. Webデザイン入門|演習07
-10:00 まで制作時間、後半を発表・意見交換の時間とします。

-''確認事項''
--メニューは正しく機能しますか
--画像のオリジナルサイズは、画面幅に対して適切にリサイズしていますか
(無駄に大きな画像は、閲覧者の通信負荷を大きくしてしまいます)
--著作権、肖像権等を侵害していないことを確認して下さい。
---YouTube動画など、埋め込みコードが提供されているものはOK。
---Googleイメージ検索などでDLした画像は不可。

-技術的に高度である必要はありません。「情報をデザインすること」を優先し、情報の5W2Hを意識しながら制作して下さい。例えば
--WHAT:これは「何のサイト?」か一見してわかるようになっていますか?
<title>タグ、<h1>は重要な要素です。
--WHERE:「情報はどこにある?」・・メニューは適切ですか?
メニューは<nav>に記述
--WHO:「発信者は誰か?」についての記載はありますか?
発信者、管理者情報をどこかに(例えば署名を <footer>に)記述

-[[情報デザイン演習I 学科サイト>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]では、制作したサイトのスクリーンショットをとって掲載するとともに、当該サイトへのリンクを設定して下さい。
~
~

**第14回

***はじめに
-個人ページの更新
--[[情報デザイン演習I>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]のページに、''演習07''の項目を作成して、以下の形式のリンクを作成してください。
 http://www.kyusan-u.ac.jp/~k19as000
--同様に「氏名/SubMenu」を編集し、以下の項目をに追加して下さい。
 「氏名/情報デザイン演習I」
 「氏名/WebSample」
--WebSample のページで以下を修正
---氏名の部分を入力してください。
---学内サーバーのアドレスの XXX の部分を書き換えてください。
--付記:WebSampleは2年次のWebデザイン実習の成果置き場です。

-前回欠席した方、また前回の作業内容をリセットしたい方
以下からサンプルをダウンロードして利用して下さい。
https://github.com/koichi-inoue/CSS_Sample_01
~

***学内サーバーへのアップロード方法の確認
-使用するのは FileZilla クライアント
-接続先:133.17.4.74
-接続ID、PW:K'sLifeと同じもの
-ターゲットフォルダ:WWW-KSU
-アップロード後の確認は、以下の形式のアドレス
 http://www.kyusan-u.ac.jp/~k19as000
~

***ブラウザの使いこなしについて
-ローカルアドレスとリモートアドレスのブックマークについて
-ブラウザの再読み込みと「キャッシュのクリア」について
~

***Webサイト構築
前回作成した枠組みを利用して以下の項目について再確認します。

-HTMLの基本構造について > [[HTML]]
-CSSの書式について > [[CSS]]

-複数のページに展開する方法について
index.html + style.css を雛形として、index.html を複製

-CSSによるレイアウトの基本キーワードについて
--[[CSS/Flexbox]]
--[[CSS/Position]]

-画像の掲載について
--書式
 <img src="images/sample.jpg">
--画像データについて
画像はサイズとファイル形式を最適化してから利用します。
Googleが提供する以下のサイトが便利です。
https://squoosh.app/
--参考:[[WebDesign/Images]]


~
~

**第13回

***III. Webデザイン入門
HTML+CSSによる、標準的なWebサイトのデザインについて、概要を体験します(詳細は次年度前期のWebデザイン実習で学習)。
~

***開発環境の準備
-作るソフト [[TextEditor]] > [[Atom]]
ただ単に文字を入力・編集する・・プログラミングに用いる最もシンプルなソフトウエアがテキストエディタです。これで作成した文字が並んだだけのデータファイルを「テキストファイル」といいますが、Webデザインで扱うのは大半がこのテキストファイルなので、特別なソフトは不要です((補足:Dreamweaverやホームページビルダーの利用について&br;一般にWebページを作る際にはDreamweaverやホームページビルダーのようなWebオーサリングツールが必要なのではないか?という印象をお持ちの方も多いかと思いますが、HTMLもCSSもJavaScriptもすべてテキストファイルなので、テキストエディタさえあれば他には何もいりません。&br;これらはワープロ感覚で組み上げたページから自動的にHTMLとCSSを書き出すソフトで、HTMLとCSSの仕組みを理解した上で利用すれば格段に生産効率が上がりますが、はじめのうちはHTMLとCSSを直接テキストエディタでコツコツ手入力することをお勧めします。))。
-見るソフト [[Browser]] > Firefox , Chrome
-転送するソフト [[FTP]] > FileZilla
~

***サイトフォルダの準備
#image(WebDesign/Basics/folder.jpg,right,30%)
-一般にWebサイトは複数のファイルから構成されます。はじめにWebサイト用のフォルダを作り、関連するファイルを、すべてそのフォルダで管理するようにします。
-1ページ = 1ファイル(〜.html)が基本です。
-写真やイラストなどの画像は imagesフォルダで管理します。

''注)フォルダ名、ファイル名は必ず半角英数で''
images page01.html page-01.html page_01.html logoMark.jpg など、
Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。
#clear
~

***HTMLの記述例
HTMLとは、ページの内容を記述するためのマークアップ言語です。
まずは、以下のソースコードをテキストエディタにコピー&ペーストして、
''index.html'' という名前で、作業用フォルダに保存して下さい。

 <!DOCTYPE html>
 <html lang="ja">

 <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="style.css">
     <title>Sample Site</title>
 </head>

 <body>

   <div id="container">

     <header>
       <h1>Sample Page</h1>
     </header>

     <nav>
       <ul>
         <li><a href="#">home</a></li>
         <li><a href="#">about</a></li>
         <li><a href="#">gallery</a></li>
         <li><a href="#">links</a></li>
       </ul>
     </nav>

     <main>

       <section>
         <article>
           article 01
         </article>
         <article>
           article 02
         </article>
       </section>

       <aside>
         aside
       </aside>

     </main>

     <footer>
        &copy; http://www.example.com
     </footer>

   </div>

 </body>
 </html>
~

***HTMLをブラウザで表示確認
-index.html をブラウザへドラッグ&ドロップするだけで表示されます。

-アドレスバーに表示されるURLの違い
--通常のネット接続の場合: http:// www.example.com/index.html
--ファイルを表示した場合: file://・・・・    /index.html

-見出しや文章を適当に書き変えて「保存」してみて下さい。ブラウザの「更新」を行うと、変更が反映されることがわかります。

~

***HTMLタグの基本
HTMLは、情報要素を以下のような''タグ''でくくる形で記述します。
 <◯◯> 〜 </◯◯> ← 前者を開始タグ、後者を終了タグといいます。
以下、基本的なものを列挙します。 > [[詳しくはこちら>HTML]]

-HTML文書:<html> 〜 </html>
-ヘッドとボディー ※HTMLは2つの部分から構成されます。
--ページに関する前置き情報:<head> 〜 </head>
--ブラウザの主画面に表示される情報:<body> 〜 </body>

-セクション ※紙面を構成する大きな枠組みを定義するのに用います。
--汎用区画:div, article, aside, section
--ヘッダー:header
--フッター:footer
--ナビ:nav

-見出し:h1 ※ h1 から h6 まで6段階あります

-文章段落:p

-リンク:a ※以下の2種類の使い方があります。
--内部リンク(サイト内にある別のhtmlファイルへのリンク)
 <a href="gallery.html">(リンク文字、画像)</a>
--外部リンク(外部サイトへのリンク)
 <a href="http://www.abc.com">(リンク文字、画像)</a>

-箇条書き: <ul>と<li> 
以下、サイトナビ(メニュー)の書き方の例。
 <ul>
       <li><a href="index.html">home</a></li>
       <li><a href="gallery.html">gallery</a></li>
       <li><a href="links.html">links</a></li>
       <li><a href="about.html">about</a></li>
  </ul>

-メディア:img, audio, videoなど
--画像の配置:img
//sample.jpgという画像データがimagesフォルダの中にあるとして・・・
  <img src="images/sample.jpg" width="320">
//※属性 src ソース width 表示幅
画像はWebに最適なサイズにリサイズ > 参考:[[WebDesign/Images]]
--動画の配置:video
//同様に動画の掲載も可能です。ただし動画ファイルは「重い」ので、YouTubeにアップして、それを埋め込むのが一般的です。
  <video src="movies/sample.mp4" width="320"></video>

-様々なコンテンツの埋め込み
--YouTube動画の埋め込み <IFRAME>
YouTubeのサイトには「共有」>「埋め込みコード」があります。
それ(以下例)を<body>内にコピー&ペーストすれば表示されます。
 <iframe width="420" height="315"
        src="http://www.youtube.com/embed/[動画個別の記号]"
        frameborder="0" allowfullscreen></iframe>
--GoogleMapの埋め込み → Googleマップ>リンク>埋め込みコード
--その他、Twitterのタイムラインの埋め込みなども試してみて下さい。

-その他
--強制改行:br
--水平線:hr

~

***CSSでページのスタイルを定義
CSSとは、表示された要素のビジュアルを定義するためのものです。
まずは、以下のソースコードをテキストエディタにコピー&ペーストして、
''style.css''としてWebSiteフォルダに保存して下さい。

 *{
   margin: 0;
   padding: 0;
   list-style: none;
   text-decoration: none;
 }

 #container{
   width: 84%;
   max-width: 1280px;
   min-width: 512px;
   margin: 0 auto;
 }

 header {
   position:relative;
   height: 8rem;
   background: #333;
   box-shadow: 0 4px 0.3125rem rgba(0,0,0,.3);
 }

 header h1{
   position: absolute;
   top: 3rem;
   left: 3rem;
   font-size: 2rem;
   color: white;
 }

 nav {
   padding: 1rem 3rem ;
   background: #333;
 }
 nav ul{
   display: flex;
   flex-direction: row;
 }

 nav ul li{
   margin-right: 2rem;
 }

 nav ul li a {
   color: white;
 }

 main{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 }

 section{
   flex: 3;
   padding: 3rem;
   background: #EEE;
 }

 article{
   min-height: 8rem;
   padding: 1rem;
   margin-bottom: 2rem;
   background: #FFF;
 }

 aside{
   flex: 1;
   padding: 3rem;
   background: #DDD;
 }

 footer {
   padding: 2rem 3rem;
   text-align: center;
   background: #333;
   color: white;
 }
~

***HTMLとCSSの関連づけ
index.html の<head>内の以下の1行が、style.css の利用を明示しています。
 <link rel="stylesheet" href="style.css">
これにより、CSSに書かれた内容が、ページのスタイルに反映します。

注)CSSを記述する方法は3つあります。
・ HTMLファイルに書かれた各タグの中に直接書く
・ HTMLファイルのヘッダー部分にまとめて書く
・ HTMLファイルとは独立した別のファイルに書く( 拡張子は .CSS )
で、結論から言うと、''3つめを採用するのがWeb標準''で、ここではそれにしたがって、''style.css'' を別ファイルとして独立させています。

''最初の index.html と この style.css を組み合わせた結果'' → [[DEMO>https://design.kyusan-u.ac.jp/SampleSite/CSS01/]]

~

***CSSの記法
CSSでは''どの部分の・何を・どうするか''を記述します。
記述の基本ルールは以下のとおりです。
 セレクタ(どの部分の) {
     プロパティー(何を)  :  値(どうする) ;
     プロパティー(何を)  :  値(どうする) ;
              :
 }
HTML内の特定の要素を''セレクタ''で把握し、その要素をどう表示したいか、指示を列挙する・・というのがCSSの基本的な書き方です。

-様々なセレクタの書き方 > [[CSS/Selector]]

-参考:コメントアウトについて
 /*  color: red;    */
のように /* と */ で一定範囲を囲むと、コメント扱いとなります。
後で使う可能性のある記述を一時機能停止させたい場合にも使えます。

~

***CSSによるページレイアウト
#image(CSS/html_css.png,right,45%)

CSSによるレイアウト作業は、''大きな箱の中に小さな箱を詰めていく作業''と考えるとイメージしやすいでしょう。一般的には、container という外箱の中に、header 、navといった名前の内箱を順に詰め込んでいくことになります。

箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示されないので、ソースコードを書く際は、きちんとインデントをとってわかりやすく書くことをお勧めします。
~

''参考'':[[ZENGARDEN>http://www.mezzoblue.com/zengarden/alldesigns/]]
ZENGARDENは、すべてまったく同じHTMLに対し、CSSの差し替えのみで様々なビジュアルが実現できることを示す事例集です。

~

***テンプレートから個別ページへ
#image(CSS/html_css_2.png,right,40%)
index.html と style.css のセットは、いわばページのテンプレート(ひな形)です。実際のWebデザインでは、ここまでの作業に多くの時間をかけます。

gallery.html や links.html など、新しいページは、index.htmlを複製して、主たる記事の部分の部分だけを書き換える・・という単純な作業となります。
~

***ファイルのアップロードについて
作成したファイル(群)は、Webサーバーにアップして「公開」となります。
&color(red){ここでは、説明のみとなります。> [[詳しくはこちら>FTP]]};
-FTPクライアントソフト(FileZilla)を起動。
-FTPサーバー(ホスト名)、ユーザID、パスワード の3つを入力して接続
 学園サーバーFTP接続情報'' 133.17.4.74 / K'sLife ID / K'sLife PW
-一般的にはウインドウの左側があなたのPC(ローカルマシン)、右側が接続先サーバー(リモートサーバー)です。
-左のウインドウから右のウインドウへ「アップロード」します((FileZiilaはドラッグ&ドロップにも対応しているので、フォルダを掴んで、ターゲットディレクトリにドラッグ&ドロップするだけで完了します。))。

-学園のサーバーにアップした場合、以下の形式のURLで、自身のWebサイトにアクセス可能です。
 URL:http://www.kyusan-u.ac.jp/~k18as000

-アップロードの仕方とアクセス方法は以下ような関係があります。
--ドキュメントルート直下の ''index.html''(トップページ) を閲覧する場合
 http://xxxxxxxx.com/
--ドキュメントルート直下の test.html を閲覧する場合
 http://xxxxxxxx.com/test.html
--ドキュメントルート直下にsampleフォルダ(中にindex.html)がある場合
 http://xxxxxxxx.com/sample/

つまり、サーバー(ディレクトリ)がひとつあれば、フォルダの数の分だけ複数のWebサイトを持つことができる…ということになります。

~
~

**第12回
***II. 音楽と映像 - 3> 演習06:音×映像
-9:00〜 上映準備 
--動画を YouTube にアップロード
--動画のリンクを[[個人ページに掲載>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]
-9:30 〜 上映会
-アップロードが終了した方から順次上映します。
~

**第11回 12/3
***II. 音楽と映像 - 3> 演習06:音×映像
-12月3日は、2コマとも映像編集の時間とします。
-アイデアにもとづいて、素材の撮影を当日までに済ませておいて下さい。
-第12回、12月10日の %%10:10%% - 上映会を予定しています。
~
***参考:フリーの音楽
-[[YouTubeオーディオライブラリー>https://www.youtube.com/audiolibrary/music]]
--YouTubeが正式に公開しているフリーの音楽・効果音ライブラリーです。
--Googleアカウントでログインが必要です。
-[[DOVA-SYNDROME>http://dova-s.jp/]] YouTube利用OK
-[[魔王魂>http://maoudamashii.jokersounds.com/]] YouTube利用OK

-[[Soundbible.com>http://soundbible.com/]]
-[[FreeSoundProject>http://www.freesound.org]]
-[[TAM MusicFactory ~MIDI,MP3,効果音などの音の素材>http://www.tam-music.com/]]
~

**第10回
***演習05 上映会の続き
-阿萬薫秋/情報デザイン演習I
-生末知菜美/情報デザイン演習I
-上村仁/情報デザイン演習I
-岡部明日香/情報デザイン演習I
-折橋和真/情報デザイン演習I
-鹿毛鈴菜/情報デザイン演習I
-川村晋太郎/情報デザイン演習I
-田中満里奈/情報デザイン演習I
-田村ひより/情報デザイン演習I
-中嶋碧海/情報デザイン演習I
-西隆彰/情報デザイン演習I
-野田萌々菜/情報デザイン演習I
-古野海志/情報デザイン演習I
-森江龍雅/情報デザイン演習I
-山川滉生/情報デザイン演習I
-山本航/情報デザイン演習I
-矢幡龍星/情報デザイン演習I
~

***学科ページのコメントについて
-演習05には以下のコードを付記して下さい。
 &small(この作品は「サイレント(無音)」を条件とした演習課題で制作したものです。);
-コメントでのネタバレを防ぎたい場合は「ボタンクリックで種明かし」となる以下のコードをご利用下さい。
 &answer2(撮影方法,カメラの前に鏡を置いて撮影しました。);
&answer2(撮影方法,カメラの前に鏡を置いて撮影しました。);
~

***映像編集技術に関する補足講義
-映像編集に関わる用語の解説
-各種エフェクトの活用事例
-[[AdobePremiere 操作解説>MovieEditing/Software]]
~

***II. 音楽と映像 - 3> 演習06:音×映像
-テーマ:音と映像の「面白い関係」を模索した実験的映像
-音声: Garageband等で作曲、あるいはフリー素材を活用
-映像:Premiereなどを用いて、一本の動画ファイルとして完成させる
-時間:30秒〜3分程度
-サイズ:1920x1080
-動画はYouTubeへアップして、各自のページに共有掲載
~

***音×映像の「面白い!」
-[[YouTube: ミュージックビデオ]]
-[[YouTube: pv]]
-[[YouTube: アフレコ]] [[YouTube: アテレコ]]
-[[YouTube: ウゴウゴルーガ]](平成初期のCGアニメーション)
-Google Doodles https://www.google.com/doodles
--https://www.google.com/doodles/les-pauls-96th-birthday
--https://www.google.com/doodles/robert-moogs-78th-birthday

-ノーマン・マクラーレン
--[[YouTube: Synchromy Norman McLaren]]
--[[YouTube: Canon Norman McLaren]]
--[[YouTube: Blinkity Blank Norman McLaren]]
--[[YouTube: Neighbours Norman McLaren]]

-音を視覚化
--https://vimeo.com/65475425
//http://www.m-on-music.jp/0000004031/
--https://vimeo.com/98823512
--https://vimeo.com/69633166
--https://vimeo.com/31179423

-映像から音を復元 
http://japanese.engadget.com/2014/08/05/vm/

-音と映像の関係を展開する
--音と映像
--音で映像 / 映像で音
--音を映像 / 映像を音
--音の映像 / 映像の音

-映像に関わる「音」の3つの区分
参考:ミシェル・シオン「映画にとって音とは何か」
--オフの音:撮影現場に存在しない音
ナレーション、BGM
--フレーム内の音(インの音):音源がフレーム内に見えているもの
登場人物の台詞、フレーム内に写っている事物が発する音
--フレーム外の音:音源がフレーム内にはないが、その場で聞こえている音
室内に聞こえてくる、鳥の鳴き声、虫の声、列車の音、街の喧騒・・
~

***参考:フリーの音楽
-[[YouTubeオーディオライブラリー>https://www.youtube.com/audiolibrary/music]]
--YouTubeが正式に公開しているフリーの音楽・効果音ライブラリーです。
--Googleアカウントでログインが必要です。
-[[DOVA-SYNDROME>http://dova-s.jp/]] YouTube利用OK
-[[魔王魂>http://maoudamashii.jokersounds.com/]] YouTube利用OK

-[[Soundbible.com>http://soundbible.com/]]
-[[FreeSoundProject>http://www.freesound.org]]
-[[TAM MusicFactory ~MIDI,MP3,効果音などの音の素材>http://www.tam-music.com/]]

~
~

**第9回

***II. 音楽と映像 > 2. 映像で遊ぶ
-映像の編集(タイトル+本編+エンドタイトル)
-YouTube にアップロード
-[[個人ページに掲載>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]
 #youtube( 動画のID [ , 幅, アスペクト比  ] )
--動画のID(URLの v= の後続の文字列)のみで構いません
--幅:"100%" , "50%" など、"%"文字 を含めて指定して下さい。
--アスペクト比:縦/横の値を記載して下さい。
4:3の場合は、0.75 を記載して下さい。
16:9の場合は、0.5625 を記載して下さい。

-動画を並べて掲載する方法
以下のように表組みにすると、動画を並べて掲載できます。
 |48|4|48|c
 |#youtube(h6d6Yo3DwVI)| |#youtube(GBaHPND2QJg)|
~

***作品鑑賞 10:10 〜
~
~


**第8回

***II. 音楽と映像 > 2. 映像で遊ぶ

-撮影 > PCへの取り込みについて
--スマートフォンの活用:録画 > 共有(AirDrop、GoogleDrive等)
--デジタルカメラ・ビデオカメラの活用:録画 > SDカード > PCへ取込

-動画形式変換サービス
https://convert-video-online.com/ja/

-YouTubeアカウントの準備
今後の演習では、動画は各人のYouTubeアカウントでアップし、これを個人ページに埋め込むかたちで公開します。
Googleアカウントから利用できるので、確認して下さい。
https://www.youtube.com/ ← ページ右上の SIGN IN から

~

***映像制作の基礎

-映像制作にあたっての基本用語・概念の確認
--[[画面サイズ>https://commons.wikimedia.org/wiki/File:Vector_Video_Standards2.svg]]( 1980x1080 など)
--フレームレート(29.97fps など)
--[[プログレッシブとインターレース>http://www.toa.co.jp/miru2/column/column6.htm]](例えば1080pと1080iなど)
--[[動画のコンテナフォーマット>Google:動画 コンテナフォーマット]](mp4)と[[コデック>Google:動画 Codec]](H.264)

-[[AdobePremiere の基本操作>MovieEditing/Software]]
--動画の読み込み
--シーケンスへの配置
--タイトルの作成
--完成動画の書き出し
~

***演習05:映像で遊ぶ
-テーマ:ワンショットムービー
「一切編集なし」で何ができるか? 「撮影」という行為の原点に立ち返って、カメラの可能性を探求して下さい。
-本編映像の他に、タイトル・エンドタイトルをつける
※これらも作品の一部(表面)です。よって''学籍番号は記載しないこと''
-タイトル・本編・エンドタイトルは、編集ソフト(Premiereなど)を用いて、
単純につなげて、一本の動画ファイルとして完成させる
-デジタルエフェクト等、ソフトウエア上での加工は一切行わないこと
-音は加えない(サイレント)。視覚情報のみで勝負する
-時間:タイトル、エンドタイトルを除く本編部分を30秒〜3分程度
-サイズ:[[1920x1080 FullHD>http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Vector_Video_Standards2.svg]]
-動画はYouTubeへアップして、各自のページに共有掲載

-映像の「面白い!」
--[[Movie/Links]]

~
~


**第7回

***II. 音楽と映像 > 1. 音で遊ぶ 9:00 -

-音声の処理について|[[Audacity]]
--トリミング、レベル補正、ノイズ除去・・他

//-[[音声サンプル>https://drive.google.com/drive/folders/1LjgFb14COEhFaHyf3Mu7J-Y4A2ZemjvA?usp=sharing]]

-作品のアップ方法
--GoogleDriveに音声ファイルをアップ
--ファイルを右クリック>共有
--共有設定で「リンクを知っている全員が閲覧可」としてURLをコピー
--[[学科サイトの演習のページ>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]に掲載

-ページには以下のように掲載して下さい。
  -[[Title:◯◯◯◯>https://・・音声のリンク・・]](00:01:30)35MB
  -Data:iPnone 内臓マイク / ボイスメモを使用
  -Comment:
  -参考画像:&image(画像名,,5%);
~

***II. 音楽と映像 > 1. 音で遊ぶ 作品鑑賞 10:10 -
[[学科サイト メンバー一覧>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]
~
~


**第6回

***事務連絡
-文字X写真 提出確認(作品画像のアップロードをお忘れなく)
-本日 11:30 - 展示会場の撤収作業です。
~

***II. 音楽と映像 > 1. 音で遊ぶ

-音の「面白い!」
//--[[4'33" John Cage>YouTube:4'33" ]]
--[[日本の音風景100選>https://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E3%81%AE%E9%9F%B3%E9%A2%A8%E6%99%AF100%E9%81%B8]] [[YouTube:地域の音]]
--[[風鈴>YouTube:風鈴]] [[風鈴祭り>YouTube:風鈴祭り]] [[鹿威し>YouTube:鹿威し]] [[水琴窟>YouTube:水琴窟]]
--[[時報>https://ja.wikipedia.org/wiki/%E6%99%82%E5%A0%B1]] [[チャイム(ビッグ・ベン)>https://ja.wikipedia.org/wiki/%E3%83%93%E3%83%83%E3%82%B0%E3%83%BB%E3%83%99%E3%83%B3]]
--[[YouTube:ウォーターフォン]] ホラー映画の効果音
--[[YouTube:楽器の音]]
--[[YouTube:効果音 手作り]]
--[[錯聴 Illusion Forum>http://www.kecl.ntt.co.jp/IllusionForum/ja/html_index.html]] 視覚に「錯視」があるように聴覚にも・・
~

-録音について
--マイクロフォンについて
--スマートフォンの活用:録音 > 共有(メール転送、DropBox等)
検索キーワード:ボイスレコーダー、サウンドレコーダー、PCM録音
[[iPhone のマイクの位置>GoogleImage:iphone microphone location]]
--デジタルカメラ・ビデオカメラの活用:録画 > PCへ取込 > 音声の抽出

-サンプリング周波数と量子化ビット数について
[[SoundRecording]] をご覧ください。

-音声データのファイル形式
--[[Wikipedia:音声ファイルフォーマット]]
--[[ブラウザの対応 Can I Use?>https://caniuse.com/#feat=mp3]]

-音声形式の変換について
音声データには様々な形式があり、編集ソフトで読めない場合もあります。
以下のようなサイトを利用すると、形式の変換が可能です。
https://online-audio-converter.com/ja/

-動画として撮影したものから音声へ(Audacityの活用)
--http://www.audacityteam.org/
--ファイル>開く で mp4 動画を開くと、音声部分のみが展開されます。
これを mp3形式として保存すればOK
~

***演習04:音で遊ぶ

-作品のアップと鑑賞 ''11月5日''
-音声 30秒〜180秒
-作品のアップ方法
--GoogleDriveに音声ファイルをアップ
--ファイルを右クリック>共有
--共有設定で「リンクを知っている全員が閲覧可」としてURLをコピー
--学科サイトの演習のページにリンク掲載

-ページには以下のように掲載して下さい。
  -[[Title:◯◯◯◯>http://・・音声のリンク・・]](00:01:30)35MB
  -Data:iPnone 内臓マイク / ボイスメモを使用
  -Comment:
  -参考画像:&image(画像名,,5%);
~
~


&color(red){''10月22日(火)は「即位礼正殿の儀」で今年限定の国民の祝日です。''};
&color(red){''基盤センター等の施設も含め大学は休校日です。''};

~


**文字X写真 展示のルール|2019.10.15
***横置き(landscape)の場合
-2作品を上下に構成(キャプションは各作品の左下)
-上の目地から10円玉1個分あける
-作品とキャプションの間隔は「10円玉1個分」あける
-上の作品と下の作品との間隔は、
「10円玉+キャプションの短辺(実際に貼る)+ キャプション」 分あける
-隣の人との間隔は、B4短辺分あける(B4縦置きを間にはさんでその隣へ)
~

***縦置き(portrait)の場合
-2作品を左右に構成(キャプションは各作品の左下)
-上の目地から10円玉1個分あける
-作品とキャプションの間隔は10円玉1個分あける
-左の作品と右の作品との間隔は「キャプションの短辺X2」分あける
-隣の人との間隔は、B4短辺分あける(B4縦置きを間にはさんでその隣へ)
~
~

**失敗から学ぶこと
当専攻の主軸である「情報」には、電子媒体(Web・映像等)と紙媒体(ポスター・冊子等)とがありますが、電子媒体の仕事の「身軽さ」に比べて、紙媒体の仕事には多くのリスク(トラップ)が存在します。
-印刷データは完璧に仕上げないといけない(校正作業が必要)
-印刷時トラブルのリスクがある
--サイズを間違う、色が思うように出ない
--印刷しようとしたら紙がない、インクが切れている
--印刷機が故障する
-裁断時トラブルのリスクがある
--道具・場所が確保できない
--切り方を間違う
-輸送・掲出の際のトラブルリスクがある
--搬送路が寸断されて運べない、事故に巻き込まれて焼失する
--掲示許可が得られない
--貼り方を間違う(貼り直すには再印刷が必要)

などなど、要するにすべてのリスクは「紙」がハードウエアであることに起因します。現代社会では、このリスク回避と効率化のために、いかに情報を電子化して配信するか・・その技術が求められています。今後、多くの業務が「ハード」から「ソフト」へと移行することが予想されます。

もちろん、電子媒体にも致命的なリスクがあります。以下、電子化できても、なお残る致命的な問題についても確認しておいてください。電子情報は便利な分、トラブルが生じた際のリスクは、紙媒体よりも大きくなるため、より一層の注意が必要です。以下、電子媒体が抱えるリスクの例です。

-サイトのセキュリティー・・悪意のあるプログラムに狙われるとサイトの情報が改ざんされるなどの問題が起こります。セキュリティー対策は必須です。
-サーバートラブル・・サーバー環境に潜むバグ、ウイルスによる攻撃。サーバーが落ちるとすべてがストップします。別のサーバーにクローンをつくっておくなどの対策が必要です。
-電源損失・・台風・洪水等の自然災害があると停電します。すべてが機能不全をおこします。電源を確保する手段について意識する必要があります。

~
~

**第5回
***I. 文字と写真 > 3.文字と写真のコラボレーション 演習003:文字 x 写真

-''準備のお願い|以下をご持参下さい。''
--カッター(スチレンボードをカットします。刃は大きい方が安定します。)
--40cm以上の定規(B4 にカットする際に使用します)

-''作品(データ)は授業開始前までに仕上がっている前提です。''

-''本日の作業の流れ''
--作品画像を学科サイトにアップ(2点)
--A3サイズにプリントアウト(2枚)
--ノリパネに貼って B4サイズにカット
--17号4F に展示

-縦置き、横置きで、壁面を分けます。以下の調査にご協力下さい。
[[縦置き/横置き 確認調査(学科WhiteBoard)>https://docs.google.com/spreadsheets/d/1prtWvrEPD8hjt_x5UV0WE1C0sGuHkJQwSDVU7KHy0kA/edit?usp=sharing]]

~

***9:00 - 9:30
-''今回の作品を[[学科サイト>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]にアップ(演習03)''
Web用に書き出し(長辺 1280px幅, jpg / gif / png いずれかで最適化)
~

***9:30 - 10:50
パネルを製作します。
-A3 サイズでプリント(実習室内で印刷)
-A3 ノリパネに貼付(4F共同工房 ノリパネはこちらで準備します)
-B4 サイズにカット(4F共同工房 カッター・定規持参)
~

***11:00 - 
以下のとおり展示します。
-壁面(17号4F コミュニケーションギャラリー)
-掲示(壁面用コマンドタブ・両面テープ)
-記念撮影
-展示期間:10/29まで(2 週間)
-撤収:10/29 11:45 - 
~
~

**第4回
***10/8 開始前までのお願い
-[[bokete>https://bokete.jp/]]セレクション 2019 にご協力ください。
--[[こちらから bokete の画像検索>GoogleImage:bokete 殿堂入り]]  
--[[ここにアップして下さい。>https://drive.google.com/drive/folders/1O6xox0_9Ucisr61atkH_EZWIxTyBRrV9?usp=sharing]]
--先輩のセレクションは[[特設ページから閲覧できます。>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E7%89%B9%E8%A8%AD/MembersOnly]]

-新規「お題」の選定にご協力ください。
https://commons.wikimedia.org/
Wikimedia Commonsにある写真の中から「写真で一言」のお題として使えそうな写真をピックアップしてください(PD あるいは CC-BY ライセンス)
--[[ここにアップして下さい。>https://drive.google.com/drive/folders/1pHxOSyNAaCBo5XUtTDw1734cdPm6HPo_?usp=sharing]]
~


***I. 文字と写真 > 3.文字と写真のコラボレーション 演習003:文字 x 写真
~

''制作物の仕様''
-各自の「文字X写真」 のアイデアで ''作品2点''
この演習では、制作のアイデアが明確になるよう、同一のアイデアで各自2点作成することを前提とします。
-''作品は'' A3(縦または横)のアートボードにB4のトリムをつけて制作
参考:B4サイズ:257 × 364 ミリ
-''キャプション''は[[オープンキャンパス用のものを利用してください。>http://art.kyusan-u.ac.jp/socialdesign/index.php?Files]]
--タイトル:◯◯◯◯◯◯◯◯
--サブタイトル:文字が写真、文字の写真…など、作品の発想法を明記
--氏名(英字表記含む):九産花子 Hanako Kyusan


''展示準備''
-縦構図あるいは、横構図で、壁面を分けます。以下の調査にご協力下さい。
[[縦構図/横構図 確認調査(学科WhiteBoard)>https://docs.google.com/spreadsheets/d/1prtWvrEPD8hjt_x5UV0WE1C0sGuHkJQwSDVU7KHy0kA/edit?usp=sharing]]
~


**第3回
***I. 文字と写真 > 2.写真で遊ぶ  演習02:組写真

-10月1日、授業開始前までに各自写真撮影を済ませて下さい。
-''10:00 まで''に以下のような手順で各自アップロードしてください。
-Illustratorの作業準備
1) 演習02用のフォルダをつくる
2) 写真のデータをすべて演習02フォルダに投入
3) Illustrator で新規作成 > ai ファイルを演習02フォルダに保存
以上で、必要なファイルがすべて演習02フォルダに納まります。
-Illustrator でレイアウト作業
4) アートボード上に画像をすべて''リンク配置''(ファイル>配置)
5) 画像は必要に応じてクリッピングマスクでトリミング
 &small(Photoshopを使って画像自体をトリミングするのは非効率);
6) グリッド、整列ツール等を活用してきれいに並べる
-保存( Illustrator形式 拡張子 .ai )
-書き出し> Web用に保存(960px または 1280px幅)
--形式は JPEG, PNG, GIFF のいずれか
--画質を保って、ファイルサイズが最小になるように工夫

[[学科サイト|情報デザイン演習I>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]
-''10月1日 10:10 〜 '' 作品発表・講評

~

***I. 文字と写真 > 3.文字と写真のコラボレーション 演習03:文字 x 写真
''11:00 〜 課題の説明''

-文字と写真の「面白い!」
--[[GoogleImage: Poster]]
--[[GoogleImage: 写真 遊び心]]
--[[GoogleImage: ポスター キャッチコピー]]
--[[GoogleImage: Caption]]
--[[GoogleImage: テロップ]]
--[[GoogleImage: bokete]]
--[[GoogleImage: Caption for Pictures]]
--[[GoogleImage: 面白セリフ 画像]]
--[[GoogleImage: 文字 モザイクアート]]
--[[GoogleImage: ステンシルアート]]

-文字と写真の関係を展開する
--文字と写真
--文字で写真 / 写真で文字
--文字を写真に・・ / 写真を文字に・・
--文字の写真 / 写真の文字

-先輩の成果物を一通り確認して下さい。
[[検索:/情報デザイン演習I>https://design.kyusan-u.ac.jp/socialdesign/?cmd=search2&q=%2F%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]
「詳細表示」のチェックを外すと見やすくなります。


''課題の仕様''
-この演習には、展示まで含めて2週間を使います(10/15の2限目に展示)
-Illustrator でA3(縦または横)のアートボードにB4のトリムをつけて制作
-アートボードは2つ。この演習では、制作のアイデアが明確になるよう、同一のアイデアで各自2点作成することを前提とします。
-各自のページに演習02と同様にアップして下さい。
書き出し>Web用に保存(1280px幅, jpg / gif / png いずれかで最適化)
-作品はWebアップと同時に、B4のパネル展示を前提とします。

-補足:パネル制作について
--トリムマークの使い方 > プリントアウト
--ノリパネの使い方 > パネル化
~

***+演習 「写真で一言」
[[bokete>https://bokete.jp/]]、[[ipponグランプリ 写真で一言>YouTube:ipponグランプリ 写真で一言]] のような文字と写真の関係構築について簡単な演習を行います。

-[[bokete>https://bokete.jp/]]セレクション 2019 にご協力ください。
--[[こちらから bokete の画像検索>GoogleImage:bokete 殿堂入り]]  
--[[ここにアップして下さい。>https://drive.google.com/drive/folders/1O6xox0_9Ucisr61atkH_EZWIxTyBRrV9?usp=sharing]]
--先輩のセレクションを[[特設ページから閲覧できます。>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E7%89%B9%E8%A8%AD/MembersOnly]]

-新規「お題」の選定にご協力ください。
https://commons.wikimedia.org/
ウィキメディア・コモンズにある写真の中から「写真で一言」のお題として使えそうな写真をピックアップしてください(PD あるいは CC-BY ライセンス)
--[[ここにアップして下さい。>https://drive.google.com/drive/folders/1pHxOSyNAaCBo5XUtTDw1734cdPm6HPo_?usp=sharing]]


-参考:笑うメディアクレイジー https://curazy.com/
--https://curazy.com/archives/198832
--運営は「笑いを科学する」制作会社 laugh-tech

-付記:写真の視線と人称
--人物 → 人物:対象に話しかける表現
--人物 → 物:独り言
--カメラ目線:こちらに訴えかける表現

-付記:話し言葉と書き言葉
--話し言葉:状況文脈の存在(今ココの状況がわかる)を前提とする
主語が欠落しても伝わります。
--書き言葉:文章から得られる文脈のみが前提
主部・述部をきちんと書く必要があります。

~
~

**第2回

***事務連絡
-個人ページへの受講科目情報記載のお願い
受講科目一覧は、課題・期末試験対策における重要な共有情報となります。
是非、共有をお願いいたします。参考:[[受講科目ページ>https://design.kyusan-u.ac.jp/socialdesign/?cmd=search2&q=%2F%E5%8F%97%E8%AC%9B%E7%A7%91%E7%9B%AE]]
~


***I. 文字と写真 > 1.文字で遊ぶ [[演習01>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]

-本日の前半は制作 > アップロードの時間とします。

-[[''10:00までに''作品を個人ページにアップ>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]
--アップする画像は 1280px幅以下で、ファイルサイズが小さくなるよう工夫して下さい。
--Webに掲載できる画像の形式は、JPEG, PNG, GIF, WebP, SVG などです。
Photoshop形式(.psd)や Illustrator形式(.ai)のデータは掲載できませんので、「ファイル>Web用に書き出し」等で最適化が必要です。
参考:[[WebDesign/Images]]

~


***I. 文字と写真 > 2.写真で遊ぶ
-写真の「面白い!」
--[[Photography/Links]]
--[[GoogleImage: 組写真]]
--[[GoogleImage: 4コマ漫画]]
--[[GoogleImage: Stereogram]]
--[[GoogleImage: 超芸術トマソン]] [[超芸術トマソン・まとめサイト>http://matome.naver.jp/odai/2142228326633031001]]
--[[思い出サルベージ>http://jsis-bjk.cocolog-nifty.com/blog/]] 日本社会情報学会 災害支援情報支援チーム
https://www.youtube.com/watch?v=DYk5EhBJ_JI

-写真の可能性を探る
--[[Photography]]

-''演習02:組写真''
--組み方のアイデアを検討
--作品制作 縦 / 横 / 縦横 に並べてまとめた画像を投稿 
---画像の調整は最小限にとどめること(写真の構成のみで勝負)。
 &small(水平出し、トリミング、レベル補正、解像度(画素数)変更 程度);
---合成や特殊効果フィルタの使用は不可。
---文字を加えてはいけません。写真のみで勝負して下さい。
--制作手順
---撮影 > 選別
---画像処理(必要最小限)
---''IllustratorでA3(縦または横)のアートボードに配置'' > 保存
---Web用に保存(1280px幅・アップロード提出用)
--[[''10月1日10:00まで''に、個人ページにアップ>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]
 
Illustratorファイルとリンク配置した画像をひとつのフォルダにまとめ、これをマスターデータとして各自保存しておくこと。
~
~


**第1回
***ガイダンス
-本授業は、情報デザイン専攻における最初の演習基幹科目です。
-文字、画像、音声、映像、Web あらゆるジャンルの「情報」について、新規性のある活用方法・表現方法を探ります。
後期15回の展開について > [[情報デザイン演習I]]
-個々の演習テーマごとに使用するソフトの概説を加えます。
アイデアはソフトウエアに依存しないので、何を使用しても構いません。
-演習の成果は、[[学科サイトの当該ページにて公開します。>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]
~

***I. 文字と写真 > 文字で遊ぶ 演習01

-活用方法、あるいは表現方法に関するアイデア出し
-素材となる「言葉」探し 単語・熟語・俳句・歌詞・散文・・・

-発表形態:画像 または 動画
--現物を写真あるいは動画に撮る
注)動画は直接掲載できないので、YouTube等へアップして下さい。
--Illustrator で制作した場合は「Web用に書き出し」
--画面上の成果をスクリーンショット [Command] + [Shift] + [4]
--画面上の操作を動画でキャプチャー QuickTimePlayer の画面録画

-発表方法:[[''次回 9月24日 10:00まで''に、個人ページにアップ>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92I]]
~

-文字と言葉の「面白い!」
--[[GoogleImage: Typography]] / [[GoogleImage: タイポグラフィー]]
--[[YouTube: Motion Typography]]
--[[GoogleImage: キャッチコピー]] [[NAVERまとめ>http://matome.naver.jp/odai/2135672763438036501]]
--[[GoogleImage:漢字 ロゴ]]
--[[GoogleImage: 顔文字]]
--[[GoogleImage: アスキーアート]] 参考:[[ImgToAA(めめんと)>https://mementoo.info/archives/1773]]
--[[GoogleImage:アンビグラム]]
--[[YouTube: にほんごであそぼ じゅげむ]] [[Google:NHK Eテレ]] 
--[[YouTube:日本の形 寿司]] [[Google:NAMIKIBASHI]] [[Google:小林賢太郎]]
//寿司 / 夏休み / お茶
--[[Google: デザイン あ]] [[Google:佐藤卓]] [[Google:中村勇吾]]
--[[千葉!滋賀!佐賀!>YouTube: 千葉!滋賀!佐賀!]] [[おでん うでん おどん>YouTube: おでん うでん おどん]] [[Google:ラーメンズ]]
//--[[YouTube: ペリーの開国要求]] [[Google:宮崎吐夢]]
//--[[YouTube: PPAP]]
--[[YouTube: 楽しい国語]] あたかも もし〜なら
--[[Google: 俳句]] [[百人一首]]
--[[Google: 青空文庫]]

-主語と述語、名詞と動詞の「新しい」関係を考える
--風が歩く、雨が燃える、雪が笑う、鉛筆がゆるむ・・・
--ひらがなを切る、空を持ち上げる、Webを緑化する・・・

-[[GoogleImage: 当て字]]
--Quiz:大無人、天無人、王無棒、罪無非、吾無口・・・ 

-日本語は外来語を「名詞」として取り込むことが得意な性質を持ちます。
--名詞+する > 動詞に
--名詞+ な > 形容詞に
--名詞+に > 副詞に
-一般に文には名詞と動詞が必要で、名詞の修飾を形容詞が、動詞の修飾を副詞が行いますが、そう考えると、名詞として取り込んだ外来語だけでも文が作れてしまう。これが日本語というシステムの柔軟性です。外国の文化・技術を柔軟に取り込んでいく日本人の特質は、ここに理由があるのかもしれません。
&small(参考:加藤重広, 2019, 言語学講義, ちくま新書);

-文字と言葉の可能性を探る
--[[Typography]]
--[[言葉とは何か>Language]] [[Google: ソシュール]] [[Google: ロラン・バルト]]
--[[WiseWords]]

-Illustratorの操作について
--表示>定規>ガイドラインを出して、必要なところは揃えて下さい。
--ラインテキストのまま個々の文字を動かすこともできますが、
 一文字ずつ独立させた方が編集はしやすくなります。
--''文字のアウトライン''をとれば、フォントの無いPC環境へ移動しても
 作業を継続することができます。

-Illustratorからの保存形式について
--AI(.ai)形式:マスターファイルの保存に(オリジナルデータ)。
 最新バージョンだと異なるPC環境では開けないことがあります。
--PDF形式:他の環境でも正しく再現されます。
--JPEG, GIF, PNG形式:データを画像として書き出すとこれが得られます。
ファイル>Web用に書き出し で形式、解像度等を最適化して書き出し。
~
~
#hr
以下、準備中

~
~