TumblrレスポンシブWebデザインのポイントの一つにブレークポイント(レイアウト切り替えのポイント)があります。この数値をいくつにするかは、これといった解がないのでレスポンシブWebデザインのサイトでどのようにしてるのか調査してみました。不定期のごく一部の方しか興味ないであろうエントリー。レスポンシブWebデザインのポイントの一つにブレークポイント(レイアウト切り替えのポイント)があります。この数値をいくつにするかは、これといった解がないのでレスポンシブWebデザインのサイトでどのようにしてるのか調査してみました。不定期のごく一部の方しか興味ないであろうエントリー。レスポンシブWebデザインのサイトがいくつあるのか分かりませんが、100サイトは決して多い数ではないと思います。今回の結果だけで安易に判断はできないのですが、それでも大まかな流れが見えてきます。Docsに公開しました。Docs元のエクセルファイルはこちらです。breakpoints.xlsx.zip共通するブレークポイント共通のブレークポイントに順位付けすると下記の様になります。14iPhone、iPadを基準にした数値が目立ちます。代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、ごく一部のコンテンツのみ調整するといった使い方をしています。下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。全体の統計としてブレークーポイントに480pxや782pxがよく使われてますが、そこにこだわる必要はないと思います。他のスマートフォンやタブレットはこれに当てはまらないものもあります。「このウインドウサイズではこのように見せたい」と言う考え方が自然な気がします。下記の記事はブレークポイントの提案をしています。デバイスの境目を基準としてる訳ではありません。Planningこの考えでいくと、スマートフォン、タブレットであっても機種によって異なるレイアウトが表示されます。それでもそのウインドウサイズで見せたいと思ってるデザインなので問題はありません。コンテンツ中心で設計してもいいと思います。400px)最近ではem指定も見られるようになってきてます。25em)下記のサイトはem指定です。Mechanismsテキスト量に最適なレイアウトを提供する考え方です。emベースのメリットは文字サイズを拡大した時にそれに応じてレイアウトも変更されます。デバイスによって回線速度や使われる環境が異なってきます。あまりにモバイルに特化したコンテンツを提供したいケースであるならば、それはモバイル用の専用サイトを作る選択が最適となります。レスポンシブWebデザインの設計以前に、どのような構成にするか、まずはそこが重要だと思います。毎度思いますがレスポンシブWebデザインの設計は簡単ではありません。コンテンツを主において、デザイン・レイアウトには若干の緩さを許容できるのであれば、それも大分解消されて制作側も気が楽になるのではないでしょうか。Spiceさんのエントリです。イントはスマホ用スタイルの480px、タブレット用の768pxとの事です。Spiceサービス作りましたAbout自分で得た情報、学んだことのアウトプットのために始めたblogです。して情報を共有することで少しでもWEB業界に貢献できたらなと思ってます。このblogが誰かの役に立てたら幸いです。内容で間違いなどありましたら指摘頂けると助かります。AuthortooltipHiro東京在住のフリーランスwebデザイナー。TSUKURIBEと言う屋号で活動してます。お問い合せは右のフォームまたはTSUKURIBEのサイトよりお願いします。Formフォームまたはこちらよりお問い合わせください。