授業概要

アプリケーションの制作(企画、デザイン、実装)を具体的に発想できること目的とし、Webアプリケーションを制作プロセスを技術的な観点を踏まえながら概観する

はじめに

前期の授業をへた皆さんは既に、Webの構成要素――HTML, CSS, JavaScript――の基本的な文法を知っているはずです。 そして現代の多様なWebのあり方にも触れているはずです。

  • 明らかに文字組みと紙面印刷文化の発展継承(Graphic Desgin)としてデザインされているもの: 例えば The Graphic Design Review (JAGDA), Featured Projects
  • デジタルメディアとして即時的に反応を返す動的なグラフィックを提案しているもの: 例えば yugop
  • Webならではのミーム的様式発展: 例えば brutalist web, html energy
  • 背後にある大規模なシステムのインターフェースとなっている対話型・Feed型のもの: 検索、SNS、対話型AI
  • Web上で動作するゲームやグラフィック制作ツールなど本格的なアプリケーション: Figma, ゲーム会社がリリースするブラウザゲームなど
  • 3D技術やブラウザAPIのハックを前面に押し出している演出的なもの: chrome experiments, SOUR “映し鏡”

本授業ではこうしたWebのあらわれを構造的に読み解き、自身のリテラシーとして体感することを目的とします。 ただし巨大なものはいきなりはつくれないので、本授業では、データベースをそなえたWebサーバーの簡単な構築と具体的な活用をおこないます。Webアプリは私たちの制作手段やコミュニケーションツールとしてどのような道具立てができるかを柔軟に考えていきましょう。

役割分担

本授業ではクラスを2つのロールに分けます。

企画ディレクションチーム: 木曜日出席

  • Webページが人の目に触れる接点としてのデザイン部分の設計を考えます
    • Webという情報が幾重にも入れ子になっているメディアにおいて、どのように視覚的に整理するべきか
    • これまのでWebデザインの文脈を整理しながら、今後表現領域における提案が可能か
  • 制作段階ではサービス設計とフロントエンドのデザインをおこないます

テクニカルディレクションチーム: 火曜日出席

  • Web自体のメディア特性を構造的に理解し、技術的要素から新しい表現手段を考えます
  • 既存の表現手法を疑い、技術的新規性と表現的新規性がどこにあるかを模索します
  • 制作段階ではサービスのテクニカルディレクションとサーバーを含めた実装をおこないます
    • AIを駆使しながら現代的な開発を進めます

最終的には、このそれぞれのロールの2人がチームを組みサービスの提案と実装を行ってもらいます。

Lessons