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

2025年10月06日

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

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

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

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

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

Webサイトの配色はいしょくで、一般的いっぱんてきな割合わりあいはどれですか
- ベースカラー（70%）、メインカラー（25%）、アクセントカラー（5%）
- ベースカラー（60%）、メインカラー（25%）、アクセントカラー（15%）
- ベースカラー（50%）、メインカラー（30%）、アクセントカラー（20%）
- ベースカラー（90%）、メインカラー（5%）、アクセントカラー（5%）
- ベースカラー（75%）、メインカラー（20%）、アクセントカラー（5%）
Webサイトで使うつかうフォントで「ユニバーサルデザインフォント」の正しいただしい特徴とくちょうはどれですか
- 年齢ねんれいや障害しょうがいの有無うむを問わずとわず誰だれにでも読みよみやすい
- デザインが洗練されていてかっこいい
- 主におもに大学だいがくの研究で使われる
- 無料むりょうで使用しようすることができる
- 英語えいごや日本語にほんごなど、あらゆる言語げんごが含まれている
Webサイトの余白よはくで、実用的じつようてきで使い勝手かっての良いよい組み合わせくみあわせはどれですか
- 内側うちがわの余白よはくが16px、外側そとがわの余白よはくが16px
- 内側うちがわの余白よはくが10px、外側そとがわの余白よはくが10px
- 内側うちがわの余白よはくが15px、外側そとがわの余白よはくが15px
- 内側うちがわの余白よはくが0px、外側そとがわの余白よはくが0px
- 内側うちがわの余白よはくが8px、外側そとがわの余白よはくが8px
Webサイトの角丸かどまるについて、間違ってまちがっているものはどれですか
- 角丸かどまるがない四角形しかくけいは使ってはいけない
- 角丸かどまるがない四角形しかくけいでは、規律きりつや信頼しんらい、安定あんてい感を感じるかんじる
- 角丸かどまるがある四角形しかくけいでは、柔らかさや優しさやさしさを感じるかんじる
- 同じおなじWebサイト内では角丸かどまるの大きさおおきさを統一とういつする
- 角丸かどまるが大きいおおきいと子こどもっぽいデザインになる
Webサイトの写真しゃしんやイラストについて、間違ってまちがっているものはどれですか
- 写真しゃしんとイラストは同時どうじに使ってはいけない
- 写真しゃしんのテイストがWebサイトの雰囲気ふんいきに影響えいきょうを与えるあたえる
- イラストのテイストがWebサイトの雰囲気ふんいきに影響えいきょうを与えるあたえる
- Webサイト内で使用しようする写真しゃしんのテイストは統一とういつする
- Webサイト内で使用しようするイラストのテイストは統一とういつする

Webサイトを効率こうりつよくつくる

「部品ぶひん」とは、機械きかいなどを構成こうせいするひとつひとつのパーツのことです。Webサイトは「部品ぶひんを組み合わせくみあわせてつくる」という考え方かんがえかたをすると、効率こうりつよく作成さくせいすることができます。

上のうえの写真しゃしんはデジタルカメラを分解ぶんかいして部品ぶひんを並なみべたものです。全体ぜんたいとしては複雑ふくざつな機械きかいでも、たくさんの部品ぶひんを集めたものだと考えるかんがえると、開発かいはつや製造せいぞうがかんたんになります。

同じおなじように、現在げんざいのWebサイトはとても複雑ふくざつなものですが、ある程度ていどの大きさおおきさに分けわけて「たくさんの部品ぶひんの組み合わせくみあわせてつくる」と考えるかんがえると、制作せいさくや運営うんえいがかんたんになります。

「部品ぶひんを組み合わせくみあわせてつくる」に関係かんけいのある言葉ことば

組み合わせくみあわせて作るつくる
- モジュール
- コンポーネント　など
型かたに合わせてつくる
- テンプレート／雛ひな形かたち　など
部品ぶひんの単位たんい
- ユニット
- パーツ
- エレメント　など
部品ぶひんをまとめたもの
- パッケージ
- ライブラリ
- 関数かんすう　など
機能きのうを追加ついかする
- プラグイン
- アドオン／アドイン　など

Webサイトは共通きょうつうの部品ぶひんからできている

Webサイトはたくさんの共通きょうつうの部品ぶひんからできています。
どこがどのように共通きょうつう化されているのかを考えかんがえましょう。

Webページ内での共通きょうつうの部品ぶひん（エリアによる切きりり分けわけ）

Webページ
- ヘッダーエリア
  - ロゴ
  - （ヘッダー）ナビゲーション
- メインエリア
  - コンテンツ（ここは共通きょうつうではない）
- フッターエリア
  - コピーライト
  - フッターメニュー

コンテンツ内での共通きょうつうの部品ぶひん（機能きのうによる切きりり分けわけ）

コンテンツ
- パンくずリスト機能きのう
- コンテンツ表示ひょうじ機能きのう（ここは共通きょうつうではない）
- CTA機能きのう
- シェア機能きのう
- 関連かんれんする記事きじの紹介しょうかい機能きのう

コンテンツ本体ほんたい内での共通きょうつうの部品ぶひん（セクションによる切きりり分けわけ）

コンテンツ本体ほんたい
- 見出しみだし1
  - 見出しみだし2
    - コンテンツ（段落だんらく、画像がぞう、リスト　など）
  - 見出しみだし2
    - コンテンツ（段落だんらく、画像がぞう、リスト　など）
      - 見出しみだし3
        
        コンテンツ（段落だんらく、画像がぞう、リスト　など）
  - 見出しみだし2
    - コンテンツ（段落だんらく、画像がぞう、リスト　など）

Studio：コンポーネントを使うつかう

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

Studioの「コンポーネント」は、よく使うつかうパーツを共通きょうつう化して、プロジェクト内で再さい利用りようできる仕組みしくみです。例えばたとえば「ヘッダー」をコンポーネント化すると、全ぜんページでヘッダーを共通きょうつう化することができます。また、作成さくせいしたヘッダーのコンポーネントを編集へんしゅうすると、すべてのページのヘッダーに編集へんしゅうが反映はんえいされます。

コンポーネントのメリットとデメリット

メリット
- Webサイトを作成さくせいする時とき、同じおなじパーツを何度なんどもデザインする必要ひつようがなくなる
- Webサイトを編集へんしゅうする時とき、一箇所いっかしょの編集へんしゅうで複数ふくすうのページを編集へんしゅうすることができる
- Webサイトを利用りようする時とき、ユーザーにとって、Webページの構成こうせいがわかりやすくなる
デメリット
- Webサイトを作成さくせいするとき、トップページには適用てきようできないことがある
- Webサイトを作成さくせいするとき、コンポーネントを踏まえた設計せっけいをするのが難しいむずかしい
- Webサイトを編集へんしゅうするとき、コンポーネントを理解りかいして編集へんしゅうする必要ひつようがある

Studioのコンポーネントを使ってみよう

ヘッダーをつくる

ボックス（A）を追加ついかする
ボックス（A）の横よこ幅はばを「100%」にする
ボックス（A）の縦たて幅はばを「160px」にする
ボックスAの背景色はいけいしょくを「#dddddd」にする
ボックスを2つ（B、C）追加ついかする
- ボックス（B）は横よこ幅はばを「50%」にする
- ボックス（C）は横よこ幅はばを「50%」にする
- ボックス（A）の配置はいちを「中央ちゅうおう／中央ちゅうおう」、並なみびを「横よこ並なみび」にする
- ボックス（B、C）のパディング（内側うちがわの余白よはく）を「16px」にする
テキストボックスをボックス（B）に追加ついかする
- テキストボックスの内容ないようを「私わたしのウェブサイト」にする
- ボックス（B）の配置はいちを「左ひだり／中央ちゅうおう」にする
テキストボックスをボックス（C）に追加ついかする
- テキストボックスの内容ないようを「HOME」にする
- テキストボックスをリスト化する
- リストに「ABOUT」と「CONTACT」を追加ついかする
- ボックス（C）の配置はいちを「右みぎ／中央ちゅうおう」にする
レイヤーからボックス（A）を選んで、タグの種類しゅるいを「header」にする
ボックス（A）左ひだり上のうえの「header」を右みぎクリックして「コンポーネント化」する
- コンポーネントの名前なまえを「header」にしてコンポーネントを作成さくせいする
- メニュ→追加ついか→コンポーネントから、headerが保存ほぞんされていることを確認かくにんする

フッターを追加ついかする

ヘッダーの作り方つくりかたを参考さんこうにしながら、フッターのコンポーネントを作成さくせいしてみましょう。

タグの種類しゅるいは「footer」にする
中央ちゅうおう揃えそろえでメニュー（HOME、ABOUT、CONTACT）を追加ついかする

ここで作成さくせいしたヘッダーとフッターは、今後こんごの授業じゅぎょうでも利用りようします。

知識ちしき問題もんだい

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

CampusApp

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

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

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