筑紫台高校｜2019.01.25
WebDesign for a sustainable future
次世代に求められるITスキルとデザイン思考
九州産業大学 芸術学部
ソーシャルデザイン学科 教授
井 上 貢 一
日本デザイン学会 / 芸術工学会 / greenz people
ソーシャルデザイン学科 教授
井 上 貢 一
日本デザイン学会 / 芸術工学会 / greenz people
はじめに
Webは現代社会の中核
- Webを通じて世界がつながっています。
- あらゆる「情報」がWebを通して交換されています。
- あらゆる「データ」がクラウド上に置かれています。
- あらゆる「モノ」がWebを通して制御されています（IoT）。
- あらゆる「仕事」がWebを通して自動化されています（AI）
- Web・IT関連のスキルを持った人が求められています。
Webデザイン系の進路
- Webデザイナー / UX・UIデザイナー
- Webプロデューサー / ディレクタ
- Webプログラマ / エンジニア
- Webオペレーター / サイト運営
- サーバー・ネットワークエンジニア
- ＋ 今はまだ存在していない新しい職業
綺麗なwebサイトを作るだけであれば誰でも簡単にできる時代。
Webを活用した新たな体験・新たな価値を生み出すことが求められています。
WebDesign
Webデザインに必要なもの
- アカウント：インターネット上の自身の「情報基地」
Googleアカウント、AppleID など - パソコン：Windows / Mac / Linux
最近ではクラウド上の仮想マシンを使うことも多くなりました。どこにいてもログインすれば作業ができるので、自分のパソコンは必須ではありません。 - 開発環境：テキストエディタ, ブラウザ, FTPクライアント
Web開発の仕事に必要なソフトウエアの大半はオープンソースです - 開発関連知識：
- HTML：ページの内容を「タグ」を用いて記述するマークアップ言語
- CSS：ページのスタイル（見た目）を記述するスタイルシート言語
- JavaScript：ページ内の要素のふるまいを記述するプログラミング言語
- PHP：サーバーサイドのプログラミング言語
- Python：汎用プログラミング言語（特に AI の開発では主流）
- サーバーに関する知識：Webサーバー, FTPサーバー, DNSサーバーなど
HTML + CSS による Webページの事例
- index.html｜文書の構造と内容
- style.css｜文書のスタイル
Webの技術でできること
- Webサイトを基盤とした様々な情報公開・取引
- 様々なアプリケーションをブラウザ上で動かす
- オフィスツール：Google ドキュメント、スプレッドシートなど
- CG・映像：WebGL 1 WebGL 2
- 音楽：DAW BackingTracks PIANO Drums
- AI：Cloud Text-to-Speech Cloud Vision API
- グラフ機能：cos(x)+cos(3*x) y=x^2-4, y=-3x^2+6 z=4x^2-3y^2
- 仲間同士で情報をシェアする SNS Blog Wiki
大学での情報共有の事例：ソーシャルデザイン学科
情報共有体験
はじめに｜Wikipedia について
- 誰でも自由に執筆できるオープンな百科事典（知の一大データベース）
- Wiki とはブラウザ上で簡単にページの編集ができる Web管理システム
- 画面上の「編集」をクリックすると記事の編集が可能
当然、いたずら書きもできてしまいますが、マナーに違反する利用者を閉め出すしくみがあるので、一定の秩序が保たれています。 - ジミー・ウェールズ らが 2001年に設立（運営資金は寄付）
- 背景にはコピーレフト という考え方（Copyright の逆、自由の要求）
Wiki 体験
- 以下のサンプルサイトにアクセスして下さい。
サンプルサイトは閉じました。2019.01.25.14:00 - 検索窓に、あなたの氏名を入力して [ 検索 ] をクリック。
- 以下のように表示されます。
このウィキでページ「◯◯◯◯」を新規作成しましょう。
- 氏名の部分をクリックすると、ページが作成されて編集画面に入ります。
MediaWiki では「検索」でページが存在しない場合に「新規作成」となります - メモ帳と同様です。とりあえず何か書いて「保存」をクリックして下さい。
ページの更新をする場合は、右上の「編集」から何度でも編集可能です。 - 左メニューの「最近の更新」から、他の人のページを見ることができます。
- 以下の編集記法を参考に、あなたの好きなモノ・コトを紹介する記事を自由に編集してみて下さい。
Wikiの編集記法
このサンプルサイトは Wikipedia と同じ仕組みでできています。編集記法はWikipedia と同じです。
- 大見出し：==◯◯◯◯◯==
- 小見出し：===◯◯◯◯◯===
- 箇条書き：*◯◯◯◯◯
- 文章段落：◯◯◯◯◯◯◯◯◯◯◯◯・・・（２回改行で段落区切り）
- 外部リンク：[ http://www.example.com （リンク文字）]
- 内部リンク：[ [（サイト内のページ名）] ]
- YouTube動画：{{#ev:youtube|936KjlDm-uM}}
- 詳細は以下
https://www.mediawiki.org/wiki/Help:Formatting/ja
https://www.mediawiki.org/wiki/Help:Editing_pages/ja
Wiki体験後の確認
この体験によって、Wikipedia の執筆が予想外に簡単であることがわかったと思います。機会があれば、あなたも「知の共有」に参加して下さい。
Wikipedeia は多くのボランティアの善意にもとづいて運用されているものなので、
安易ないたずら書きなどは絶対にしないようにして下さい。
インターネットは匿名空間ではありません。
接続した機器は IPアドレスによってわかる仕組みになっていますので、くれぐれもご注意を。
デザイン思考が「価値」を生む
この国の現状
- 日本の人口
- 日本人の未来に対する危機意識の低さ
- 人間の仕事が機械に代替される順序
足（移動） ＞ 脳（認知・発想） ＞ 腕（操作） ＞ 顔（表情）＞ 手指 - AI・ロボット の現状
- パターン認識（画像・音声認識、顔・生体認証、物体検知、動作解析）
事例： 購買行動解析（盗難防止） 採用面接（一次）の自動化 - 自動翻訳 自然言語処理 文書作成（AI 記者） 作曲 作画
- 製造 在庫管理 自動運転 現場監督 災害救助 警察 軍事
- パターン認識（画像・音声認識、顔・生体認証、物体検知、動作解析）
未来を見据えた学び
- ヒトに特有の能力を伸ばす
不安、問題意識、動機、嗜好、好奇心、理想、共感 ＋ 身体性
マニュアルを丸暗記するような仕事は AI+ロボット が担います
- Web・ITを駆使した生産効率の高い仕事ができること
デザイン分野は情報科学系同様にコンピュータの活用が日常的
- モノ（hard）ではなく、情報（soft）で解決する
- モノを動かさない → 情報を動かす 実体渡し → アドレス渡し
- 防波堤はつくらない → 避難マップを作る・津波情報をWebで共有する
- パッケージはつくらない → 風呂敷の使い方を動画で紹介する
- 大きな看板はつくらない → プロジェクタで投影する ...などなど
- オープンであること
- 今、インターネットを支えている技術の大半はオープンソースです
- Webの世界は、ソースコードをオープンにする仕様によって拡大しました
人間は内面をオープンにするという戦略によって繁栄した生物です
すばらしいアイデアはみんなで共有する・・という発想が健全です
- Webデザインが素敵な理由
- 創造したものが半永久的に再利用できる（プログラムライブラリー）
- 改良を続けることで確実により良いものへと成熟する
- 資源とエネルギーを浪費しない（材料不要、ゴミも出しません）
Webデザインからソーシャルデザインへ
- アイデアをオープンにして共有すること
今、インターネットを支えている技術の大半はオープンソースです
- 価値は所与のものではない
「評価」「選択」ではなく、「関係」の再・構築が重要
ソーシャルデザイン学科 情報デザイン専攻
芸術的感性と情報技術(IT)で「面白い!」をデザインする。
九州産業大学 芸術学部｜Faculty of Art & Design
芸術的感性と情報技術(IT)で「面白い!」をデザインする。
九州産業大学 芸術学部｜Faculty of Art & Design
付記：「芸術学部」について
Art & Design を学ぶ、その先の未来
芸術｜Liberal Arts は学問そのもの。様々な未来の選択肢があります
芸術学部は就職に関して不利ではなく、むしろ有利な状況
- モノ：家具、家電、雑貨、食器、楽器、バイク・車・・
- 空間：インテリア、照明、ディスプレイ、建築、環境・・
- 情報：広告、出版、映像、CG、ゲーム、Web、情報通信・・
- 作家・演出家： 北条司 松尾スズキ 森りょういち 湯浅政明・・
- ＋ 今はまだ存在していない新しい職業
芸術は総合的な学問
- 「芸術」は Liberal Arts の訳。それは自由な学びを意味する言葉です。
- すべての学問の究極は「人間とは何か、どうあるべきか」を考えること
- 学問には文系も理系もない（理系特化政策は産業革命以後）
- 卒業式ではなく「学位授与式」 学士 / 修士 / 博士
参考：国際標準教育分類 - 教科書はない / 見解も様々 / 自ら調べ・考える / 答えはひとつではない
- 学生と教員は「研究室」をもつ共同研究者
- 芸術学部は誰でも受験できる学部です。
センス、絵の才能、デッサンの経験・・それらは必須ではありません。
デッサン、色彩構成、写真、小論、国・数・英、センター利用他
アートとデザインの違い
- アート
- 自分の中に「動機」を見出す
- 自分の表現を追求する
- 既成概念を破る新規性の追求（惰性化した日常を挑発する存在）
- アウトプットは「作品」｜世界にひとつだけの存在｜作家はサインを入れる
- デザイン
- 暮らしの中に「問題」を見出す
- 人と社会のニーズに応える
- 問題を解決し日常を快適にする（時には空気のような存在）
- アウトプットは「製品」｜設計図にもとづく機械生産｜デザイナーは匿名