目次
授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
前回の復習
前回の知識問題
- 「要件定義」を正しく説明しているのはどれですか
- 目的を達成するための具体的な機能や目標を明確にすること
- 画面サイズが変わっても問題なくみられるよう、コンテンツを調整すること
- 配色を設計して、Webサイト全体のデザインを決めること
- Webサイトの効果を測定して、次の施策を定義すること
- サーバーやデータベース、CMSを組み込むこと
- 「フロントエンドの技術」ではないものはどれですか
- サーバー
- HTML
- CSS
- JavaScript
- UI
- 「バックエンドの技術」ではないもはどれですか
- CSS
- サーバー
- データベース
- CMS
- API
- Webサイトの「企画」を正しく説明しているのはどれですか
- Webサイトを通じて達成したい目的を決めること
- Webサイトの利用者の声を集めること
- Webサイトのアクセス数をもとに、広告施策を決めること
- メインビジュアルを決めること
- コンテンツに必要な写真やイラスト、テキストを集めること
- 「Webサイトの設計」に含まれないものはどれですか
- 表示テストを行う
- 配色を決める
- ワイヤーフレームを考える
- サイトマップを考える
- デザインの方向性を決める
Webサイトの制作
13回で決めた情報に基づき、Webサイトを制作していきましょう。
準備
Studioにログインします。
- 新しいプロジェクトを作成します
- 「空白からはじめる」から始めます
- プロジェクト名は「実技テスト」にします
- プロジェクト設定から、公開設定を編集します
- URLを「https://（学籍番号）.studio.site」に変更します
制作手順
以下の流れでWebサイトを制作していきましょう。
| 作業タイトル | 作業詳細 | 参考URL | |
|---|---|---|---|
| 1 | コンポーネントの作成 | コンポーネントで「ヘッダー」と「フッター」を作成しましょう | 第06回 |
| 2 | ページの追加 | 必要なページを追加しましょう ・ABOUT ・CONTACT ・THANK YOU | 第07回 |
| 3 | リンクの設定 | ヘッダーとフッターのコンポーネントを調整して、 | 第07回 |
| 4 | ユーザー体験の改善 | Webサイトの使い勝手を改善します。 ・パンくずリスト ・トップに戻るボタン ・ホバー ・カルーセル | 第09回 |
| 5 | お問い合わせフォームの実装 | お問い合わせフォームを実装しましょう ・CONATCT ・THANK YOU | 第10回 |
| 6 | お知らせの追加 | CMS機能を使って「お知らせ」を実装しましょう | 第11回 |
| 7 | レスポンシブデザインの実装 | ハンバーガーメニューを実装しましょう | 第12回 |
| 8 | コンテンツの追加 | 各ページにコンテンツを追加しましょう ・HOME（主要な内容） ・ABOUT（自己紹介） | 企画書 |
| 9 | デザインの反映 | 配色を反映させて、カラフルなWebサイトにしましょう | 企画書 |
| 10 | 作り込み | コンテンツをブラッシュアップしたり、レスポンシブ対応を追加するなどで完成度を高めましょう |
「ライブプレビュー」を有効にして、CampusAppからライブプレビューのURLを提出してください。
パソコンの再起動／シャットダウン
授業の終わりに必ずパソコンを再起動（次に他の授業がある場合）、またはシャットダウン（次に他の授業がない場合）してください。