Webサイト作成さくせいB（第だい10回かい）

2025年11月03日

授業じゅぎょうの準備じゅんび

Microsoft Teamsにログインし、授業じゅぎょうの会議かいぎに参加さんかしてください。

前回ぜんかいの復習ふくしゅう

Webサイト作成さくせいB（第だい09回かい）

前回ぜんかいの知識ちしき問題もんだい

「画が面めんサイズに応じて自動じどうで表示ひょうじ内容ないようを調整ちょうせいするデザイン手法しゅほう」はどれですか
- レスポンシブデザイン
- ユニバーサルデザイン
- Webデザイン
- 情報じょうほうデザイン
- デザイン思考しこう
「年齢ねんれいや文化ぶんか、障がいの有無うむなどに関わらず利用りようしやすいデザインすること」はどれですか
- ユニバーサルデザイン
- レスポンシブデザイン
- ユニークデザイン
- デザインテンプレート
- マルチデバイス
Webサイトで「欲しいほしい情報じょうほうにたどり着けるつけること」のための工夫くふうではないものはどれですか
- SSL
- サイトマップ
- サイト内検索けんさく
- パンくずリスト
- ナビゲーション
Webサイトで情報じょうほう量りょうが多すぎることを解決かいけつする方法ほうほうではないものはどれですか
- レスポンシブデザインにする
- ページを分けるわける
- 情報じょうほう整理せいりをする
- 「上うえに戻るもどるボタン」を実装じっそうする
- 1ページあたりの情報じょうほう量りょうを揃えるそろえる
「使いやすいWebサイト」に当てあてはまらないものはどれですか
- 表示ひょうじ速度そくどが遅いおそい
- 情報じょうほう量りょうが適切てきせつである
- デザインに一貫性いっかんせいがある
- ユニバーサルデザインに対応たいおうしている
- ユーザーの予想よそう通りとおりに動作どうさする

インタラクティブなWebサイト

Webサイトでは、ユーザーが希望きぼうする様々さまざまな目的もくてきを達成たっせいさせなければいけません。一方いっぽうで、Webサイトオーナーが達成たっせいしたい目的もくてきもあります。

ユーザーの目的もくてき

情報じょうほう収集しゅうしゅうや学習がくしゅう：ニュースサイト、ブランドサイト、比較ひかくサイト　など
問題もんだいの解決かいけつや支援しえん：トラブルシューティング、カスタマーサポート、お問い合わせといあわせ　など
特定とくていの行動こうどうの実行じっこう：購入こうにゅう、申し込みもうしこみ、予約よやく、問い合わせといあわせ、資料しりょう請求せいきゅう　など
娯楽ごらくや交流こうりゅう：動画どうが視聴しちょう、ゲーム、SNS　など

Webサイトオーナーの目的もくてき

情報じょうほう提供ていきょうと認知にんちの向上こうじょう：コーポレートサイト、ブランディングサイト　など
顧客こきゃくや売上のうりあげの獲得かくとく：ECサイト、イベントサイト、LP　など
関係かんけい性せい構築こうちくと維持いじ：サポートサイト、SNS　など

インタラクティブとは

「インタラクティブ」とは、人ひとやシステムが双方向そうほうこうにやりとりすることです。

Webサイトオーナーが一方いっぽう的に情報発信じょうほうはっしんするだけではなく、ユーザーから何かなにかのフィードバックが欲しいほしいとき、ユーザーがアクションできる仕組みしくみ（お問い合わせといあわせフォーム、サイト内検索けんさく、絞りしぼり込み検索けんさく、いいねボタン　など）を設けもうけて、Webサイトをインタラクティブにすることがあります。

プライバシーポリシー

プライバシーポリシーとは、Webサイトの運営者うんえいしゃが個人こじん情報じょうほうをどのように集めたり、利用りようしたり、管理かんりしたりするのかについてまとめたものです。集めるあつめる情報じょうほうの種類しゅるいやその目的もくてき、第だい三さん者ものへ提供ていきょうするかどうかなどが記載きさいされます。

Webサイトにインタラクティブな機能きのうを追加ついかするときは、プライバシーポリシーの掲載けいさいを検討けんとうしましょう。

Studio：フォーム

Studioにログインしてください。

次つぎの工程こうていでお問い合わせといあわせフォームを作成さくせいします。

STEP1：プライバシーポリシーページを作成さくせいする
STEP2：お問い合わせといあわせフォームで集めるあつめる情報じょうほうを決めるきめる
STEP3：送信そうしん完了かんりょうページを作成さくせいする
STEP4：お問い合わせといあわせフォームを実装じっそうする
STEP5：動作どうさ確認かくにんをする

STEP1：プライバシーポリシーページを作成さくせいする

CONTACTのページを複製ふくせいして、プライバシーポリシーページを作成さくせいします。

左ひだりメニューを開き「ページ」タブをクリック
「CONTACT」を複製ふくせいする
- ページ名めいをダブルクリックし、ページ名めい編集へんしゅうモードに
- ページ名めいを「PRIVACY POLICY」にする
ページ名めい右側みぎがわのアイコンをクリックし、設定せってい画が面めんを表示ひょうじする
- ページのパスを「privacy-policy」にする
main内のテキストボックスの内容ないようを「PRIVACY POLICY」にする

STEP2：お問い合わせといあわせフォームで集めるあつめる情報じょうほうを決めるきめる

お問い合わせといあわせフォームで送信そうしんする情報じょうほうを決めきめます。

項目こうもく	説明せつめい
お名前なまえ	送信そうしんする人ひとの名前なまえ
メールアドレス	送信そうしんする人ひとのメールアドレス
お問い合わせといあわせ内容ないよう	お問い合わせといあわせの内容ないよう
プライバシーポリシーへの同意どうい	プライバシーポリシーに同意どういしたかどうかを確認かくにんする

STEP3：送信そうしん完了かんりょうページを作成さくせいする

CONTACTのページを複製ふくせいして、送信そうしん完了かんりょうページを作成さくせいします。

左ひだりメニューを開き「ページ」タブをクリック
「CONTACT」を複製ふくせいする
- ページ名めいをダブルクリックし、ページ名めい編集へんしゅうモードに
- ページ名めいを「THANK YOU」にする
ページ名めい右側みぎがわのアイコンをクリックし、設定せってい画が面めんを表示ひょうじする
- ページのパスを「thank-you」にする
main内のテキストボックスの内容ないようを「THANK YOU」にする

STEP4：お問い合わせといあわせフォームを実装じっそうする

CONTACTのページを編集へんしゅうします。

左ひだりメニューを開き「追加ついか」タブをクリック
「Basic Forms」から「Form1」を挿入そうにゅう
「送信後そうしんごのページ」を「THANK YOU」ページにする
「通知先つうちさきの設定せってい・集計しゅうけい結果けっか」を設定せっていする
- 「フォーム通知つうちの送信先そうしんさき」を自分じぶんのメールアドレスにする
- 「通知つうちメッセージタイトル」を「お問い合わせといあわせ」にする
各かく項目こうもくの「タイトル」と「項目こうもく名めい」、「プレースホルダー」、「送信そうしんボタン」をできる限りかぎり日本語にほんごに修正しゅうせいしましょう
- タイトル（div）と項目こうもく名めい（input）
  - Full Name：お名前なまえ
  - Email：メールアドレス
  - Message：お問い合わせといあわせ内容ないよう
  - I Agree to the Privacy Policy.：プライバシーポリシーに同意どういしました
  - Submit：送信そうしんする
- プレースホルダー（input）：入力にゅうりょく欄らんに薄いうすい色いろで表示ひょうじされる、入力にゅうりょく例れいや誘導ゆうどうのこと
  - Your name：お名前なまえを入力にゅうりょくしてください
  - Your email address：メールアドレスを入力にゅうりょくしてください
  - Your message：お問い合わせといあわせ内容ないようを入力にゅうりょくしてください
- 送信そうしんボタン
  - Submit：送信そうしんする

STEP5：動作どうさ確認かくにんをする

ライブプレビューから、お問い合わせといあわせフォームが動作どうさするかどうかを確認かくにんしましょう。STEP4で「フォーム通知つうちの送信先そうしんさき」に設定せっていしたメールアドレスにメールが届いていれば成功せいこうです。

知識ちしき問題もんだい

今日きょうの授業じゅぎょう内容ないようを知識ちしき問題もんだいで復習ふくしゅうしましょう。

CampusApp

CampusAppの「CBT（知識ちしき問題もんだい）」から、知識ちしき問題もんだいにチャレンジしましょう
100点てんが取れるとれるまで、繰り返しくりかえし挑戦ちょうせんしましょう
期末きまつの定期ていき試験しけんは知識ちしき問題もんだいの中からなかから出題しゅつだいします

パソコンの再起動さいきどう／シャットダウン

授業じゅぎょうの終わりおわりに必ずかならずパソコンを再起動さいきどう（次つぎに他のほかの授業じゅぎょうがある場合ばあい）、またはシャットダウン（次つぎに他のほかの授業じゅぎょうがない場合ばあい）してください。