授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
前回の復習
前回の知識問題
- 要素の重ね順を調整するCSSのプロパティはどれですか
- z-index
- float
- flex
- position
- grid
- グリッドレイアウトを実装できるCSSのプロパティと値の組み合わせはどれですか
- display: grid;
- grid: display;
- position: grid;
- layout: grid;
- display: none;
- 並ぶ方向、順番、折り返しなどを指定できるCSSのプロパティと値の組み合わせはどれですか
- display: flex;
- display: grid;
- display: position;
- display: float;
- display: z-index;
- top、right、bottom、leftなどで絶対位置を指定できるCSSのプロパティと値の組み合わせはどれですか
- position: absolute;
- position: fixed;
- position: static;
- position: relative;
- position: sticky;
- 以下の中で、重ね順が一番上になるCSSのプロパティと値の組み合わせはどれですか
- z-index: 15;
- z-index: 1;
- z-index: 5;
- z-index: head;
- z-index: top;
誰でも使える「使いやすい」Webサイト
Webサイトはいろいろな人に情報を届けるために作成されます。利用者の中にはパソコンやスマートフォンを使うのが得意ではない方も含まれるため、できる限り使いやすいWebサイトを作成することが求められます。
使いにくいWebサイトとは
「使いやすいWebサイト」を考えるために、先に「使いにくいWebサイト」について考えてみましょう。
- 情報の質の問題
- 情報が古い
- 情報が間違っている
- 情報の量の問題
- 情報量が多すぎる
- 情報量が少なすぎる
- 情報が整理されていない
- UI（ユーザーインターフェース）の問題
- ナビゲーションがわかりにくい
- ページ構成が一般的ではない
- デザインに一貫性がない
- 欲しい情報にたどり着けない
- スマートフォンなど小さいデバイスでの表示に対応していない
- ユーザーの予想に反した動作をする
- デザインの問題
- 文字と背景のコントラストが低い
- 原色や点滅を多用しすぎる
- 文字サイズが小さすぎる
- その他の問題
- 表示速度が遅い
- SSLに対応していない
使いやすいWebサイトとは
「使いにくいWebサイト」でまとめた情報をもとに、「使いやすいWebサイト」にするにはどうすればよいかとそれを実現する手段について考えます。
情報の質と量
| 求められる状況 | どうすれば良いか | |
|---|---|---|
| 実現する手段 | ||
| 情報が新しいこと | 常に新しい情報を掲載する | |
| 更新が続けられる体制を構築する | ||
| 情報が正しいこと | 情報の出典や引用元を掲載する | |
| HTMLのcite属性やblockquote要素を使う | ||
| 情報が整理されていること | 情報を整理する | |
| 制作中、運用中に情報設計を継続する | ||
| 1ページあたりの情報量が適切であること | 1ページあたりの情報量を揃える、情報量が多すぎるときはページを分ける | |
| 情報設計をする、下層ページをつくる | ||
UIとデザイン
| 求められる状況 | どうすれば良いか | |
|---|---|---|
| 実現する手段 | ||
| 欲しい情報にたどり着けること | ツリー構造にする、メニューを実装する | |
| サイトマップをつくる、HTMLのnav要素を使う、サイト内検索を実装する | ||
| ページ構成や使い勝手が一般的であること | 一般的なページ構成にする | |
| 他のWebサイトを参考にする、市販のテーマやテンプレートを使う | ||
| 利用する画面サイズを問わず表示できること | マルチデバイスに対応する | |
| レスポンシブデザインを実装する | ||
| 誰にでも見やすいデザインであること | 文字サイズや配色を調整する | |
| ユニバーサルデザインに則る | ||
その他
| 求められる状況 | どうすれば良いか | |
|---|---|---|
| 実現する手段 | ||
| 表示速度が早いこと | 表示速度を意識して制作、運用する | |
| 静的なWebサイトにする、良質なサーバーを使う、キャッシュなどを活用する | ||
| SSLに対応すること | SSLに対応する | |
| SSLを実装する | ||
Studio：使い勝手を良くする
Studioにログインしてください。
パンくずリスト
パンくずリストは、Webサイトのディレクトリ構造をホームページから順にたどることができる、簡易的なサイトマップです。
ホーム ＞ お知らせ一覧 ＞ 2025年のお知らせ一覧 ＞ 2025年10月5日のお知らせ
ユーザーにWebサイトの構造をイメージさせることで、ユーザーのスムーズな回遊をサポートします。
Studioでパンくずリストを実装する
「ABOUT」を編集しますので、デザインエディタでABOUTを編集できるように準備してください。
- mainの中にある見出しの上にボックス（A）を追加します
- ボックス（A）の横幅を「100％」、縦幅を「80px」にします
- 塗りを「#FFFFFF」にします
- 左メニューから追加タブを選び、リッチテキストボックスを追加します
- ボックス（A）の配置を「中央左」にします
- リッチテキストボックスのh2に「HOME ＞ ABOUT」と入力します
- リッチテキストボックスpを削除します
- リッチテキストボックスh2をpに変更します
- 文字サイズを「16px」にします
- リッチテキストボックスの「HOME」にリンク（URLは「/」）を作成します
- 最後に、ボックス（A）の位置を「絶対位置」にします
- （ライブプレビューでは動作しません）
「トップに戻る」ボタン
スマートフォンユーザーをメインターゲットにしたWebサイトでは、複数のページを移動するよりも、縦に長いページをスクロールで見せることが良い場合もがあります。このとき、スクロールによりナビゲーションを見失うことを防ぐためにも、ページ右下などに「トップに戻る」ボタンを置き、いつでもページトップに移動することができると、ユーザーは安心してWebサイトを利用することができます。
Studioで「トップに戻る」ボタンを実装する
「HOME」を編集しますので、デザインエディタでHOMEを編集できるように準備してください。
- 右メニューを開き、コンポーネント「header」に含まれるheaderのIDを「header」とします
- mainの中にある見出しの上にボックス（A）を追加します
- ボックス（A）のデザインを調整します
- ボックス（A）の横幅を「80px」、縦幅を「80px」にします
- 塗りを「#FFFFFF」にします
- 枠線を「5px」にします
- 角丸を「50%」にします
- ボックス（A）の下にテキストボックスを追加します
- テキストボックスの内容を「TOP」にします
- テキストボックスをボックス（A）の中に移動します
- テキストボックスにリンク（URLは「#header」）を設定します
- ボックス（A）を「絶対配置」にします
- 位置は右16px、下16pxに設定します
- ライブプレビューで確認します
ホバー
クリックやマウスオーバーなど、ユーザーからのアクションに対して、Webサイトがフィードバックを返すことがあります。「ホバー」は、もっとも簡単に実装できるフィードバックです。テキストや画像に設置されたリンク（a要素）にカーソルを当てた際、色が明るくなったり変化したりすることで、ユーザーに次の操作ができることを知らせます。
引き続き「HOME」を編集します。
- 「トップに戻る」ボタンを選択します
- 上部メニュー右端の「条件付きスタイル」から「ホバー」を選びます
- ホバーが水色になっている状態で、塗りを「#CCCCCC」に設定します
- ライブプレビューで確認します
カルーセル（スライダー）
Webサイトでは、例えばホームページのように、ユーザーが多くアクセスするページは決まっています。またホームページの中でもページ上部のエリアはほとんどのユーザーが必ず閲覧するので、価値のあるエリアとされています。ホームページ上部に、より多くのコンテンツを載せるための工夫が「カルーセル」です。複数の画像や動画を切り替えて表示することで、価値のあるエリアを効率よく使えるようにします。
引き続き「HOME」を編集します。
- 左メニューを開いて、追加タブから「カルーセル」をh1の上に挿入します
- カルーセルの縦幅を「480px」にします
- h1にしているテキストボックス（HOME）を削除しましょう
- ライブプレビューで確認します
知識問題
今日の授業内容を知識問題で復習しましょう。
CampusApp
- CampusAppの「CBT（知識問題）」から、知識問題にチャレンジしましょう
- 100点が取れるまで、繰り返し挑戦しましょう
- 期末の定期試験は知識問題の中から出題します
パソコンの再起動／シャットダウン
授業の終わりに必ずパソコンを再起動（次に他の授業がある場合）、またはシャットダウン（次に他の授業がない場合）してください。