本文へジャンプ

タブレットでキレイに見えるWebページデザインとは?

Posted by Yuji Ushida
Apple Annouces Tablet

タブレットのレイアウトデザインは、画面の大きさから、スマホサイトとは違いPC向けのサイトデザインが向いてると考えられています。
でも、ユーザの操作方法はスマートフォン向けのルールに近い。そして縦・横で見え方が変わってしまう。ただ単純にPCサイトをつくる気分でデザインをすると、かなり使いにくいサイトになってしまいます。

ては、どうすれば、キレイで使いやすいサイトになるのか?

情報量が多いサイトなどは、情報を絞り、機能を分かりやすく配置した、使いやすいUIデザインが必要となります。
最近注目されている「レスポンシブWEBデザイン」を用いたページでは、文字やアイコンに強弱をつけて、情報を最小限に抑えるミニマルデザインでシンプルにデザインされるケースが多いです。

#レスポンシブWEBデザインについてはこちらのサイトが分かりやすかったです!
参考:http://www.seojapan.com/blog/responsive-web-design

これなら、縦・横のどちらで見ても、画面サイズが小さくなっても、分かりやすさ・機能も失われず、カッコいいデザインができますね。

それでは実際にページデザインを考えるにあたって、以下に基本的なTipsを挙げておきます。

  • ■画面サイズ 特別な指定がない限り、iPadに合わせた1004px想定が良さそう!
  • ■フォントサイズ タブレットユーザーが読みやすいと感じるフォントサイズは、16px

■ボタンサイズ

44px以上が推奨!
でも最近では、押しやすさを重視する為、もう少し幅を取る事が主流になってきている!

■タッチ操作

タッチした際、ボタンが変化したり、ブロック要素全体にリンクすることで、
分かりやすさ、使いやすさを向上させることが大事!

以下のページが大変参考になります! - http://mdlab.jp/project/tablet/01.html - http://www.aiship.jp/knowhow/archives/9267 - http://www.mdn.co.jp/di/articles/2657/?page=19

Cover image by mikemccaffrey via Flickr.

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
こんな僕たちの仲間に入りませんか?
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr