fc2ブログ

Home > デザイン > レスポンシブデザインとブレークポイントからこれからのウェブを考える

レスポンシブデザインとブレークポイントからこれからのウェブを考える



googleからNexus7が格安で販売されていたり、microsoftからsurfaceが日本でも発売になったり、
ますますタブレットでのウェブビューイングが広まっていくのは必至でしょう。
そんななか、検索エンジンでもあるgoogleが推奨しているのはレスポンシブ表示。
今回は、そんなレスポンシブなサイトを作る際のブレークポイントをキーにして
実際どんなものが作られているかを交えて考えていきたいとおもいます。

ブレークポイントについて

ざっくり言うと、どのサイズでどの表示をするかというのをピクセル幅で切り替えていくポイントのことです。
320, 480, 600, 768, 1024 あたりで区切ります。
googleのドキュメントにもあるように

@media only screen and (max-width: 640px) {...}

のようなカタチでCSSを切り分けていきます。

1024と320のみのPCビューとスマホ系で表示できるだけのものでも
320, 480, 600, 768, 1024 のすべてを表示切り替えしているものでも
すべて「レスポンシブ」と呼ばれているようです。
様々なビューに対応する際には、wordpressの無料テンプレートを利用する場合などに注意が必要です。
確認は、Demoページでブラウザサイズを拡大したり縮小したりすればすぐにわかります。

MPMU.orgのブログを例に、レスポンシブ表示での可能性を考えていきます

今回は例として、とってもステキにレスポンシブ化していると思うMPMU.orgを例にして、どんなふう表示を変えていっているかを見ていきます。
※ブレークポイントの数値については、firefoxで計算させたので少しズレがあるかもしれません。

1280<1660以上

カテゴリーや、広告や、すべてのデータが展開されている状態となっています。
27インチ等、大きめのPCでの表示を意識しているのだとおもいます。
エリア全体が中央揃えになっていて、右と左のマージンが広くなっていきます。

1200<1280

ブラウザの端と、サイドバーとの空間数ピクセルを残して、
中央のコンテンツエリアがrelativeに拡大・縮小していきます。

968<1200

右側のカテゴリーが表示されなくなりました。

750<957

左側のナビゲーションが表示されなくなり、ナビゲーションはボタンによって吸収されました。
画像は、ナビゲーションを展開したときの表示です。
facebookのアプリなどでよく使われるUIになっています。

380<697

右側にあった日付デザインが、記事タイトルの下へ吸収されました。

380以下

記事エリアが横幅に合わせて変更されていくようになっています。
記事のみのシンプルな表示と、ナビゲーションのみ。内容的には697pxからは、変化はありません。

今までの技術の複合体

画面が小さくなればなるほど、ミニマムなデザインクオリティと、デバイスに対応したリンクナビゲーションが必要になり、画面のサイズによってコンテンツエリアが遷移していくのは、ちょっと前に流行ったリキッドデザインの応用で、サイズが大きくなれば、PCサイドビュー用の最近のスタンダードな技術+どうやって見せていくかのギミックが大事になっていきます。
これらは、すべて新しい技術ではなく、今までの技術を複合させて応用したものだと考え、アタマを柔らかくして展開していくことが必要ではないかと思っています。

表示領域が狭くなるほど、大事なものが見えるようにする

表示領域が狭くなればなるほど、情報量が減ります。
例えば、ブログなら新着記事、店舗サイトなら店舗の情報やアクセス方法、ネットショップならカテゴリーや買い物カゴや、おすすめの商品がすぐに見えるようにすることが必要です。
チーム等、複数の担当者でウェブ制作する際にも、「一番伝えたいものは何なのか」ということを明確にし、共有していくことが今後ますます必要になってくるのではないでしょうか。

関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/83-ecc5e52f
Listed below are links to weblogs that reference
レスポンシブデザインとブレークポイントからこれからのウェブを考える from バニデザノート

Home > デザイン > レスポンシブデザインとブレークポイントからこれからのウェブを考える

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items