31240003

基礎ツール演習 II -d(Web)

2025年度2Q(前期)

演習

基礎

塩谷 正樹

実務家教員

1

2.00単位

火曜3限、火曜4限

- テーマに沿ったWebページを制作するため、コンテンツの必要性やレイアウトを各自またはグループで検討する。  
- 必要に応じて映像教材やネット検索を活用し、表現の方法を模索しながらブラウザで表示できるように調整する。  
- 自主学習を中心に技術的なサポートを行う。  

◆ 使用ツール  
- Photoshop  
- Illustrator  
- Figma  
- Visual Studio Code

※ その他、プラグインやソフトのインストール、Webツールへの登録が必要となる場合があります。

- Webページの制作を通じて、企画・デザイン・HTMLの構造とマークアップ、CSSスタイリングを体験し、Webの世界に興味を持つ。  
- 不明点や疑問点を、映像教材やネット検索を活用して解決し、関連情報や応用方法を発見する楽しみを感じる。  
- 作品の発表を通して、クラスメイトに興味を持ってもらえるような情報発信ができるようになる。  
- 「人に見せる」ことを意識した作品作りを実践できるようになる。  
- グループワークを通して、アイデア出しや相互の制作サポートができるようになる。

◆ 課題点 80% + 授業点 20% の総合点で評価  

- 課題点（80%）：各提出物と課題作品の内容を評価  
- 授業点（20%）：積極性や発表内容を評価  

【注意事項】  
- 大学の定める出席率70%を満たさない場合、単位を付与できない。  
- 課題の提出は必須。  

◆ 試験方法：課題提出  
◆ 試験内容：授業内で発表される最終課題資料の内容に基づき、指定されたテーマで作品を作成  
◆ 提出方法：Google Classroom に提出  
◆ 実施日：第8週までに実施  
◆ 提出締切：授業内で発表される最終課題資料を参照  
◆ 追試験・再試験：実施しない（※ただし、作品の再提出を指示する場合あり）

- 授業内で課題の詳細説明を行う。  
- モダンブラウザでレイアウトが崩れないWebページ を制作し、発表を行う。

◆ この授業の受け方について  
- Webページ制作の概要説明  
- 制作の工程を確認  

◆ Figmaの登録とシート作成  

◆ 課題テーマの発表と企画案作成  
- ジャンル別グループ作成  
- アイデアシートの作成  
- コンテンツ案の検討  

◆ 企画案の発表  

◆ レイアウト設計  
- コンテンツの順序と配置を検討  

◆ ワイヤーフレーム作成  
- ペーパーワイヤーフレームの作成  
- Figma を使用したワイヤーフレームのデジタル作成  

◆ HTMLページの作成①  
- ページ制作に必要なファイル構成を学ぶ  
- 素材原稿をHTMLに変換  
- 指定の資料を基に、HTMLタグを調べてマークアップを行う  

◆ HTMLページの作成②  
- ページ内容を大まかなブロックに分割  

◆ 素材の収集①  
- 必要な原稿や写真素材を整理

◆ CSSでのスタイル設定①  
- CSSの役割を学ぶ  
- ブロックごとに名前を付け、原稿の装飾を行う  

◆ CSSでのスタイル設定②  
- CSSを用いたレイアウトの実装  
- 横並びのレイアウトについて調査

◆ 素材の収集②  
- 原稿をテキストデータ化  
- 画像データの作成  

◆ HTMLページの作成  
- 原稿を入れてマークアップを行う  
- 画像の表示設定  
- コンテンツをブロック分けして整理

◆ CSSスタイルの適用  
- 大まかなレイアウトの設定  
- 各パーツの装飾を追加  

◆ 課題の制作指導  
- ブラウザで確認しながら、意図したレイアウトに調整  
- Webフォントの実装  
- 動きのあるコンテンツ（アニメーション等）への挑戦

◆ 作品発表会  
- 作品を完成させ、発表を行う。

- 筆記用具  
- 各自のPC  
- Adobe ID（ソフト利用のためのライセンス）  
- Figmaアカウント（教育機関）の登録

◆ 映像教材を利用  
◆ その他、独自のプリント（PDF）を配布予定

◆ 大学のSlack または Q&A から担当教員に連絡