目次
授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
前回の復習
前回の知識問題
- 「HTML」を正しく説明している文章を選んでください
- ウェブサイトのコンテンツに意味付けを行うマークアップ言語
- ウェブサイトのデザインやレイアウトを指定する言語
- ウェブサイトの動きや機能を制御するための言語
- データベースと連携してウェブサイトを生成するための言語
- ウェブサイトに動画を埋め込むための言語
- 「CSS」を正しく説明している文章を選んでください
- ウェブサイトのデザインやレイアウトを指定する言語
- ウェブサイトのコンテンツに意味付けを行うマークアップ言語
- ウェブサイトの動きや機能を制御するための言語
- データベースと連携してウェブサイトを生成するための言語
- ウェブサイトに動画を埋め込むための言語
- 「CMS」を正しく説明している文章を選んでください
- ウェブサイトのコンテンツやデザインを管理、更新するためのシステム
- ウェブサイトのデザインやレイアウトを指定する言語
- ウェブサイトのデザインのみを管理、更新するためのシステム
- ウェブサイトのコンテンツのみを管理、更新するためのシステム
- ウェブサイトの動きや機能を制御するための言語
- 「ノーコード」を正しく説明している文章を選んでください
- プログラミングコードを書かずに開発できる手法やシステムのこと
- ウェブサイトのコンテンツに意味付けを行うマークアップ言語
- データベースと連携してウェブサイトを生成するための言語
- ウェブサイトに動画を埋め込むための言語
- 電源コードに接続せずパソコンを利用すること
- CMSとHTML、CSSの関係について正しく説明している文章を選んでください
- HTMLもCSSもCMSを使う上で役に立つ
- HTMLだけがCMSを使う上で役に立つ
- CSSだけがCMSを使う上で役に立つ
- HTMLもCSSもCMSを使う上で役に立たない
- CMSはHTMLやCSSを使う上で必要である
Webサイトの制作工程
| Phase 1： 企画と設計 | 企画 | なぜWebサイトを作るのか、どんなWebサイトを作るのか |
|---|---|---|
| 設計 | 情報をあつめる、情報を整理する、システムを検討する | |
| Phase 2： デザインと実装 | デザイン | Webサイトの見た目や使い勝手を決める |
| 実装 | コーディングやプログラミングをする | |
| Phase 3： 公開とメンテナンス | 公開 | Webサイトを誰でも見られるようにする |
| メンテナンス | システムをメンテナンスする、Webサイトを更新する |
Phase 1からPhase 2、Phase 3と段階的に制作が進む場合（ウォーターフォール型）と、各Phaseが同時に進行しながら制作していく場合（アジャイル型）とがあります。
Phase 1：企画と設計
企画
- 目的：何のためにWebサイトを制作するのか
- Webサイトの役割（集客、ブランディング、売上向上 など）
- 他のメディア（テレビ、SNS、店舗、チラシ など）との連携
- ターゲット設定（ペルソナ）：誰がWebサイトを見るのか
- 性別、年齢、地域、ニーズ
- 見るタイミング、目的
- ゴール：Webサイトを見た人にどうしてほしいか
- 知ってほしい
- シェアしてほしい
- 問い合わせや注文をしてほしい
設計
- コンセプト：掲載すべき情報はなにか
- 情報デザイン：情報をどう整理するか
- サイトマップ
- カテゴリー、タグによる分類
- 情報収集：各コンテンツをどうやって集めるか
- ロゴ、写真、イラスト
- 文章
- どんなWebサイトを作るか
- どれくらい更新するのか
- 誰が更新するのか
Phase 2：デザインと実装
デザイン
- ビジュアルデザイン
- 配色
- フォント
- 画像やイラストの雰囲気やテイスト
- ページ構成
- ワイヤーフレーム
実装
- コーディング（HTML、CSS など）
- プログラミング（JavaScript など）
- CMS実装（WordPress、Studio など）
Phase 3：公開とメンテナンス
公開
- 動作確認（各種デバイスとブラウザ）
- リンクチェック
- リリース（誰でも見られるようにする）
メンテナンス
- 運用：情報の更新
- 保守：プログラムのバージョンアップ
- 改善：アクセス解析に基づく変更
Studioの基本
Studioの特徴
- 「コード」を書かずにWebサイトを作成できる
- テンプレートだけではなく、本格的なWeb作成もできる
- パソコンとブラウザだけで使うことができる
- 他の人と一緒に作成できる
Studioにサインアップ／サインイン
- StudioのWebサイト（https://studio.design/）にアクセス
- 「ログイン／新規登録」から新規登録
- メールアドレス：学校から提供されているアドレス（例：10ck0000@hc.jue.ac.jp）
- パスワード：忘れにくい複雑なパスワード
- ログインしてみましょう
ダッシュボードの確認
- 画面の説明をします
- プロジェクトを追加します
- プロジェクトの「公開設定」からWebサイトのURLを変更しましょう
- 自分の学籍番号がURLになるようにしましょう（例：https://10ck0000.studio.site/）
- プロジェクトは削除できませんので、むやみに追加しないようにしましょう
知識問題
今日の授業内容を知識問題で復習しましょう。
CampusApp
- CampusAppの「CBT（知識問題）」から、知識問題にチャレンジしましょう
- 100点が取れるまで、繰り返し挑戦しましょう
- 期末の定期試験は知識問題の中から出題します
パソコンの再起動／シャットダウン
授業の終わりに必ずパソコンを再起動（次に他の授業がある場合）、またはシャットダウン（次に他の授業がない場合）してください。