WebWebしてこのサムネイル画像
共同制作AI使用教材制作

WebWebしてこ

「インストラクショナルデザイン演習」という授業で制作した、Web制作の一連の流れについて勉強できる教材サイトです。

制作背景

「インストラクショナルデザイン演習」とは、効果的な教材の制作方法について学ぶ授業です。
今回私たちのグループは、「Web制作を行ったことはあるけど、企画やコンセプトから決めてサイト制作はしたことがない人」向けに、Webサイト制作の一連の流れを勉強できるサイトを制作しました。
限られた時間での制作だったため、教材の文章制作やコーディングにはAIを使用しながら、内容のわかりやすさなどは人の手でチェックしながら制作していきました。

制作時期

2026年 7月

大学3年

メンバー

2人(同級生 / 私)

担当箇所

教材内容(共同)、教材ページ、クイズページのコーディング(共同)

技術スタック

  • HTML/CSS
  • JavaScript
  • AI

Journey

  • 教材内容制作

    Figjamで教材内容を書き出していきます。メンバーが2人ともWeb制作を長くやってきた人間だったので、今までの授業での知識と、2人の経験を教材に反映させていきました。今回は教材制作の授業だったので、サイト自体よりも教材内容のクオリティを上げることを意識して制作しました。

  • サイト制作

    デザインとコーディングはまずAIに任せて、その後改良したい部分を自分の手で改良していく形で進めていきました。

  • 付録:チートシート

    付録として、教材で勉強したWeb制作の一連の流れを一目で復習できるチートシートを制作しました。これにより、教材ユーザーは本教材で勉強後、ユーザー自身でWebサイトを制作する際に教材の内容をすぐに見返してサイト制作に生かすことができます。

全作品一覧に戻る