レスポンシブWebデザイン、ブレークポイントの考え方とピクセル密度の問題
レスポンシブWebデザインは、画面幅に合わせてレイアウトが変化することで、様々な画面サイズにワンソース(一つのhtml)で対応させることができる制作手法です。Media Queryという技術でCSSを切り替えることでレイアウトが変化します。CSSが切り替わる画面幅を『ブレークポイント』と呼びます。 今回はレスポンシブWebデザインのサイト制作時に、特に気になるブレークポイントの設定について、考え方と注意したい点をご紹介したいと思います。 CSSが切り替わりレイアウトが変化するポイントを「ブレークポイント」と呼びます。 ブレークポイントの考え方 ブレークポイントはどの画面幅でも見やすいレイアウトになるように設定するものです。 レスポンシブWebデザインは「どんな画面幅で見ても、適切に表示させるための制作手法」です。どんな画面幅でも見やすいようにデザインし、どんな画面幅でも見やすいレイアウトに
有名企業・団体のレスポンシブWebデザイン事例－Microsoft、NTT DATAなど。
海外ではレスポンシブWebデザインがいち早く企業や団体のサイトに取り入れられ、すでにたくさんの事例が上がっています。今回はそんな海外の数ある事例の中で、有名企業・団体のレスポンシブWebデザイン事例についてご紹介したいと思います。日本も2012年内のうちに、多くの有名企業がレスポンシブWebデザインによるサイト構築を進めるのではないかと感じています。 NTT DATA NTT DATA海外向けコーポレートサイト。とても美しいレスポンシブWebデザインの事例です。単にデザインだけの美しいだけでなく、350ページ(※注：ツールを使用して確認)を超える全ページを、ストレスなく閲覧できる設計になっています。特に、ニュースコンテンツもうまくレスポンシブ対応されている点や、スマートフォンで利用した場合の導線の引き方がスマートでした。(スマートフォンではシンプルなナビゲーションになっており、扉ページを挟
シンプルなだけじゃつまらない？！ レスポンシブWebデザインのページデザイン工夫事例
レスポンシブWebデザインは装飾を抑えてシンプルに作るものだ・・・ということで「面白くない」「うちのサイトはデザインで売っているので、まだレスポンシブには早いかな」というようなお話を時々お聞きします。レスポンシブ＝面白くないサイトと思われがちですが、意外に探してみると面白い事例もたくさんあります。装飾は必要最低限にする代わりに、文章、写真・イラスト（と動画）、レイアウトで魅せる工夫をしているサイトが多いようです。 今回は、その工夫事例をいくつかご紹介したいと思います。 ※ただし、あまり複雑なレイアウトは運用や構築時の手間や混乱につながるので十分ご注意ください。 イレギュラーなレイアウトが面白いデザイン マウリッツハイス美術館展―展覧会の紹介 ランダムな配置とキレイなグリッドがカッコイイですね。小さい画面と大きい画面で画像を切り替えていますので少しソースは複雑と思いますが、とても計算されてい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
