この記事は 2015年2月24日 時点での内容であり現在は状況が異なる場合があります。

レスポンシブデザイン

スマートフォンやタブレットなどの普及によりいろいろな大きさの画面でウェブサイトが見られるようになりました。

そして、そのような流れから、ブラウザではPC用サイトとスマートフォン・タブレット向けサイトが振り分けられるのが主流になっていました。

ですが、OSもブラウザも様々になってきた今、新たに主流になりつつあるのが、レスポンシブデザインです。

Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。

表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。複数のファイルを用意する場合に比べ、デザインや機能の自由度は下がるが、すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの防止が期待できる。検索エンジンやアクセス解析に内容が重複した複数の異なるURLが出現することも避けられる。

レスポンシブデザイン - e-words

表示されるhtmlファイルが1つに抑えられるため、SEO的にも良く、また管理がしやすいなどのメリットが有ります。

タブレットとは

タブレット（平板）という名の通り、板の様な形をした端末。スマートフォンよりも大きいタッチパネル液晶を搭載していて、操作しやすく、画面が見やすいのが特徴。インターネットや電子メール、電子書籍、ゲーム、動画閲覧、資料作成など用途は様々で実に多機能である。ノートPCとスマートフォンの中間のような存在といえる。

LIGブログ

要するに、iPadやNexus7,Nexus9、Windowsを搭載したSurfaceなどのことです。最近は5～6インチのファブレット（PhoneとTabletの造語）と呼ばれる製品も出てきましたので、定義としては「7インチ以上」くらいが妥当でしょうか。

さて、そんなタブレットですが、画面が大きいだけであまり使い物にもならない、という意見もインターネット上などで多く見られます。そして、その数少ないメリットの1つに、「PC感覚でネットが出来る」というものがあります。

3 ： 以下、名無しにかわりましてVIPがお送りします：2012/12/15(土) 13:10:06.06 ID:/iBf/wm90
漫画が見やすい
ネットが見やすい
PC起動がめんどい
寝ながらPC感覚でネットが出来る

そんなのもわからんの？

がべコレ速報

画面の大きなタブレットでPCサイトを見れることは、PCより手軽でスマホより充実

Webを閲覧する時、スマートフォン向けサイトだと表示される領域も狭く、情報量も少なくて、いろいろと見落としがちですよね。特にインターネットショッピングなどする際は、注意事項など見落とすと洒落になりません。

ですが、PCサイトが表示できるタブレットならどうでしょう、広い表示領域で、いつものPC感覚でサイトを閲覧することが出来ます。また、見やすく、見間違えなども起こりにくいです。

レスポンシブデザインなどのタブレットサイトは、タブレットのメリットを殺している

いまさらですが、これはレスポンシブデザインだけに言えたことではなく、タブレット向けのデザイン全般に言えることです。

手軽に情報量の多いPCサイトを閲覧する、というのがタブレットのメリットにあったはずですが、それなのに、タブレット向けに情報を削ったタブレット用サイトを見ていては、ただの画面のデカいスマホです。

タブレットを活かすレスポンシブデザインとは

やはり、

• PC表示でのズーム、アンズームが可能
• スマートフォン向けサイトorPCサイト、のみ

具体的な数字を言いますと、

• タブレットの画面幅としてポピュラーな640pxを基準に、それ以上はPCサイトを表示させ、それ未満はスマートフォン・ファブレット向けサイトを表示
• サイト幅より小さい画面で表示しても崩れないように、一番外側を囲う要素などにmin-widthを指定しておく
• サイト幅未満、640px以上の画面幅の端末に対しては不要なjavascriptを実行しないようにする

といったところでしょうか。

このサイトもおそらく記事執筆時点ではそのようなデザインになっています。

photo credit: iPad Air 2 via photopin (license)

まとめ

1. 世の中に、タブレット向けデザインはいらない
2. 実際の数値は、サイトの内容などと相談して決めるといいかもしれない
3. 手軽なタッチパネルPC、ならではのメリットを活かそう

僕自身Nexus7を使用しているのですが、タブレットではPC版を表示しているサイトが見やすいということに気付きました。例：nypost.com

そのデバイスを活かせるデザインが出来るといいですね！