beta_logo.jpg

【公式】アピールスタッフによる開発ログ

レスポンシブデザインのブレイクポイントを考えてみる（２）

前回「レスポンシブデザインのブレイクポイントを考えてみる（１）」に引き続きブレイクポイントについて考えてみます。


結論どうしていくのか。


まず、モバイル端末向けのデザインに関しては

前回の記事では600px以下としましたが、どのような持ち方、操作方法なのかを考慮して、iPhone 6 Plus等とファブレットをモバイル端末向けのデザインで表示する事が適切かな？と考え、768px以下に設定します。

その場合のメディアクエリは

@media screen and (max-width:768px){
}

とします。


そして一番の問題となるタブレットです。
現状、タブレットの縦持ちだと800pxが最大サイズで、横持ちだと960pxが最小サイズ、1280pxが最大サイズという感じです。

最大サイズの1280pxになるタブレットの横持ちはデスクトップ向けのデザインで良い気もしますね。
なので、タブレットのブレイクポイントは769px〜960pxで設定するのが適切かな？と考えます。

こういった事を踏まえてデザインする時、僕個人的にはデスクトップの基本サイズを960pxにしてデザインする事が多く、でも、960pxだとタブレットにも影響してきます。そしてタブレットへのデザインは左右に少しでもマージンがあるのが好ましい（個人的）ので、

結果、タブレットのメディアクエリを

@media screen and (min-width:769px) and (max-width:992px){
}

とします。
992pxとはデザインの幅を960pxとして左右に16pxのマージンを適用したサイズということです。

もう必然的にデスクトップ向けのメディアクエリは決まってきます。

@media screen and (min-width:993px){
}

ですね。


今のところのメディアクエリは

@media screen and (max-width:768px){
  /* ここにモバイル端末向けのスタイルを記述 */
}
@media screen and (min-width:769px) and (max-width:992px){
  /* ここにタブレット端末向けのスタイルを記述 */
}
@media screen and (min-width:993px){
  /* ここにデスクトップ向けのスタイルを記述 */
}

になります。


これでも、まだ完成形とは言えないですよね・・・
次回は端末の向きを踏まえたブレイクポイントを考えてみたいと思います。

レスポンシブデザインのブレイクポイントを考えてみる（１）

まずは、レスポンスデザインとは何なのか。

レスポンシブデザインとは、一つのHTMLソースで、モバイルからタブレット、デスクトップまで画面構成を崩すことなく表示させるデザインのことです。
閲覧端末ごとの制作が必要なくなり、管理もしやすいので、ここ数年でかなり普及しましたね。
Google先生も提唱してますし♫

詳しくはここを参考に。


では、ブレイクポイントとは何なのか。

レスポンシブデザインにおいては、閲覧端末ごとに画面のデザインを変更するためにCSSを切り替えます。
その切り替え地点、「何px以上（もしくは何px以下）なら、このCSSを適用する」という基準になるところをブレイクポイントと言います。

そこで登場するのが、CSS3より追加された画面環境により適用するスタイルを切り替える機能「メディアクエリ」です。

例として、画面の横幅が600px以下の閲覧端末に摘要させるメディアクエリの書き方。

@media screen and (max-width:600px){
}


では、実際にどうするのか。
近年出回っている、モバイルやタブレット、デスクトップの画面サイズの統計（ここで調べてます。）からすると、

600px以下はモバイル端末向け。
601pxから960pxをタブレット端末向け。
それ以上をデスクトップ向け。

こんな印象を受けます。
この場合のメディアクエリは

@media screen and (max-width:600px){
  /* ここにモバイル端末向けのスタイルを記述 */
}
@media screen and (min-width:601px) and (max-width:960px){
  /* ここにタブレット端末向けのスタイルを記述 */
}
@media screen and (min-width:961px){
  /* ここにデスクトップ向けのスタイルを記述 */
}


ただ、これだけだと下記の例には対応出来ません。

・iPhone 6 PlusやiPhone 6S Plusの横向きは？
・iPad ProやNexus 10などの大型タブレットの横向きは？
・Xperia Z Ultraのようなファブレット（モバイルとタブレットの中間）は？

など、きりがない・・・
画面サイズで区切った表示方法なので、それはそれで良いのでは？とも思うんだけど、
やはり、

モバイル的な操作方法、タブレットやファブレット的な操作方法・・・
手に持っている？もしくは机に置きながら？

などで、変わってきますよね・・・


う〜ん。困った。

Uppeal（アピール）の正式リリースに向けて（１）

2010年、弊社開発のCMS（コンテンツ・マネジメント・システム）「Glue::CMS」を使用したブログサービス「Uppeal（アピール）」を開設しました。

立ち上げ当初と比べ、ブログを閲覧する環境、求められる機能やデザインなども多様化してきたため、時代と平行したブログサービスとして運用するため、下記のロードマップに基づき、当ブログサービスを根本から刷新していきます。

  1. ブログデザインのレスポンシブデザイン化。
    ブログを閲覧する様々なデバイスにて統一したデザインを提供するため、レスポンシブデザインに対応したデザインに変更します。
  2. 記事毎に設定する情報の追加。
    アイキャッチ画像や定型文など、記事毎に設定出来るようにします。
  3. ブログ毎に設定する情報の追加。
    詳細なプロフィール、アバターなどを設定出来るようにします。
  4. 2、3に関する情報を設定するための管理画面の変更。
  5. ブログのデザインに2、3に関する情報を表示するためにテンプレートを変更。
  6. 管理画面の刷新。