授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
前回の復習
前回の知識問題
- ストック情報ではないものはどれですか
- チャットでのやりとり
- マニュアル
- 教科書
- 議事録
- 顧客データ
- フロー情報ではないものはどれですか
- 辞書
- 日常会話
- ニュース速報
- 業務連絡
- 電話でのやり取り
- ストック情報がフロー情報に変換されたのはどれですか
- 本の文章がSNSで広まる
- 論文が引用される
- SNSの投稿がシェアされる
- 会議が議事録にまとめられる
- フロー情報がストック情報に変換されたのはどれですか
- 会議が議事録にまとめられる
- 論文が引用される
- 本の文章がSNSで広まる
- SNSの投稿がシェアされる
- StudioのCMSの取り扱いについて正しいのはどれですか
- モデルを追加して、アイテムを追加する
- アイテムを追加して、モデルを追加する
- コンポーネントを追加して、カテゴリーを追加する
- カテゴリーを追加して、コンポーネントを追加する
- CMSを追加して、テンプレートを追加する
レスポンシブデザイン
Webサイトをいろいろなデバイスから良い状態で見られるようにする「レスポンシブデザイン」について学びます。
Webサイトを閲覧するのに利用されるデバイスはたくさんあります。
デバイスの例といろいろな画面サイズ
- パソコン
- スマートフォン
- タブレット
- テレビ
- カーナビ
- プロジェクター など
デバイスによって、画面サイズはいろいろです。
| パソコンの例 | ・Apple MacBook Air：2560*1600 ・Apple MacBook Pro：3024*1964 ・Microsoft Surface Pro 8：2880*1920 |
|---|---|
| スマートフォンの例 | ・Apple iPhone 17：402*874 ・Google Pixel 9 Pro：1280*2856 |
| タブレットの例 | ・Apple iPad mini：744*1133 ・Apple iPad Pro：1024*1366 |
| テレビの例 | ・フルHD：1920*1080 ・4K：3480*2160 |
なお、AppleのRetinaなど、高画素密度技術については割愛します。
レスポンシブデザインとは
レスポンシブデザインとは、パソコンやスマートフォン、タブレットなど、異なる画面サイズのデバイスに応じて、ウェブサイトのレイアウトや表示を自動で最適化するデザイン手法のことです。
レスポンシブデザインでは、画面の横方向のサイズに応じて、表示する方法や表示する内容を切り替えます。しかし、上述のように画面の種類はたくさんあるため、ある程度のサイズを目安にして切り替えられるよう設計することが多いです。
画面の表示を切り替える基準点を「ブレイクポイント」と呼びます。
ブレイクポイントの例
| ブレイクポイント1 | ブレイクポイント2 | |
|---|---|---|
| スマホ表示 | 544px | 540px |
| タブレット表示 | 768px | 840px |
| パソコン表示 | 992px | 1280px |
| 大画面表示 | 1200px | – |
レスポンシブデザインで気をつけること
- モバイルファースト
- スマートフォンなど小さい画面での閲覧を最優先に考える
- コンテンツを増減しない
- スマホのみで、あるいはパソコンのみで利用できるコンテンツを作らない
- どんなデバイスでもユーザー体験が等しくなるように考える
- 画像や動画を複数作成する
- 縦長の画面（スマホなど）と横長の画面（パソコンなど）、それぞれに最適なメディアを準備する
- 文字の大きさに注意する
- すべてのデバイスでストレスなく文字を読むことができるように調整する
- 実際のデバイスで確認する
- 最終的には、想定している実際のデバイスを使って見え方を確認しましょう
Studio：レスポンシブデザイン
Studioには、画面幅に応じて表示内容や表示方法を変えるレスポンシブ表示機能があります。
Studioにログインしてください。
以下の工程でレスポンシブデザインを体験します。
- STEP1：エディタで画面幅を変更してみる
- STEP2：ブレイクポイントを変更する
- STEP3：ハンバーガーメニューの実装1
- STEP4：ハンバーガーメニューの実装2
- STEP5：動作確認をする
STEP1：エディタで画面幅を変更してみる
デザインエディタで「HOME」を編集します。
- コンテンツエリア外をクリックすると、「レスポンシブ」の設定画面になります
- 「タブレット」の表示にして、見え方の変化を確認します
- 「モバイル」の表示にして、見え方の変化を確認します
- mainのCMSリストの上にテキストボックスを追加し、内容を「スマホで表示」とします
- メニュー左端の「表示」から、「モバイル」にだけチェックを入れます
- 「タブレット」「デフォルト」で「スマホで表示」が表示されていないことを確認しましょう
- 表示を「デフォルト」に戻します
STEP2：ブレイクポイントを変更する
既定のブレイクポイントを変更します。
- 「レスポンシブ」の設定画面から「ブレイクポイントの編集」を選びます
- タブレットを「768px」に変更します
- モバイルを「420px」に変更します
- 「編集を完了」します
STEP3：ハンバーガメニューの実装1
スマホでの表示などで「≡」や「＝」のような記号を使い、メニューを表示したり非表示にしたりすることがあります。この「≡」を使ったメニューを「ハンバーガーメニュー」と呼びます。
- headerコンポーネントを編集します
- headerコンポーネントの右のボックスにアイコンを挿入します
- 右メニューを開き、挿入したアイコンの種類を「menu」にします
- アイコンのサイズを「36」にします
- 上メニュー左端から、アイコンを「モバイル」「タブレット」のみ表示するようにします
- 上メニュー左端から、既存のナビゲーションを「デフォルト」のみ表示するようにします
- レスポンシブ設定画面に移動し、表示を切り替えて確認します
- 「モバイル」ではハンバーガーメニュー（≡）が表示される
- 「タブレット」「デフォルト」ではハンバーガーメニュー（≡）が表示されず、既存のナビゲーションが表示される
STEP4：ハンバーガーメニューの実装2
スマホ用のメニューを「モーダル」で作成します。モーダルは画面上でポップアップ表示することができるウインドウです。
- レスポンシブ設定で「デフォルト」を選びます
- 左メニューを開きページタブを表示します
- ページを追加します
- 「モーダル」を選びます
- モーダルの横幅を「100%」、縦幅を「100%」にします
- モーダルの塗りを「#FFFFFF」、角丸を「0」にします
- モーダルのマージンを「0px」、パディングを「16px」にします
- アイコンを挿入します
- 右メニューを開き、挿入したアイコンの種類を「close」にします
- アイコンのサイズを「36」にします
- アイコンのリンク先を「モーダルを閉じる」にします
- モーダルの並び方を「中央上」にします
- モーダルにナビゲーションを追加します
- テキストボックスを追加します
- リストに変換します
- ギャップを「16」にします
- 左メニューの「レイヤー」から、リストに「HOME」「ABOUT」「CONTACT」を追加します
- 各リストにurlを追加し、各ページへのURLを適用します
- リンクが有効になっている確認し調整します
- HOMEの編集に戻ります
- ハンバーガーメニュー（≡）のリンク先を「Modal 1」にします
STEP5：動作確認する
ライブプレビューから、ハンバーガーメニューの動作を確認しましょう。ブラウザの横幅を手動で変化させて、以下の項目を確認しましょう。
- デフォルトのサイズでは
- ハンバーガメニューが表示されない
- ナビゲーションが表示される
- タブレットのサイズ以下では
- ハンバーガーメニューが表示される
- ハンバーガーメニューを押すとモーダルが表示される
- モーダルのメニューでページが移動できる
- モーダルを閉じられる
知識問題
今日の授業内容を知識問題で復習しましょう。
CampusApp
- CampusAppの「CBT（知識問題）」から、知識問題にチャレンジしましょう
- 100点が取れるまで、繰り返し挑戦しましょう
- 期末の定期試験は知識問題の中から出題します
パソコンの再起動／シャットダウン
授業の終わりに必ずパソコンを再起動（次に他の授業がある場合）、またはシャットダウン（次に他の授業がない場合）してください。