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

2025年09月29日

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

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

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

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

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

「コーポレートサイト」の特徴とくちょうとして間違ってまちがっているものはどれですか
- 買い物かいものカゴ機能きのうがある
- 比較的ひかくてき真面目まじめなデザインである
- 会社かいしゃや団体だんたいを紹介するしょうかいするためのWebサイトである
- オンライン上おんらいんじょうに会社かいしゃを再現するさいげんするつもりで制作せいさくする
- お問いとい合わせフォームがある
「リクルートサイト」の特徴とくちょうとして間違ってまちがっているものはどれですか
- 1ページ構成こうせいである
- 企業きぎょうや団体だんたいの求人きゅうじんをするためのWebサイトである
- 社員の声こえを紹介するしょうかいする
- 新しん卒向けと中途ちゅうと採用さいよう向けとで内容ないようを変えるかえる
- 企業きぎょう文化ぶんかを紹介するしょうかいする
「ブランディングサイト」の特徴とくちょうとして間違ってまちがっているものはどれですか
- 既存きぞん顧客きゃくのみにアピールする
- ブランドのストーリーを紹介するしょうかいする
- ブランドの概要がいようを紹介するしょうかいする
- ビジュアルや体験たいけんを重視じゅうしする
- 潜在顧客せんざいこきゃくの信頼しんらいを獲得かくとくする
「オウンドメディア」の特徴とくちょうとして間違ってまちがっているものはどれですか
- 世の中よのなかのいろいろなニュースをまとめる
- 企業きぎょうや団体だんたいがユーザーに有益ゆうえきな情報じょうほうを発信はっしんする
- コンテンツの質しつが重視じゅうしされる
- コーポレートサイトに誘導ゆうどうする
- サービスサイトやプロダクトサイトに誘導ゆうどうする
「ランディングページ」の特徴とくちょうとして間違ってまちがっているものはどれですか
- 広告こうこくに誘導ゆうどうする
- 1ページ構成こうせいである
- 「コールトゥアクション」を含むふくむ
- 広告こうこくからたどり着くつくことがある
- ECサイトなどに誘導ゆうどうする

Webサイトのデザイン設計せっけい

Webサイトはその目的もくてきに応じてデザインを決めきめなければいけません。

Webサイトのデザインを決めるきめる要素ようそ

配色はいしょく
フォント
余白よはく
角丸かどまる
写真しゃしんやイラスト

配色はいしょく

配色はいしょくはWebサイトのイメージ構築に影響えいきょうを与えあたえます。

参考さんこう）色いろと情報じょうほう

色いろは3色いろ程度ていどにする
背景はいけいとなる「ベースカラー」、Webサイトの印象いんしょうを決めるきめる「メインカラー」、強調きょうちょうなどに使うつかう「アクセントカラー」を決めるきめる
それぞれの割合わりあいはベースカラー（70%）、メインカラー（25%）、アクセントカラー（5%）とする

フォント

フォントは読みよみやすさや伝わりやすさに影響えいきょうを与えあたえます。

フォントの種類しゅるいは1種類しゅるいか2種類しゅるいくらいにする
年齢ねんれいや障害しょうがいの有無うむを問わずとわず誰だれにでも読みよみやすい「ユニバーサルデザインフォント（UDフォント）」が良いよい
フォントは太さ（weight）が変わるかわると印象いんしょうが大きくおおきく変わりかわります

余白よはく

余白よはくはWebサイトの印象いんしょうに影響えいきょうを与えあたえます。

余白よはくが広いひろい：落ち着きおちつき、高級こうきゅう感、ゆったり感
余白よはくが狭いせまい：賑やかにぎやか、力強さちからづよさ、スピード感
余白よはくはWebサイト全体ぜんたいで統一とういつしたルール（16の倍ばい数かずなど）を設けもうけて適用てきようします
- 16は1、2、4、8、16と多くの約やく数かずを含みます

角丸かどまる

角丸かどまるはWebサイトの親おやしみやすさに影響えいきょうを与えあたえます。

角丸かどまるがない四角形しかくけいでは、規律きりつや信頼しんらい、安定あんてい感を感じかんじます
角丸かどまるがある四角形しかくけいでは、柔らかさや優しさやさしさを感じかんじます
- 角丸かどまるが大きいおおきいと子こどもっぽいデザインになります
- 同じおなじWebサイト内では角丸かどまるの大きさおおきさは統一とういつします

写真しゃしんやイラスト

写真しゃしんやイラストのテイスト（色いろやタッチ、ぼかし　など）はWebサイトの雰囲気ふんいきに影響えいきょうを与えあたえます。

Studio：コンテンツを装飾そうしょくする

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

テキストスタイルの設定せってい

テキストボックスを挿入そうにゅうして、スタイルを変更へんこうしてみましょう。

文字間もじかん：文字もじの間隔かんかくを設定せってい
行高ぎょうこう：1行ぎょうあたりの縦たて幅はばを設定せってい
サイズ：テキストのサイズを設定せってい
- px：画像がぞうの最さい小しょう単位たんい
- rem：ルート要素ようそ（htmlなど）のフォントサイズを基準きじゅんに大きさおおきさを指定していする単位たんい
- vw：画が面めん（正確せいかくにはビューポート）の幅はばの1%を単位たんいとする
- vh：画が面めん（正確せいかくにはビューポート）の高さたかさの1%を単位たんいとする
フォント：フォントの種類しゅるいを設定せってい
太さ：フォントの太さ（ウェイト）を設定せってい
イタリック：テキストを斜はす体からだに設定せってい
下線かせん：テキストに下線かせんを設定せってい
色いろ：テキストの色いろを設定せってい
シャドウ：テキストの影かげを設定せってい
配置はいち：テキストの位置いちを設定せってい
- 左ひだり揃えそろえ
- 中央ちゅうおう揃えそろえ
- 右みぎ揃えそろえ
- 両端りょうたん揃えそろえ
文字組みもじぐみ：横よこ書きや縦たて書きを設定せってい

ボックススタイルの設定せってい

ボックスを挿入そうにゅうして、スタイルを変更へんこうしてみましょう

表示ひょうじ：ボックスの表示ひょうじ／非ひ表示ひょうじを設定せってい
- デフォルト
- タブレット
- モバイル
配置はいち：ボックスの配置はいちスタイルを設定せってい
- 相対そうたい（relative）：まわりの要素ようそとの関係かんけい性せいを保ちながら配置はいちが決まるきまる
- 絶対ぜったい（absolute）：親おやボックスを基準きじゅんに子こボックスの位置いちを固定こてい表示ひょうじ
- 固定こてい（fixed）：特定とくていの位置いちに固定こていされ、スクロールに影響えいきょうされず常につねに同じおなじ位置いちに表示ひょうじされる
- 追従ついじゅう（sticky）：スクロールに応じてボックスの配置はいち方法ほうほうが切きりり替わる
はみ出し：親おやボックスからはみ出した小しょうボックスの表示ひょうじを設定せってい
マージン：ボックスの外側そとがわの余白よはく設定せってい
パディング：ボックスの内側うちがわの余白よはく設定せってい
横よこ幅はば：ボックスの横よこ幅はばを設定せってい
縦たて幅はば：ボックスの縦たて幅はばを設定せってい
角丸かどまる：ボックスの角丸かどまるを設定せってい
不ふ透明度とうめいど：ボックスの不ふ透明度とうめいどを設定せってい
塗りぬり：ボックスの塗りぬりを設定せってい
枠わく線せん：ボックスの枠わく線せんを設定せってい
シャドウ：ボックスの影かげを設定せってい

知識ちしき問題もんだい

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

CampusApp

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

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

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