学科【オンライン】2025.11.25
授業内容
- デバイスについて
- 各デバイス検証について
- 課題制作
習得内容
- デバイスについて
デバイスとは、ホームページ（Webサイト）を閲覧するための端末のこと。パソコン（Windows、Macなど）、タブレット（Android、iPhoneなど）、スマートフォン（Android、iPhoneなど）などがある。
■タブレットの種類
タブレット端末を大別した場合、「iOSタブレット」「Android OSタブレット」「Windows系OSタブレット」「AmazonKindleシリーズ」の4つに分かれる。
- 各デバイス検証について
■実機検証 について
スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つ。デバック作業。
フリーランスで実機検証する場合はデバイスを何種類か用意する必要がある。
企業が設定している推奨環境はホームページに記載している場合がある。
■Chromeのデベロッパーツール
「Ctrl + Shift + i」または「F12」キー（Macの場合は「option + command + i」）でデベロッパーツールを表示
■デベロッパーツールとは
Google Chromeにデフォルトで搭載されている開発者向けの検証ツール。普通にサイトを閲覧する際に使うことはないが、開発者がHTMLやCSSなどからレイアウト崩れの原因の特定や、ページ改修前後の検証など、様々な面で活用がでる。
レイアウトやデザインを変更する際のテストとして使えるHTMLやCSSの検証ができるElementsパネル、PCやスマホ、タブレット等での表示・見え方のシミュレーションができるデバイスモードなど、Webページの制作や検証などを行うために必要な要素を幅広く備えている事が大きな特徴。
また、SEO視点で重要なCWV（コアウェブバイタルズ）を改善する際ボトルネックを発見し、改善に結びつけるといった、システムやWeb制作以外でも活用できる機能も豊富。
■注意点！
シュミレーターはあくまでもシュミレーターと考え、実際にページが出来たら実機のデバイスで確認を行う。
様々なデバイスがある為、当然ですが「デバイス依存」という問題がある事を前提として作成していこう。
デバイス依存は、機種のOSやバージョンの違いによっても異なる場合がある。
まずは自身の制作環境でしっかり作成し、次に実機での検証を行ってみよう。
また、可能性のある実機は出来るだけ確認をしてみよう。
■マルチスクリーン対応とデバイス依存対応
現在、スマートフォンやタブレットなどPC以外のWebのスマートデバイスへの対応は、「（Webの）マルチデバイス対応」とか「（Webの）マルチスクリーン対応」と呼ばれる。技術的観点から正確に言えば、コンテンツの作りをデバイス（iPhone 6とかNexus 7など）に対応するのではなく、スクリーンの物理的な大きさや解像度（4インチや10インチと解像度）への対応であるため、「マルチスクリーン対応」が正しいと言える。マルチデバイス対応に対して間違わない為に理解すべきことは、ガラケーと比較すればスマホにおける機種依存問題は、取るに足らない小さな問題である。なぜなら、OS自動更新やブラウザーの選択、標準仕様動作する能力増強など、根本的な解決がスマホでは図られているから。それ故に、この問題は更に小さくこそなれ、大きくはならない問題。だから、ビジネス合理性を考えれば、やり過ぎは禁物だと言える。
■RWD 対応のサイトについて【復習】
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入