2025/5/30の記録です。
講師：小谷先生
はじめに
今やWebサイトは、パソコン・スマートフォン・タブレットなど、さまざまな端末から閲覧されます。これに対応するために必要なのが「マルチデバイス対応」。本記事では、各デバイスの基本的な特徴と、Web制作時の検証ポイントをまとめました。
パソコンのOSと特徴
パソコンには以下のようなOSがあります：
-
Windows：最もシェアが高く、PC/AT互換機として幅広いメーカーに対応。
-
Mac OS：Apple社が提供。デザイン・音楽業界で人気。
-
Linux：オープンソースのOSで、主にサーバー向けに利用されます。
スマートフォンのOSとキャリア
スマホには主に2つのOSがあります：
-
Android OS：Googleが提供。機種の自由度が高い。
-
iOS：Apple社の「iPhone」に搭載。
さらに、日本では以下のような通信会社（キャリア）によるサービス提供があります：
-
docomo
-
au
-
SoftBank
タブレットの分類
タブレットもスマホと同様、搭載するOSによって分類されます。
| OS | 主な端末例 | 特徴 |
|---|---|---|
| iOS | iPad、iPad mini | デザイン性が高く動きが滑らか |
| Android | Nexus、dtabなど | アプリの自由度が高い |
| Windows系 | Surface、ARROWSなど | PCに近い多機能性 |
| 独自OS | Kindleシリーズなど | 特定サービスとの連携が強い |
「ケータイ」と「スマホ」の違い
従来のいわゆる「ガラケー」は、スマホと区別される機能限定型の携帯電話です。近年ではガラケーにもAndroidを搭載したものもあり、分類があいまいになってきています。
Web制作における検証の基本
-
まずはChromeのデベロッパーツールで確認
-
ショートカット：Windowsは「Ctrl + Shift + i」、Macは「option + command + i」
-
デバイスモードで画面サイズや動作確認が可能
-
-
実機での表示確認
-
デバイスごとの挙動差をチェック
-
OSやブラウザのバージョンも考慮
-
「マルチデバイス対応」とは？
厳密には「マルチスクリーン対応」とも言われ、デバイスそのものではなく、画面サイズ・解像度に対応するという考え方が正確です。
重要なのは、「やりすぎず・実機での確認を適切に行うこと」。過剰な調整よりも、ユーザーが使うであろう環境での最適化がポイントです。
まとめ
-
各OSやデバイスの違いを理解することが、マルチデバイス対応の第一歩。
-
シュミレーターだけに頼らず、実機での検証を忘れずに。
-
ポートフォリオなどに制作実績と合わせて記載すると、信頼度もUP！
【補足】
-
必要に応じて、クライアントへの確認・報告も行いましょう。
-
SEOやCWV改善の観点からも、表示速度やレイアウト確認は重要です。
