第1回：最新のWeb制作の動向とツール群の紹介
授業概要
技術の移り変わりが早いWeb業界において、Web業界の全体像と現在のトレンドを研究し、最新情報を追い続けることの重要性を学ぶ。
学習内容
- 一般的なWeb制作のフロー（企画・デザイン・コーディング・公開）
- コーディングありとノーコードの違い
- ノーコードツールの紹介（Studio, Wix, Framerなど）
- なぜ今ノーコードなのか（効率化・プロトタイプ）
演習課題
気になるWebサイトを3つピックアップし、なぜ良いと感じたかをまとめる。
第2回：Studio 基礎・ノーコードとは
授業概要
Studioの基礎知識を学習し、基本的な操作方法を習得する。
学習内容
- アカウント作成とインターフェースの説明
- プロジェクトの作成
- 基本パーツ（ボックス、テキスト、画像）の配置
演習課題
名刺サイズの簡易プロフィールページを作成。
第3回：Studio レイアウト模写（1）
授業概要
Studioの操作方法に慣れつつ、視覚的な模写力を養う。
学習内容
- レイアウト模写（1〜2セクション）
- 各ボックスの特徴紹介
- ボックスの”並ぶ方向”について
演習課題
参考元Webサイト（1セクション）のレイアウト模写を作成。
第4回：Studio レイアウト模写（2）
授業概要
Studioの操作方法に慣れつつ、複雑なカラムレイアウトの理解を深める。
学習内容
- 前回の続き：より複雑な構成のレイアウト模写
- マージンとパディングの違い
- ボックスの”入れ子構造”について
演習課題
レイアウト模写の完成。
第5回：Studio CSSプロパティの復習
授業概要
Webサイト構築で重要な「CSSプロパティ」を学習し、Studioで立体的なレイアウトを組むための「配置」「重なり」について理解を深める。
学習内容
- 要素の配置に関するPosition（ポジション）の説明
- 要素の重なり順に関するz-index（ゼットインデックス）の説明
- 効果的な使用例の紹介
演習課題
各プロパティの変更、ヘッダー・フッターを作成。
第6回：Studio レスポンシブ設定について
授業概要
Studioにおけるレスポンシブの考え方・設定方法を学習し、スマホ対応の基本について理解を深める。
学習内容
- ブレークポイント
- Studioにおけるレスポンシブ設定方法
- “並ぶ方向”、”表示／非表示”の活用について
演習課題
レイアウト模写をスマホ対応にする。
第7回：Studio テンプレートを用いたシングルページの制作
授業概要
Studioの高品質なテンプレートの使い方やカスタマイズ方法・注意点を学び、Web制作の流れを体感する。
学習内容
- テンプレートの使い方
- 色、写真、テキストの差し替え
- “並ぶ方向”、”表示／非表示”の活用について
演習課題
テンプレートを組み合わせたシングルページの作成に挑戦。
第8回〜第9回：Webサイトデザインのコラージュ実習
授業概要
既存Webサイトの内部構成について理解を深める。
学習内容
- テンプレート選定の注意点紹介
- ブラウザ内蔵検証ツールの紹介
- フォントの使い方（タイポグラフィ）
演習課題
テンプレートを組みわせたブロックの切り貼り（コラージュ）で、目標とするWebサイトの一部再現に挑戦。
第10回：疑似案件のための素材制作実習
授業概要
モックアップ画像の作成方法を学び、素材の見せ方について研究を行う。
学習内容
- 疑似案件の内容紹介
- モックアップ画像の作成方法紹介
- Studioでの組み合わせ実習
- 課題制作時の素材収集
演習課題
Photoshopでモックアップ画像を作成し、Studioに設置する。
課題制作時を想定し、ピンタレスト等でデザインのアイデア集めを行い、デザインの引き出しを増やす。
課題制作時を想定した準備（素材集め・情報収集）を行う。
第11回〜第15回：疑似案件 デザイン制作実習
授業概要
自身のポートフォリオWebサイト（シングルページで可）を作成し、制作から公開までのプロセスを体感する。
学習内容
- ポートフォリオWebサイトの作成
- Webサイト制作後、Studioのサブドメインで公開
演習課題
テンプレートを活用し、自身のポートフォリオWebサイト（シングルページで可）を作成。
Studio提供のサブドメインで全世界に公開する。
