Web関連

【ホームページ制作】レスポンシブWebデザインのブレイクポイントってどこですか?

0

iPad Proの登場やiPad Airの画面分割機能が出てきたりと、マルチデバイスが当たり前になり、それに伴いレスポンシブWebデザインも今では主流になってきました。
そこで今回は、レスポンシブWebデザインを作るのであれば、必要不可欠な「ブレイクポイント」の選び方についてご紹介したいと思います。

レスポンシブWebデザインとブレイクポイントの必要性

レスポンシブWebデザインでサイトを構築する場合は、PC・タブレット・スマートフォンのデバイスは最低限対応することが理想です。
よく、PCとスマートフォンのみでブレイクポイントを1箇所に絞り切り替えを行っているサイトがあります。
これでは、せっかくのレスポンシブWebデザインが台無しです。

ワンソース管理ができ、Googleの推奨を満たしている部分では良いかもしれないですが、様々な種類の機器や画面サイズには対応されていないといっていいでしょう。
今までは、タブレットはPCサイトを表示させておいても問題ありませんでしたが、今後さらに増えていくであろうマルチデバイスに対応するためには、最低でも2箇所はブレイクポイントが必要です。

ブレイクポイントの決め方

基本的に、ブレイクポイントを決める際は、端末の画面幅と画面解像度のシェア率を参考にします。
無駄に、何個もブレイクポイントを設定しては、見栄え的には良いと思いますが作業的にはかなり時間がかかってしまいます。最低限必要な、画面幅と解像度を参考にすると良いでしょう。

それでは、それぞれ主流となっている、サイズを見ていきましょう。

スマートフォンのブレイクポイント

スマートフォンは、320px~479px。
ここで気をつけておきたいのは、タブレット用のブレイクポイントがない場合、スマホを横にした時の画面サイズです。
うっかり忘れて、検証時にページ崩れが発覚なんてことは無いようにしたいですね。

タブレットのブレイクポイント

タブレットは、768px〜1023px。
iPadやiPad miniなど端末の物理的な大きさは違いますが、ブラウザでは1~2倍で表示されるので
上記のサイズが理想です。スマートフォンの横も同じくらいと考えて良いです。

PCのブレイクポイント

PCは、1024px~。
タブレットの場合、基本的に1024pxまでなのでPC画面が表示されることは少ないはずです。

ブレイクポイントの場所に正解はない

現状ブレイクポイントの場所に「これだ!」という場所はありません。
デザインやレイアウトに寄って、画面の見えやすさも大きく変わってくるからです。
上記で記載したピクセル数は正解でも間違っているわけでもありません。
あくまで、一般的に使用されているピクセル数にすぎないのです。
このデザイン・構成が様々な画面で見た時にどのように映るのか、それを踏まえてブレイクポイントの場所を決める必要があります。

まとめ

今後も技術は進化していきます。
そのため、私たち制作者もその進化にあわせてユーザーに見やすいように設計・制作を行わなければなりません。
今後さらに増えていくマルチデバイス化を考えた時、デザイナーやコーダーという専門分野だけでなく、UI/UX設計からデザイン、コーディング、システムまで全てを考えて制作を行わなければなりませんね。

Web制作でお困りの方はWeb制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

レスポンシブWebデザイン
ホームページ制作
W3Cチェック
スマートフォンサイト制作

0

ECサイトの売上を向上させたい 第3回目前のページ

拡張現実=ARの今を追ってみた!!次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. AIに求められているものは、実は意外な物だった
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    赤ペン先生は消滅する!?学習システムはeラーニングが主流!

    昨年急成長した「eラーニング」の市場規模、皆さんはどの程度把握していま…

  2. Web関連

    病院サイトってどこか似ていませんか?

    こんにちは!IAの鑓水です。暖かくなったとはいえ、夜は寒いですよね。…

  3. Web関連

    富士山から習うサイトのモバイル対応の必要性

    電車での移動時間、お昼の休憩時間、ちょっとしたスキマ時間に使用するスマ…

  4. Web関連

    WEB担当者必見!プライベートDMPとオープンDMPの違い

    企業のWEB担当者の方なら最近「DMP」という言葉を聞くようになったの…

  5. Web関連

    古くなったWebデザインを刷新したい

    サイトのデザインの印象で企業イメージが決まるイメージ戦略に合ったW…

  6. Web関連

    One to Oneマーケティングへの道(1)~DMPとは?~

    今回のテーマは、 「One to Oneマーケティング」。今後も継続的…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    顧客満足度の高いホームページを作るためにやるべきこと
  2. Web関連

    web制作会社が紹介するW3Cチェック(validator)の使い方
  3. AI関連

    AIと共に切り開く!ジェンダーレス社会でのAIの新たな可能性について考えてみた
  4. Web関連

    休憩時間に癒やしを!可愛い動物たちのサイトまとめてみた
  5. AI関連

    AIチャットボットって一体どこがAIなの?
PAGE TOP