2014/07/11 クリエイター

離脱率・直帰率を下げるために知っておきたいタブレットのWebデザイン基礎知識

離脱率・直帰率を下げるために知っておきたいタブレットのWebデザイン基礎知識 タブレット用のWebデザインをする上で、知っておきた基礎知識をまとめました。Web制作者はスマートフォン最適化だけでなく、タブレットの最適化もしなければならないので大変かと思いますが、ユーザーに快適にWebサイトを閲覧してもらい、離脱率・直帰率を下げるためには最適化は必須です。

レスポンシブWebデザインで対応

レスポンシブWebデザインは単一のファイルでPC、スマートフォン、タブレットそれぞれのデバイスで最適に表示させます。
CSSを切り替えることで異なる画面サイズの各デバイスに対応することができ、用意するファイル(HTML)がひとつで済むので管理がしやすくなります。
レスポンシブWebデザインはGoogleが推奨しており、SEOにも有効であるというメリットもあります。
PC用とスマートフォン/タブレット用のURLが別々である場合、ユーザーがシェアしにくくなるため、レスポンシブWebデザインでURLを1つに統一した方がユーザーにストレスを感じさせません。

読みやすいフォントサイズは14~16px

読みやすいと感じるフォントサイズは人それぞれ違いがあり、使用するタブレットのサイズによって違いがありますが、多くのユーザーが読みやすいと感じるフォントサイズは16pxであるようです。
14pxが読みやすいというユーザーも多いため、タブレットのフォントサイズは14~16pxで調整してみましょう。

ボタンは押しやすい大きさに

PC用のページをタブレットで開いた時、ボタンが小さくて押しにくくイライラした経験があるかと思います。
ボタンが小さいままではユーザーのストレスは解消されませんので、ボタンは押しやすい大きさに設定しましょう。
ボタンサイズは縦横32px以上あれば押しやすいという調査結果が出ていますので、32px以下にならないように設定すると良いでしょう。

スライド式のパネルメニューを活用する

タブレットはPCと異なり画面サイズが限られているため、サイドバーは設置しないのが一般的です。
代わりにスライド式のパネルメニューを活用すると、コンテンツの妨げにならず、かつメニューから操作してもらうことができます。

アイコンにWebフォントを使用

タブレットでアイコンがぼやけて見えてしまう場合は、Webフォントを使ってみましょう。
Webフォントはベクターファイルなので、タブレットでも綺麗に表示されます。
Retinaディスプレイでもぼやけないので、アイコンからWebフォントに切り替えることで綺麗に見せることができます。
Webデザインの求人案件 Webデザインの求人案件

Webデザイナーやクリエイターの求人・案件情報です。
制作会社もあれば自社サービスのUIデザイン案件等、幅広く掲載しています。