検証は必須
Chromeのデベロッパーツールを活用しましょう。
デベロッパーツールとは、Google Chromeにデフォルトで搭載されている開発者向けの検証ツール。
普通にサイトを閲覧する際に使うことはありませんが、開発者がHTMLやCSSなどからレイアウト崩れの原因の特定や、ページ改修前後の検証など、様々な面で活用ができます。
デベロッパーツールでは様々なことができます。
何ができるかすべてを網羅するのは難しいですが、レイアウトやデザインを変更する際のテストとして使えるHTMLやCSSの検証ができるElementsパネル、PCやスマホ、タブレット等での表示・見え方のシミュレーションができるデバイスモードなど、WebWebページの制作や検証などを行うために必要な要素を幅広く備えている事が大きな特徴。
また、SEO視点で重要なCWV（コアウェブバイタルズ）を改善する際ボトルネックを発見し、改善に結びつけるといった、システムやWeb制作以外でも活用できる機能も豊富。
「Ctrl + Shift + i」または「F12」キー（Macの場合は「option command + i」）でデベロッパーツールを表示する
シュミレーターはあくまでもシュミレーター
実際にページが出来たら実機のデバイスで確認を行って、確認作業をしましょう。
デバイス検証のまとめ
【対応するデバイスを確認】
・まずはChromeのデベロッパーツールで作成
・実際のデバイスで確認
・特に実際に使用する可能性の高いデバイスでの確認
【作成（納品）の注意点】
・必要に応じてクライアントへ報告
・ポートフォリオサイトへの掲載も効果的です。
ポートフォリオサイトでは何で何を検証したことも記載しておく。
WEB制作は問題なく動いているか？と確認しておくは重要。
PC、OS、実機デバイス（機種）
所感
これまでWEBサイトはいくつか作ってきて、検証ツールで確認したものと実機で見たときのイメージが異なることがあり、その度に、実機を確認しながら修正していた。
手順としてはあっていたことがわかり、安心した。
また、検証ツールと実機で検証していることはアピールできると思っていなかったので、新しいアイデアだった。