月: 2025年5月

-本日のアジェンダ-

1限目
学科 スマートフォンサイト制作基礎
デバイスについて

2限目
学科 スマートフォンサイト制作基礎
各デバイス検証について

3限目
学科 スマートフォンサイト制作基礎
課題制作

4限目
学科 スマートフォンサイト制作基礎
課題制作

5限目
学科 スマートフォンサイト制作基礎
課題制作

---

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：デバイス検証について
内容1：スマートフォンサイトについて
内容2：WEBページ作成③
内容3：
課題：なし

(注記)
・RWDのサイトについて(復習)を追記しました(2025/06/27)
・受講生さんの理解度に応じて展開ください。

本日のテーマ

デバイス検証は最後にしっかりと

デバイスとは？

デバイスとは、ホームページ（Webサイト）を閲覧するための端末のことです。パソコン（Windows、Macなど）、タブレット（Android、iPhoneなど）、スマートフォン（Android、iPhoneなど）などがあります。

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「各デバイス検証.pdf」　

【動画】「各デバイス検証」

• デバイス復習・Chromeデベロッパーツールの活用
  https://youtu.be/AcsQLCdnA2I（8:29）
• 実機検証を行いましょう・デバイス検証まとめ
  https://youtu.be/oiSlUKld7t8（8:33)

実機検証 について

スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つです。

ワンポイントアドバイス

サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。

参考サイト

• まだ実機検証してるの？クラウド上でテストできる「モバオぺ …
• WEB・アプリ検証 – 実機検証用スマホ・モバイルデバイス …
• デベロッパーツールでのスマホ確認の裏ワザとクラウド実機 …

RWD 対応のサイトについて【復習】

• 幅広デザインでの Web ページ作成
• viewport 定義の指定
• 横幅変動時のコンテンツ幅を設定
• Media Querie でデザインを整える
• 画面サイズに合わせた表示部品の導入

マルチデバイス対応の教科書②.pdf

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。