Web関連

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

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チェック
スマートフォンサイト制作

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    空腹注意! 飲食業界に関わって学んだこと!

    最近飲食業界のプロジェクトに関わりました。食べることの大好きな私にとっ…

  2. Web関連

    「拝啓」はもう使わない!?変わるギフト市場

    「拝啓 暑気厳しき折柄、皆様にはますますご健勝のこととお喜び申し上げ…

  3. SNS関連

    SNSマーケティングって何すればいいの? - 第1弾! –

    みなさんも1つは持っているSNSアカウント、企業ではどのように運用をす…

  4. Web関連

    WordPress開発者必見!sitemap.xmlを手動で作る時代は終わった!?

    最近WordPress開発の案件を納めて、ほっとしている山谷です。…

  5. Web関連

    皆の「なんぞや?」を解決する、ISMS取得のメリットとは?

    みなさんも一度は聞いたこと、見たことありませんか?「国際規格」という言…

  6. Web関連

    タスク管理ができるようになるための3つのコツ

    タスク管理は仕事を行う上でもっとも重要な部分ですが、みなさんは得意です…

おすすめ記事

最近の記事

  1. DX(デジタルトランスフォーメーション)・デジタルシフトへの…
  2. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  3. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  4. 非接触がこれからの常識。ウィズコロナ・アフターコロナはIoT…
  5. キャッシュレス決済はウィズコロナでのウイルス対策に繋がってい…

アーカイブ

  1. Web関連

    採用希望者数を増加させたい
  2. Web関連

    WordPressを使った簡単なオリジナル(っぽい)フォトブログ制作2
  3. AIさくらさん

    【人工知能(AI)×リクルート】多言語対応の人工知能が就職希望者の不安を払拭
  4. Web関連

    効率的!マーケティングオートメーションって?
  5. SEO関連

    【Web制作関連コラム】ユーザービリティーとSEO対策の関係性
PAGE TOP