コラム

2019年5月28日

ディレクション部 フロントエンドエンジニア S

スマホサイトのコーディングでハマりがちな３つのポイント

今回は、マークアップエンジニアの私がスマホサイトのコーディングの際に特に気をつけているポイントを３つ紹介します。

スマホサイトのコーディングでハマりそうな３つのポイント

1. フォームに入力するときに画面が拡大されてしまう。
2. ハンバーガーメニューを開いたときにスクロールが不自然になってしまう。
3. 画面いっぱいのメインビジュアルがうまく表示されない。

【ポイント1】フォームに入力するときに画面が拡大されてしまう。

iOSで入力フォームをフォーカスすると画面が拡大され文字入力が終わってもズームされたままという状態になってしまいます。
これは、入力フォームの文字サイズが16pxを下回るフォントサイズに設定した場合に、発生する現象になります。

この現象の回避策としては、①viewportにブラウザの拡大・縮小を禁止する「user-scalable=no」に設定する、②入力フォームの文字サイズを16px以上にする、という2つの方法があります。

しかし、「user-scalable=no」を設定するとブラウザ全体で拡大・縮小が禁止され、ユーザーのアクセシビリティを損なってしまうことになるので、あまりおすすめできません。

そこで、もう一つの回避策である入力フォームの文字サイズを、16px以上に設定することが最善と考えます。

ただ、デザインで入力フォームの文字サイズが16pxを下回る場合もあるかと思います。
その場合は、文字サイズは16pxに設定しておき、「transform:scale();」（要素を拡大・縮小設定する）で縮小調整すれば、デザイン通りの見た目に近づけることが可能になります。

style設定例

input[type=”text”] {
　　font-size: 16px;
　　transform: scale(0.8);
}


【ポイント2】ハンバーガーメニューを開いたときにスクロールが不自然になってしまう。

スマホサイトでハンバーガーボタンを開いたときに、コンテンツエリアの全面にメニューが表示される仕様はよくあると思います。

この場合、表示されたメニューの高さが端末の画面の高さより高く、スクロールが必要なときに背景のコンテンツエリアもスクロールできてしまうと操作がしにくくなり、メニューも見づらくなってしまいます。

こちらの回避策としては、ハンバーガーメニューを開いたときにはコンテンツエリアのスクロールを禁止し、タップ等の操作を制御する設定をしておくことを推奨します。

具体的には、コンテンツエリアを囲っている要素に対して「position:fixed;」でコンテンツエリアを固定し、「pointer-events:none;」で要素のポインターイベントのターゲットから外す設定をJavaScriptのクリックイベントをトリガーにして設定します。

style設定例（コンテンツエリアを囲っている要素のスタイル設定）

.hoge {
　　position: fixed;
　　width: 100%;
　　pointer-event: none;
}


【ポイント3】画面いっぱいのメインビジュアルがうまく表示されない。

スマホサイトで、画面いっぱいのメインビジュアルに設定するデザインはよくあると思います。

そこで、メインビジュアルに「height:100vh;」を設定すれば、大抵の端末では問題なく表示されます。

しかし、iOS端末の場合だと下部に設置されているアドレスバーの影響で画面いっぱいに表示されません。

こちらの回避策としては、html,body要素に「height:100%;」を使いメインビジュアルに「height:100%;」を継承させる、JavaScriptで画面サイズを取得しメインビジュアルに設定するなどがあります。

html構造を考慮し最前の設定で対応することが必要になります。

style設定例（body直下にメインビジュアルの要素がある場合）

html,body {
　　height: 100%;
}
// メインビジュアルスタイルのスタイル
.hoge {
　　height: 100%;
}


最後に

スマホサイトでは、PCサイトの感覚でコーディングを行うと、端末デフォルトの仕様によって操作がしづらくなったり画面が崩れる場合があります。そういった点を考慮してコーディングすることで、より使いやすいサイトとなりますので、ご参考になさってください。