Webサイトのデザイン
44pxの壁

iPhoneやiPadでアイコンを指先でタップするとき、
そのアイコンが小さすぎてイライラしたことってありますか?
多分あまりないと思います。

その秘密は44pxに隠されています。

iOSヒューマニンタフェースガイドラインによると、
タップ可能な要素は縦横ともに44px(Retinaでは88px)以上と書かれています。
iPhoneをはじめとするスマートフォンでの使用感を快適にするには、
タップ可能な要素を44x44px以上の大きさにすると良いです。

iOS44px

これは、例えばボタンのサイズを44x44pxにしなくても
上図の斜線部分のように、タップ可能な領域が44x44px以上あればOKです。
※斜線部分をタップしてもボタンを押したものとして扱う!

これをスマートフォン向けのWebサイトに準用してみます。
例えば、ページの短辺320pxに対して、
ボタンなどのタップできる要素を44x44px以上でデザインすると
スマートフォンで快適に使えるWebサイトになります。
短辺が480pxならばボタンのサイズは66x66px以上です。

iOSヒューマニンタフェースガイドライン
スマートフォン向けのWebサイトデザインにも参考になります。
今回はその中から1点紹介させていただきました。

お問い合わせについて

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

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*