ユーザビリティの観点からみて、
スマホやタブレットでは
ユーザの意思による拡大縮小を妨げる
べきではないという考え方があります。

それとは別に、ネイティブアプリのように
画面の上部や下部にメニュー等の位置を
固定したいという希望が出る場合もあります。

そこで、以下の 3つ条件をサポート範囲として
ユーザによる拡大縮小とメニューの位置固定の
両立について考えてみます。

• iOS + Safari
• Android + Chrome
• Android + Browser (Androidの標準ブラウザのこと)

※iOSは5.x以降、Androidは4.x以降

まず、ネイティブアプリのように
メニューの位置を固定するには
position:absolute と ページ内スクロール
(-webkit-overflow-scrolling:touch;) という
やり方が 1つあります。

これによりメニューの位置を固定でき、
それ以外の領域はオーバーフローさせることで
-webkit-overflow-scrolling によって
モーメンタム (慣性) スクロールも可能です。

しかし、iOS 5 では子要素がタッチ不能となる
症状があるようなので採用し難いところがあります。

-webkit-overflow-scrolling を使えないとすると
スクロール中も Javascript でメニュー位置を
計算して移動・追従できれば良いわけですが、
iOS + Safari ではスクロール中の
Javascript の実行は制限されるため
これは実現できません。
つまり、スクロール終了後、突然に
メニューが移動してくるという見え方になります。

それではと、iScroll などのスクリプトを
使用する方法も考えられます。
その場合は、動的な内容の変動や、
select要素などをタップできる必要があると、
スクロールにちょっと手を加える必要性が出てきます。
また、ちょっと重いので内容満載のページだと困ります。

ですから、制約が少なく、それでいて
ネイティブアプリのようにメニューが
指定の位置にキレイに固定できるように
するためには position:fixed を使う
ことになるのではないかと思います。

position:fixed を使用している場合に
ピンチイン / ピンチアウトで拡大縮小を
行うと、position:fixed した要素が
ふらふらと動いてしまいます。
これを防ぐには拡大縮小を無効化する必要性が出てきます。

なお、今回のサポート範囲としては考えませんが、
Android 2.x 系では position:fixed を
使用するには viewport にて
user-scalable=no の指定が必須です。

このようなわけで、
ユーザによる拡大縮小 (user-scalable=yes) と
ネイティブアプリのようにキレイな
メニューの位置固定 (position:fixed) を
両立するのはちょっと困難なように思われます。

ですから、Webアプリやスマホサイトのデザインでは
これらの要素、すなわちユーザの意思による拡大縮小と
メニューなどの位置固定とは排他的である
と考えておくと、高いクオリティで作りやすくなると思います。

もちろん、動作の滑らかさや美しさに
拘らなければ簡単に両立できます。
あくまでもクオリティに徹底的に拘るときには
排他的ではないかというお話でした。

Webアプリや、レスポンシブな Webサイトの
デザインのご参考になれば幸いです。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。