Webサイト作成B（第04回）
目次
授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
前回の復習
Webサイト作成B（第03回）
前回の知識問題
- Webサイトの「header」を説明する文章で正しくないのはどれですか
- コンテンツを収める
- ロゴなどを収める
- ヘッダーメニューを収める
- ページ上部にあることが多い
- headタグとは異なる
- Webサイトの「main」を説明する文章で正しくないのはどれですか
- 各ページで同じ内容になる
- コンテンツを収める
- headerとfooterの間にある
- ページ特有の内容を収める
- bodyタグよりも内側にある
- Webサイトの「footer」を説明する文章で正しくないのはどれですか
- コンテンツを収める
- コピーライトを収める
- フッターメニューを収める
- 各ページで共通する内容である
- headerと対になることが多い
- Webサイトの「nav」を説明する文章で正しくないのはどれですか
- 意味のない箱である
- メニューを収める
- headerの中で使うことができる
- footerの中で使うことができる
- mainの中で使うことができる
- Webサイトの「div」を説明する文章で正しくないのはどれですか
- ページ内の使用回数に制限がある
- 意味のない箱である
- headerの中で使うことができる
- mainの中で使うことができる
- footerの中で使うことができる
Webサイトの種類
- Webサイトはその目的によっていくつかの種類に分けることができます
- 同じ種類のWebサイトは、同じ特徴を持っていることが多いです
- 明確にサイトの種類を区分できることは少なく、それぞれが重なっていたり包含していたりします
代表的なWebサイトの種類
- コーポレートサイト
- サービスサイト／プロダクトサイト
- リクルートサイト
- イベントサイト
- ブランディングサイト
- オウンドメディア
- ECサイト（オンラインショップ）
- ランディングページ（LP）
コーポレートサイト
| 目的 | 会社や団体の紹介をするためのWebサイト |
|---|
| 特徴 | 真面目なデザイン |
|---|
| 必要なコンテンツ | 会社について、お知らせ、アクセス、商品とサービス、お問い合わせ、プライバシーポリシー など |
|---|
| ポイント | オンライン上に会社を再現するつもりで制作する |
|---|
サービスサイト／プロダクトサイト
| 目的 | サービスや商品を紹介するためのWebサイト |
|---|
| 特徴 | 自由なデザイン |
|---|
| 必要なコンテンツ | サービス／商品について、申し込み／注文、サポート、FAQ、お問い合わせ、プライバシーポリシー など |
|---|
| ポイント | サービスや商品の変更にあわせてこまめに更新する |
|---|
リクルートサイト
| 目的 | 企業や団体の求人をするためのWebサイト |
|---|
| 特徴 | コーポレートサイトの情報を拡充 |
|---|
| 必要なコンテンツ | 募集要項、企業文化の紹介、社員の声、申し込み、お問い合わせ、プライバシーポリシー など |
|---|
| ポイント | 新卒向けと中途採用向けとで構成や内容、デザインを変える |
|---|
イベントサイト
| 目的 | イベントを告知して集客するためのWebサイト |
|---|
| 特徴 | 1ページ構成（LP）の場合もある |
|---|
| 必要なコンテンツ | イベント概要、タイムテーブル、出演者紹介、アクセス、申し込み、お問い合わせ、プライバシーポリシー など |
|---|
| ポイント | イベント当日も使えるようにする |
|---|
ブランディングサイト
| 目的 | 企業や団体、サービスや商品を知ってもらい、潜在顧客の信頼を獲得するためのWebサイト |
|---|
| 特徴 | ビジュアルや利用体験を重視する |
|---|
| 必要なコンテンツ | ブランド概要、ブランドのストーリー、お問い合わせ、プライバシーポリシー など |
|---|
| ポイント | コーポレートサイトやサービスサイト／プロダクトサイト、ECサイトに誘導する |
|---|
オウンドメディア
| 目的 | 企業や団体がユーザーに有益な情報を発信するWebサイト |
|---|
| 特徴 | コンテンツの質や更新頻度を重視する |
|---|
| 必要なコンテンツ | 記事一覧、記事検索、記事詳細、お問い合わせ、プライバシーポリシー など |
|---|
| ポイント | コーポレートサイトやサービスサイト／プロダクトサイト、ECサイトに誘導する |
|---|
ECサイト（オンラインショップ）
| 目的 | 商品を販売するためのWebサイト |
|---|
| 特徴 | たくさんの商品の中から目的の商品を探しやすい |
|---|
| 必要なコンテンツ | 商品一覧、商品検索、商品詳細、買い物カゴ、お問い合わせ、プライバシーポリシー など |
|---|
| ポイント | 受注や配送の体制まで考慮する |
|---|
ランディングページ（LP）
| 目的 | スポットで商品やサービスを紹介するWebページ |
|---|
| 特徴 | 1ページ構成 |
|---|
| 必要なコンテンツ | 概要、コールトゥアクション、お問い合わせ、プライバシーポリシー など |
|---|
| ポイント | 広告などからのアクセスを受けて、コーポレートサイトやサービスサイト／プロダクトサイト、ECサイトに誘導する |
|---|
Studio：コンテンツを追加する
Studioにログインしてください。
メニューから追加できるコンテンツ
Studioのメニューからコンテンツを追加してみましょう。
準備として、先にdiv（幅100%、高さ1200px以上）を追加しておきます。
- 見出し（h1〜h6）
- 6種類の見出しを追加してください
- 段落（p）
- 段落を1つ以上追加してください
- 順番なしリスト（ul、li）
- 方法1：テキストをliにしてから「グループ化」して、グループの種類をulに変更できます
- 方法2：テキストを「リスト化」すると、ulが適用されます
- 画像
- 画像1：divとして画像を追加（ボックスの背景として画像が表示される）
- 画像2：imgとして画像を追加（画像の比率そのままで拡大縮小できる）
- アイコン
追加に段階が必要なコンテンツ
- 順番ありリスト（ol）
- リッチテキストを追加して、種類を変更します
- 埋め込みコンテンツ
知識問題
今日の授業内容を知識問題で復習しましょう。
CampusApp
- CampusAppの「CBT（知識問題）」から、知識問題にチャレンジしましょう
- 100点が取れるまで、繰り返し挑戦しましょう
- 期末の定期試験は知識問題の中から出題します
パソコンの再起動／シャットダウン
授業の終わりに必ずパソコンを再起動（次に他の授業がある場合）、またはシャットダウン（次に他の授業がない場合）してください。
