授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
webサイトに適したファイル容量の感覚を身につける。 |
印刷向きの大きなファイルをPhotoshopのweb用に保存モードで適切にリサイズ＆圧縮してweb用ファイルを生成し、webサイトに適したファイル容量の感覚を身につける。 |
| 【理解度確認】画面共有による進捗確認。 |
| 2 |
階層構造（ディレクトリ）のしくみを身につける。 |
ブラウザ上でエラーを起こしているwebサイトを、リンクを正しく繋げて修正し、ディレクトリのしくみを身につける。絶対パスと相対パスについて学ぶ。 |
| 【理解度確認】画面共有による進捗確認。 |
| 3 |
主要なデバイスのブラウザ画面サイズを把握する。 |
スマートフォンの普及状況から、スマホサイトの必要性を理解する。PCサイトと比較して、スマートフォン向けサイトの特徴を知る。PCブラウザに標準搭載されているウェブ開発者向けツール（デベロッパーツール）の使用方法を学ぶ。 |
| 【理解度確認】画面共有による進捗確認。 |
| 4 |
ボックスモデルを理解し、説明出来る。 |
HTML文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成しており、そのボックスモデルについて、小課題を通して理解を深める。 |
| 【理解度確認】画面共有による進捗確認。課題の提出。 |
| 5 |
レスポンシブWebサイトを組む際に必要な基本を理解し、説明出来る。 |
モバイルファーストで作成したページをレスポンシブにして、大きい画面ではPC版のレイアウトで表示するように設定する。レスポンシブの基本、ビューポート（viewport）とメディアクエリ（@media）を理解する。フロート（float）でレイアウトする。 |
| 【理解度確認】画面共有による進捗確認。 |
| 6 |
ショッピングモールのブランディングを反映したワイヤーフレームが制作出来る。 |
個人制作課題「ショッピングモールのアプリを作ろう」ワイヤーフレーム
ワイヤーフレームを検討する。 |
| 【理解度確認】画面共有による進捗確認。 |
| 7 |
ワイヤーフレームを元にUIデザインを制作出来る。 |
個人制作課題「ショッピングモールのアプリを作ろう」UIデザイン
UIデザインの制作。 |
| 【理解度確認】画面共有による進捗確認。 |
| 8 |
手本をもとにしたコンポーネントづくりを通して各パーツの機能を再現できるようになる。 |
個人制作課題「ショッピングモールのアプリを作ろう」UIデザイン
コンポーネントの制作。 |
| 【理解度確認】画面共有による進捗確認。 |
| 9 |
アプリ作りのプロセスにおけるリサーチ活動について理解し、実際に競合他社のデザイン事例が分析できるようになる。 |
グループ制作課題「ショッピングモールのアプリを作ろう」リサーチ |
| 【理解度確認】画面共有による進捗確認。 |
| 10 |
アプリのリサーチを元に、ターゲットに合わせたアプリのブランディングを設定出来るようになる。 |
グループ制作課題「ショッピングモールのアプリを作ろう」ブランディング |
| 【理解度確認】画面共有による進捗確認。 |
| 11 |
コミュニケーションを通してお互いの知識と技術を相互補完し合う。 |
グループ制作課題「ショッピングモールのアプリを作ろう」仕事管理表の作成・確認 |
| 【理解度確認】画面共有による進捗確認。 |
| 12 |
クラウドでドキュメントを共有し、誤って上書きをしないように気をつけながら、同一プロジェクト内で作業を出来るようになる。 |
グループ制作課題「ショッピングモールのアプリを作ろう」共同編集のコリジョン回避練習 |
| 【理解度確認】画面共有による進捗確認。 |
| 13 |
グループ内において互いの個性を理解し合い、生かし合える分担をし、取り組めるようになる。チームのメンバー同士で知識を共有し、物事を見る角度を増やす。 |
グループ制作課題「ショッピングモールのアプリを作ろう」グループ内進捗の再確認・再分担 |
| 【理解度確認】画面共有による進捗確認。 |
| 14 |
制作したアプリのブランディングやUIデザインの概要をスライドにまとめられるようになる。 |
グループ制作課題「ショッピングモールのアプリを作ろう」プレゼン資料の作成 |
| 【理解度確認】スライドの提出。 |
| 15 |
完成作品についてUIの工夫点や特徴について解説出来るようになる。 |
グループ制作課題「ショッピングモールのアプリを作ろう」プレゼンテーション |
| 【理解度確認】プレゼンテーションの内容。 |
