• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

伝わるデザインついて、瞬時に判断していくための知識を書き綴ります。デザイン探索

2021年1月07日(木曜日)  (村本 友梨)

タブレットはPC表示?スマホ表示?

皆さん明けましておめでとうございます。
クリエイターの村本です。

今回は、タブレット端末におけるウェブサイトのデザインはどうなるか?
現時点での、考え方と実際の対応をまとめておきたいと思います。


■デバイスとウェブデザインの関係
---------------------------------
スマホの普及によりスマホの画面サイズでもウェブサイトを見るのが当たり前になりました。

当初は、PCで見ることを前提にウェブサイト制作を行っていましたが
それではスマホで見たときに縮小されて字も小さくとても見づらい表示になってします。

そこでスマホ表示用のウェブサイトが必要になりました。 

制作側の話をすると、PC用、スマホ用のウェブサイトをそれぞれ完全に別のものを用意して
「PCで検索したときはPC用、スマホで検索したときはスマホ用のウェブサイトを表示する」
という方法で対応していました。

ですが、2015年にGoogleが「レスポンシブデザイン」を推奨するようになり
スマホ用のウェブサイトに対する対応が変わってきました。


■レスポンシブデザインとは?
---------------------------------
レスポンシブデザインとは、
どのデバイスに対しても同じHTML(文字や画像情報)を表示し
(ウェブページのデザインを指定する)CSSを使用して
各デバイス用のデザインに対応する方法です。

→ 『用意する情報は1つで、見た目だけ画面サイズによって変える』というものです。

今ではこれも当たり前ですが、タブレット端末があります。
そしてPC、スマホ共に様々な画面サイズのものがあります。

レスポンシブデザインによる対応であれば、
どのような画面サイズの端末であっても柔軟に対応することができます。

とはいえ、現在ウェブサイトを見るのに使われてるデバイスの大半はスマホとPCです。
スマホ用とPC用の2つのデザインを準備しておき、タブレットなど、
中間サイズのデバイスでは、どちらかのデザインを適用するというのが一般的です。

■PC用とスマホ用のデザインの切り替えはどこにするべきか?
---------------------------------
今時点では、画面の横幅サイズが896px以下のときはスマホ用のデザインを表示する
という基準が主流になりつつあります。


■タブレットはPC表示?スマホ表示?
---------------------------------
図の通り、利用率が圧倒的に多いiphoneをはじめとしたスマホと、
そのスマホを横向きしたときの表示そしてipad等のタブレット端末の表示は、
スマホ用のデザインを基本に見せるようなつくりになります。
(もちろん、タブレットの表示が重要なサイトであれば、それ用に対応したデザインを作成します。)


■まとめ
---------------------------------
上記の内容はあくまで現時点の主流です。
これから新しいデバイスやネットワーク環境ができていく中で変化していくものではあります。

また、ウェブページの目的や利用者層によっても柔軟に対応していく必要があります。
利用者にとって使い勝手のよい見せ方を常に考え工夫していきたいと思います。

本年もどうぞよろしくお願いいたします。

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン