メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
SEO・Web制作
/
viewport メタタグガイド
↗
viewport メタタグガイド
seo/meta-viewport-guide
HTMLのviewportメタタグの設定方法とよくある問題を解説する。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
viewport メタタグガイドは、viewport メタタグガイドの用途、入力、出力を確認しながら日常作業を短時間で処理するためのページです。
入力例と結果を見比べながら、入力条件と出力形式が利用先に合っているか確認することができます。
viewport メタタグガイドでは、HTMLのviewportメタタグの設定方法とよくある問題を解説する。
SEO・Web制作の作業で必要になりやすい「SEO、メタ情報、公開前チェックの下書き作成」を、ページ上の入力欄からすぐに試せます。
関連する観点として viewport、メタタグ、レスポンシブ を確認し、結果をコピーして別の作業に使えます。
入力
結果
--- 推奨設定 --- <meta name="viewport" content="width=device-width, initial-scale=1"> --- プロパティ --- width=device-width デバイス幅に合わせる initial-scale=1 初期ズーム1倍 maximum-scale=1 最大ズーム(非推奨:a11y問題) user-scalable=no ズーム禁止(非推奨:a11y問題) viewport-fit=cover ノッチ対応(iPhone) interactive-widget=resizes-content キーボード対応 --- やってはいけない --- ❌ user-scalable=no (ズーム無効化) ❌ maximum-scale=1 (ズーム制限) → 視覚障害者のアクセシビリティを妨げる --- iPhone ノッチ対応 --- <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> body { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); } --- PWA対応 --- <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="theme-color" content="#3b82f6">
コピー
使い方
viewport メタタグガイドの入力欄に、確認したい文字列や数値を入れます。
必要なオプションがある場合は、用途に合わせて選択します。
表示された結果を確認し、問題がなければコピーして利用先へ貼り付けます。
入力例・出力例
INPUT
viewport メタタグガイド
OUTPUT
viewport メタタグガイドの処理結果
入力条件と出力形式が利用先に合っているか確認する
よくある利用シーン
ページ公開前、メールやSNS配信前、検索結果に出る文言を整えたいとき
viewport、メタタグ、レスポンシブに関する確認を、手元のメモやスプレッドシートを開かずに短時間で済ませたいとき。
viewport メタタグガイドの結果を、レビュー、公開前チェック、日々の作業メモに流用したいとき。
結果確認のポイント
入力条件と出力形式が利用先に合っているか確認する
文字数、読みやすさ、重複、リンク先、検索意図との一致を確認してください。
viewport、メタタグ、レスポンシブの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
結果を確認せずに本番データへそのまま反映する
検索順位や開封率を保証するものではありません。実際の成果はコンテンツ品質や配信条件にも左右されます。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
viewport メタタグガイドの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
viewport メタタグガイドは何に使えますか?
viewport メタタグガイドはviewport メタタグガイドの用途、入力、出力を確認しながら日常作業を短時間で処理するための無料ツールです。入力内容を確認しながら、結果をコピーして日々の作業に使えます。
入力したデータは保存されますか?
多くの処理はブラウザ内で完結します。サーバー処理が必要な場合も、必要な処理の範囲に限って扱います。秘密情報や個人情報は入力前に必要性を確認してください。
結果を使う前に何を確認すべきですか?
入力条件と出力形式が利用先に合っているか確認する
viewportメタタグで最低限設定すべき項目は何ですか?
`width=device-width` と `initial-scale=1` の2つが最低限の設定です。前者でビューポート幅をデバイス幅に合わせ、後者で読み込み時のズームを等倍にします。iOSでのレイアウト崩れを避けるために両方セットで指定することを推奨します。
viewportの `minimum-scale` や `maximum-scale` を使う場面は?
Webアプリのようにズームすると操作が壊れる場合に限定して使用します。一般的なコンテンツサイトでは設定しないことを推奨します。アクセシビリティガイドライン(WCAG 2.1 SC 1.4.4)では200%以上のリサイズをサポートすることを要求しています。
`initial-scale=1` と `shrink-to-fit=no` はどう違いますか?
`shrink-to-fit=no` はiOS 9のSafariでレイアウトが縮小される問題の回避策として一時的に使われましたが、現在の主要ブラウザでは不要です。`initial-scale=1` のみで十分対応できます。
関連ツール
メール件名テスター
メール件名の文字数・絵文字・パワーワード等をチェックしてスコアリング。
SEOチェックリスト
WebサイトのSEO対策チェックリスト。
A/Bテスト計算機
A/Bテストのサンプルサイズ算出と統計的有意性を判定。
alt属性テンプレート
画像のalt属性テンプレートを生成する。
apple-touch-icon 複数サイズ一括
57 / 60 / 72 / 76 / 114 / 120 / 144 / 152 / 180 px の apple-touch-icon リンクタグを一括生成。旧モデル互換を保ちたいときにそのまま貼れます。
Appleタッチアイコンタグ
Apple touch iconリンクタグを生成する。コピー用の整形済みコードを出力するため、実装や確認作業に直接貼り付け可能。
Atomリンクタグ生成
Atomフィードリンクタグを生成する。コピー用の整形済みコードを出力するため、実装や確認作業に直接貼り付け可能。
Bing サイト所有確認 meta タグ
Bing Webmaster Tools の所有権確認トークンを貼り付けて、<meta name="msvalidate.01" ...> タグを生成します。