スマホ・タブレット(タッチパネル)向けサイトデザインは余白が重要

タブレット端末やスレートPCのタッチパネルでWebブラウジングを体験すると多くの人が感じることにWebページにもっと余白がほしいということです。
フリックやピンチといったタッチ操作をするときにリンク(バナー、テキストどちらも該当)があるとそのリンクをクリックしたとみなされてしまい、スクロールさせて最後まで読みたかったのに、別のページへ行ってしまい、戻るのに一苦労です。つまり、サイトのコンテンツには最適な行間や余白をとることが重要です。

表示領域を固定幅にしていると表示がはみ出てしまって横スクロールが必要になって閲覧しにくいページになりますし、端末の多くは解像度が低いためにセンタリングして左右の余白を作っている場合には少なすぎるとスクロールさせにくくなります。


■用語
フリック(flick)はタッチスクリーンの画面上で指を軽く払ったりさすったりする操作を意味していて、Webサイトなどは指を払った方向へスクロールさせます。

「ピンチ(pinch)」と呼ばれる2本指でつまむ操作によって拡大・縮小をすることができます。ピンチイン(pinch-in)は2本の指を画面上に載せてその間隔を縮める動作で、画面上に表示されている画像を小さく表示するときや、文字を縮小するときに使います。
#ピンチインはピンチクローズ(pinch-close)と呼ばれる事もある。

ピンチインとは逆に、ピンチアウト(pinch-out)と呼ばれる2本の指を画面上に載せて指と指の間を広げる動作で、画面上に表示されている画像を大きく表示するときや、文字を拡大するときに使います。
#ピンチアウトはピンチオープン(pinch-open)と呼ばれる事もある。


NEC特選街情報 NX-Station
NEC特選街情報 NX-Station Blog