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

2025年11月24日

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

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

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

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

「異なることなる画が面めんサイズに対応たいおうして表示ひょうじを最適さいてき化する手法しゅほう」はどれですか
- レスポンシブデザイン
- ユニバーサルデザイン
- レスポンシブルデザイン
- ウェブデザイン
- グラフィックデザイン
レスポンシブデザインで「画が面めんの表示ひょうじを切り替えきりかえる基準きじゅん点てん」はどれですか
- ブレイクポイント
- 横よこ幅はば
- 縦たて幅はば
- モバイルファースト
- ハンバーガーメニュー
「≡」や「＝」を押すおすと表示ひょうじされる、隠れたメニューはどれですか
- ハンバーガーメニュー
- サンドウィッチメニュー
- モーダルメニュー
- マクドナルドメニュー
- モバイルメニュー
「画が面めん上でじょうでポップアップ表示ひょうじするウインドウ」はどれですか
- モーダルウインドウ
- レスポンシブウインドウ
- ハンバーガーウインドウ
- モバイルウインドウ
- モーグルウインドウ
「モバイルファースト」はどれですか
- 小さいちいさい画が面めんでの閲覧えつらんを最さい優先ゆうせんに考えるかんがえること
- 持ち運うんべるデバイスを先にさきに購入こうにゅうすること
- 大きいおおきい画が面めんでの閲覧えつらんを最さい優先ゆうせんに考えるかんがえること
- 小さいちいさい画が面めんで表示ひょうじすることだけを考えるかんがえること
- パソコンのセキュリティを考えるかんがえること

Webサイトの企画きかくと設計せっけい

Webサイトの作成さくせいにおいて、最ももっとも重要じゅうような段階だんかいが「Webサイトの企画きかく（と要件ようけん定義ていぎ）」と「Webサイトの設計せっけい」です。Webサイトの企画きかくと設計せっけいにはWebサイト作成さくせいの過程かてい全体ぜんたいを網羅もうらする知識ちしきと経験けいけんとが必要ひつようです。

STEP1：Webサイトの企画きかくと要件ようけん定義ていぎ
- 企画きかく：なぜWebサイトをつくるのか、Webサイトを通つうじて達成たっせいしたい目的もくてきを決めきめます
- 要件ようけん定義ていぎ：目的もくてきを達成たっせいするためにはどんなコンテンツや機能きのう、目標もくひょうなどが必要ひつようかを決めきめます
STEP2：Webサイトの設計せっけい
- サイトマップの作成さくせい
- ワイヤーフレームの作成さくせい
- 配色はいしょく設計せっけい
STEP3：Webサイトの開発かいはつと実装じっそう
- フロントエンド（HTML、CSS、JavaScript、UI　など）
- バックエンド（サーバー、データベース、CMS、API　など）
- コンテンツの組み込みくみこみ
STEP4：Webサイトのテストと検証けんしょう
- 表示ひょうじ確認かくにん
- 機能きのうテスト
STEP5：Webサイトの公開こうかいと運用うんよう
- 公開こうかい
- 効果こうか測定そくてい
- メンテナンス
- 改善かいぜん

「Webサイト作成さくせい企画きかく書」を配りますので、書き込かきこんでいきましょう。

Webサイトの企画きかくと要件ようけん定義ていぎ

今回こんかいの要件ようけんは「Studioを使って、指示しじに沿った方法ほうほうでWebサイトを作成さくせいできること」としますので、要件ようけんについては考えかんがえなくても良いよいです。

Webサイトの企画きかくをします。Webサイトのテーマを下したの3つから選んでください。

A：自分じぶんの生まれうまれた国くに
- 歴史れきしや文化ぶんか
- ことば
- 経済けいざい
- 名物めいぶつ料理りょうり
- 観光かんこうスポット　など
B：自分じぶんの好きすきなもの
- 趣味しゅみ
- スポーツ
- 芸能げいのう人ひと
- 家族かぞく
- ファッション　など
C：日本にっぽんで驚いたこと
- 常識じょうしき
- 食べ物たべもの
- インフラ
- 考え方かんがえかた
- 仕事しごと　など

Webサイトの設計せっけい

Webサイトの設計せっけいをします。サイトマップ、ワイヤーフレームは全員ぜんいん同じおなじものにしますので、考えかんがえなくても良いよいです。

サイトマップ

サイトマップは以下いかのようにします。これは全員ぜんいん共通きょうつうです。

トップページ（/）：各かくページへのリンクと、お知らせしらせの一覧いちらんを表示ひょうじします
- 私わたしについて（/about/）：自己じこ紹介しょうかいのページです
- 選んだテーマの内容ないよう（/theme/）：選んだテーマについてのページです
- お問い合わせといあわせ（/contact/）：お問い合わせといあわせフォームを実装じっそうします
- 送信そうしん完了かんりょう（/thanks/）
- お知らせしらせ（/information/）：CMSで制作せいさくします
  - 2025年ねん10月がつ10日にちのお知らせしらせ（/20251010/）
  - 2025年ねん11月がつ11日にちのお知らせしらせ（/20251111/）
  - 2025年ねん12月がつ1日にちのお知らせしらせ（/20251201/）

ワイヤーフレーム

ワイヤーフレームは以下いかのようにします。これは全員ぜんいん共通きょうつうです。

配色はいしょく

Webサイトの配色はいしょくについて考えかんがえましょう。Webサイトの配色はいしょくを下したの5つから選んでください。

参考さんこう）配色はいしょくについて

配色はいしょくA：プロフェッショナル
- ベースカラー（70%）：#EEEEEE（ライトグレー）
- メインカラー（25%）：#2A6496（ネイビーブルー）
- サブカラー（5%）：#C85000（オレンジ）
配色はいしょくB：エネルギッシュ
- ベースカラー（70%）：#FFF9E6（クリームイエロー）
- メインカラー（25%）：#FF4500（レッドオレンジ）
- サブカラー（5%）：#00A388（ターコイズグリーン）
配色はいしょくC：ナチュラル
- ベースカラー（70%）：#FFFFFF（白しろ）
- メインカラー（25%）：#F5F5DC（ベージュ）
- サブカラー（5%）：#A9D18E（モスグリーン）
配色はいしょくD：モダン
- ベースカラー（70%）：#1C1C1C（ダークチャコール）
- メインカラー（25%）：#D4AF37（ゴールド）
- サブカラー（5%）：#F0F0F0（オフホワイト）
配色はいしょくE：ソフト
- ベースカラー（70%）：#E8F8F8（ペールブルー）
- メインカラー（25%）：#66BB6A（ミントグリーン）
- サブカラー（5%）：#FFB6C1（ペールピンク）