⌨️ キーボードが上がってもボタンを隠さないためには?
モバイルフォーム画面でよく発生する問題の一つは、キーボードが上がると送信ボタンや入力欄が画面外に押し出されて見えなくなることです。キーボードは画面全体の高さの35〜45%程度を占めるため、この領域を考慮せずにUIを配置すると、ユーザーはボタンを押すたびに画面をスクロールしなければならなくなります。
このツールは画面高さとキーボードの種類(テキスト・数字・メール)を入力すると、予想キーボード高さとその上に残る安全領域を計算します。数字キーパッドはテキストキーボードより低く約35%、通常のテキストキーボードは約42%を占めることを基準値としています。
計算された安全領域が100px未満の場合、ボタンはとても狭い空間に置かれることになるため、入力欄にフォーカスした際に画面を自動スクロールしたり、ボタンを画面上部に移動することを検討してください。iOSでは予測変換バーがさらに空間を占めることがあるため、実機テストで再確認するのが安全です。
よくある質問
キーボードの高さは機種ごとに違いますか?
はい、実際の高さは機種やOSバージョンによって少し異なります。このツールは画面高さに対する一般的な比率を基準に、安全な余裕を持たせた概算値を提供します。
安全領域を計算してもボタンが隠れる場合は?
iOSでは予測変換バーが追加で40px程度を占めることがあります。余裕を少し大きめに取るか、実機で直接テストするのが安全です。
Webでキーボードの高さを正確に検知できますか?
最新ブラウザはVisualViewport APIで実際のキーボード高さを検知できます。ただし古いブラウザにも対応する必要がある場合は、このツールの推定値を基準に余裕を持って設計するのが安全です。