情報デザイン演習IIA/2022/0613

第９回

情報デザイン演習IIA/2022｜受講生一覧

AGENDA

• 以下名簿が表示されます。出欠確認・座席記録をお願いします。
  　出欠確認・座席記録

• ３限目は、解説動画をご覧いただいた上で、各自の作業を進めて下さい。

• ４限目は、通常どおり個別質問対応の時間とします。
  • Zoomの会議室は 15:40 に開設します。
  • 対面出席の方は、デジタルラボ 504（17号5F）にて対応します。
  • 遠隔参加の方は、以下から対応します。
    Zoomミーティングに参加する
    ミーティングID: 975 5501 3132
    パスコード: 041343
  • リアルタイム参加と受講生プレゼンが前提のため、録画は行いません。

• 学科サイトに進捗記録を記載して下さい。　　受講生一覧

CONTENTS

• はじめに
  • 進捗確認
• 補足講義
  • 分類について
  • 情報の出口としての Webサイトの可能性
  • Markdown記法

はじめに

進捗確認

• 受講生の方のプロジェクトの現状を相互に確認して下さい。
  受講生2022 一覧
• プロトタイプの相互評価について、役目を終えたシートは権限を「閲覧のみ」に変更するとともに、ページ上の表記は、以下のようにコメントアウトして非表示にして下さい。

  // ***相互評価 2022.05.23
  // [[''プロトタイプ評価シート''>https://docs.google.・・=sharing]]

補足講義

分類について

複数の事物や現象を、一定の視点でグループに分けることを分類といいます。また、分類によってつくられたグループのことをカテゴリといいます。以下の２段階のプロセスがあります。

• 区分：対象を分ける
• 体系化：分けられた対象を体系的に配置

みなさんの多くのプロジェクトに見られるように、何らかの情報を収集してそれらを冊子やWebサイトに掲載する場合は、漫然と羅列するのではなく、いくつかのカテゴリに分けて、目次やメニュー上に可視化することが必要です。

机の引き出しや本棚を整理するのと同じです。分け方（分類の視点）は千差万別で「正しい分け方」が決まっているわけではないので、自身が集めている情報の全体を「引き」で眺めて、最適な分け方を検討して下さい。

情報デザインは、ビジュアルを整える以前に、情報を整理・体系化することが必要です。デザイナーの仕事は「森に道をつくること」でもあります。与えられたレールの上を行くのではなく、自分で道を作る経験を積みましょう。

項目が多すぎてまとめようがない・・という場合は、アルファベット（50音）順に並べたり、時間軸にそって（歴史年表）並べたり、価格の順に並べたりすることで、閲覧者がアクセスしやすい基準を提供します。

後期には WordPress という Webの業界標準CMSを利用します。従来型の分類ができないと、WordPress の真価を発揮させることができません。今のうちに「何でも分類する癖」をつけておいて下さい。

情報の出口としての Webサイトの可能性

Webサイト以外のテーマで取り組んでいる方にとって、写真、イラスト、動画などをどのようにしてひとつのコンテンツにまとめて公開するかは悩みどころだと思います。で、最も良い方法は、結局 Webサイトを作る・・です。index.html １ページでも、そこに写真や動画を並べることで、ひとつのコンテンツとして完成形を得ることができます。

• Webサイトフォルダは、ポータブルな情報提示用のパッケージです。
  あらゆる情報を HTML+CSS でページ化して、サイト全体をフォルダにまとめるのが、最も効率的な情報管理法と言えます。

• ブラウザは万能プレーヤです。
  静止画、動画、音楽、何でもブラウザ上に表示することができます。

• フォルダ構成例

  一般的なサイト構成	シンプルなメディアパッケージ

• 見出し、本文、箇条書き

  <h3>見出し</h3>
  <p>本文</p>
  <ul>
      <li>箇条書き項目１</li>
      <li>箇条書き項目２</li>
      <li>箇条書き項目３</li>
  </ul>

• 画像の掲載

  <img src="images/xxxx.jpg" width="320">
  使える形式 JPEG、GIF、PNG、WebP、SVG

• 動画の掲載

  <video src="movies/xxxx.ogv" autoplay></video>
  属性　src="URL" ソース　width="480" 表示幅　controls コントロールバー
  　　　autoplay 自動再生　 loop ループ再生　muted 消音　
  　　　poster=”画像データのURL” ポスター画像
  使える形式　MP4、WebM、Ogv

• 音声・音楽の掲載

  <audio src="sounds/xxxx.wav" controls></audio>
  属性　src ソース　autoplay 自動再生　loop ループ再生　
  　　　controls コントロールバー　など
  使えるデータ形式　WAV、MP3、Ogg Vorbis、AAC

• PDFその他のファイルへのリンク
  ページ上に直接掲載できないデータは、以下のようにリンクで掲載します。

  <a href="pdf/xxxx.pdf"> XXXX.PDF </a>
  <a href="zip/xxxx.zip"> download </a>

• 動画の掲載に関する付記
  一般に動画は YouTube 等にアップして埋め込みコードを掲載します。

  <iframe width="560" height="315" 
    src="https://www.youtube.com/embed/NJZW8U9bbmM"
    title="YouTube video player" frameborder="0" ・・allowfullscreen>
  </iframe>

  
  

Markdown記法

Markdownファイル（.md）を使った情報のパッケージ化も可能です。

• Markdown
• https://github.com/koichi-inoue/MarkdownSample
  現状 Markdown の表示にはブラウザにマークダウンビューワーをアドオンとして追加するなどの手間が必要ですが・・・