目次
授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
前回の復習
前回の知識問題
- 「コーポレートサイト」の特徴として間違っているものはどれですか
- 買い物カゴ機能がある
- 比較的真面目なデザインである
- 会社や団体を紹介するための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サイトでは「内側の余白（padding）」と「外側の余白（margin）」の2種類の余白を使います
角丸
角丸はWebサイトの親しみやすさに影響を与えます。
- 角丸がない四角形では、規律や信頼、安定感を感じます
- 角丸がある四角形では、柔らかさや優しさを感じます
- 角丸が大きいと子どもっぽいデザインになります
- 同じWebサイト内では角丸の大きさは統一します
写真やイラスト
写真やイラストのテイスト（色やタッチ、ぼかし など）はWebサイトの雰囲気に影響を与えます。
Studio：コンテンツを装飾する
Studioにログインしてください。
テキストスタイルの設定
テキストボックスを挿入して、スタイルを変更してみましょう。
- 文字間：文字の間隔を設定
- 行高：1行あたりの縦幅を設定
- サイズ：テキストのサイズを設定
- px：画像の最小単位
- rem：ルート要素（htmlなど）のフォントサイズを基準に大きさを指定する単位
- vw：画面（正確にはビューポート）の幅の1%を単位とする
- vh：画面（正確にはビューポート）の高さの1%を単位とする
- フォント：フォントの種類を設定
- 太さ：フォントの太さ（ウェイト）を設定
- イタリック：テキストを斜体に設定
- 下線：テキストに下線を設定
- 色：テキストの色を設定
- シャドウ：テキストの影を設定
- 配置：テキストの位置を設定
- 左揃え
- 中央揃え
- 右揃え
- 両端揃え
- 文字組み：横書きや縦書きを設定
ボックススタイルの設定
ボックスを挿入して、スタイルを変更してみましょう
- 表示：ボックスの表示／非表示を設定
- デフォルト
- タブレット
- モバイル
- 配置：ボックスの配置スタイルを設定
- 相対（relative）：まわりの要素との関係性を保ちながら配置が決まる
- 絶対（absolute）：親ボックスを基準に子ボックスの位置を固定表示
- 固定（fixed）：特定の位置に固定され、スクロールに影響されず常に同じ位置に表示される
- 追従（sticky）：スクロールに応じてボックスの配置方法が切り替わる
- はみ出し：親ボックスからはみ出した子ボックスの表示方法を設定
- 表示：親ボックスからはみ出して表示させる
- 非表示：親ボックスからはみ出したら表示しない
- スクロール：縦または横にスクロールする
- マージン：ボックスの外側の余白の設定
- パディング：ボックスの内側の余白の設定
- 横幅：ボックスの横幅を設定
- 縦幅：ボックスの縦幅を設定
- 角丸：ボックスの角丸を設定
- 不透明度：ボックスの不透明度を設定
- 塗り：ボックスの塗りを設定
- 枠線：ボックスの枠線を設定
- シャドウ：ボックスの影を設定
知識問題
今日の授業内容を知識問題で復習しましょう。
CampusApp
- CampusAppの「CBT（知識問題）」から、知識問題にチャレンジしましょう
- 100点が取れるまで、繰り返し挑戦しましょう
- 期末の定期試験は知識問題の中から出題します
パソコンの再起動／シャットダウン
授業の終わりに必ずパソコンを再起動（次に他の授業がある場合）、またはシャットダウン（次に他の授業がない場合）してください。