2012-08-08

iPhone向けウェブデザインについて考える

いわゆる「スマホ専用サイト」ではなく、PCサイト(という言い方は変ですが)をiPhoneで閲覧したときの使い勝手について。

カラムの横幅を広げすぎない

カラムの横幅が広すぎると、ダブルタップで幅を合わせても文字が小さくて読めず、文字が読める程度まで拡大すると今度は横スクロールが発生する、というジレンマに陥りますPCガラケーの頃から、「適当に横幅を狭くしたほうが長文を読みやすい」という指摘はされていますが、iPhoneもそれに倣うべきだということでしょう。ページ全体の横幅についてはあまり問題になりません。

ヘッダーは固定しない

width:100%のヘッダーをpositionでページ上部に固定した場合、ページを拡大するとヘッダーの幅がそれに合わせて縮小し、内容物が折り返されて縦に長くなりページを半ば覆ってしまう、というような問題が発生します。

キーワードリンクをしない

ブログWikiでは、文中のキーワードリンクをべたべたと張ることがよくありますが、スクロールダブルタップズームのために画面のどこかにタッチしなければならないスマホでは、必然的に誤タップが多くなってしまます。本文以外でも、なるべくタッチ用の余白を多く取るように心がけたほうが良いと思われます

インクリメンタルサーチをしない

フォームにフォーカスするとそれに合わせて自動的にページが拡大されるiPhoneでは、フォー入力中にはそのフォームに集中することを強いられますフォームに文字を入力しながら変化していく本文を読む、という操作には向いていません。

記事への反応(ブックマークコメント)

ログイン ユーザー登録
ようこそ ゲスト さん