レスポンシブWebデザインの作り方│Web制作会社のレスポンシブWebデザイン関連コラム

Columnコラム

Web制作

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

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

2016/06/30
このエントリーをはてなブックマークに追加

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

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

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

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

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

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

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

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

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

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

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

PCのブレイクポイント

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

fujiwara_breakpoint02.jpg

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

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

まとめ

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

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

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

関連するサービス

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

text_totop