GoogleがレスポンシブWebデザインを勧めてきた経緯（まとめ）
2012年6月、Googleがスマホ対応の方法としてレスポンシブWebデザインを推奨すると公式ブログに掲載し、話題になりました。今回はこれまでGoogleが公式ブログでどのようにレスポンシブWebデザインを扱ってきたか、経緯をまとめて紹介したいと思います。 Googleは自社サイトもレスポンシブWebデザインで構築している。 2012年6月12日 Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法 こちらの記事で初めてレスポンシブWebデザインを推奨することを公式に発表しました。Googleはスマートフォンサイト構築の際、以下の3つをサポートしているとまとめています。 レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Goo
「発想・見せ方が面白い」レスポンシブWebデザイン海外事例
巷では「リッチなコンテンツはレスポンシブWebデザインに馴染まない」との声も聞こえますが、ポイントを絞って使えばレスポンシブ対応サイトでも期待以上の効果を発揮することができます。 そこで今回は、動画等の視覚的な演出を効果的に使った、海外のレスポンシブWebデザイン事例を紹介させていただきます。 中にはECサイトや管理ツールなど、国内ではレスポンシブWebデザインが余り浸透していない分野も紹介していますので、ブレイクスルーのきっかけにしてもらえればと思います。 Case1.デザインと機能性を兼ね備えたECサイト SKINNY TIES (米) [ECサイト / ファッション] 直観的な操作で完結する、モバイルファーストな設計 様々なネクタイを「カラー」「デザイン」「幅」から選べるショッピングサイト。 注目すべきは、直観的で分りやすい商品検索や購入方法にあります。 ナビゲーションから直接、カラ
モバイルファーストとレスポンシブWebデザインの関係 | MobileFirst.jp [企業スマートフォン戦略の実践情報サイト]
2012年、日本では大手企業や先進的な企業でのレスポンシブWebデザインの導入が進みました。海外では「今年2013年はレスポンシブWebデザインの年だ」というようなことが言われていますが、日本でも2013年はレスポンシブWebデザインが盛り上がりを見せそうだなと感じます。これから導入を検討される方のために、知っておきたいモバイルファーストとレスポンシブの関係性をまとめてみました。 モバイルファーストの背景：スマートフォンの普及 スマートフォンの普及が進んでいます。昨年2012年3月末時点ではスマートフォンの契約数は2820万契約でした。2013年3月では6508万契約数となるそうです。契約数では良くわかりませんが、割合でいうと昨年が22.5%と言われていたので、この契約数なら単純計算すると今年は50%前後になります。 スマートフォンはパソコンとは異なって、いつでもユーザーの手元にあってウェ
![モバイルファーストとレスポンシブWebデザインの関係 | MobileFirst.jp [企業スマートフォン戦略の実践情報サイト]](https://cdn-ak-scissors.b.st-hatena.com/image/square/dbe54923c45de61450a588b59bf5d28e926fe6c0/height=288;version=1;width=512/http%3A%2F%2Fwww.mobile-first.jp%2Fwp-content%2Fuploads%2F2013%2F01%2Fsmartphone1.png)
レスポンシブWebデザインとIE対応
古いブラウザ対応をどこまでするか、悩ましい問題かと思います。今回はレスポンシブWebデザインにおいて、知っておきたいブラウザ対応、特にIEに関する内容です。難しそうな話ですが、私自身htmlのソースが書けるわけではありませんので、コーディングに詳しくない方にも分かりやすく解説できればと思います。 css3でできることと、IEの現状 モバイルファーストで考えた場合、レスポンシブWebデザインはhtml5/css3でソースを書くのが望ましいとされています。その理由は、従来画像を使わなければ表現できなかった部分をcssのみで表現できるようになり、それによりページ容量を軽くできるためです。スマートフォンを含む最近のブラウザは基本的にcss3に対応しているのですが、IEに関しては対応状況が遅れていて、ここで少し悩ましい問題が発生しています。（IE8はほとんど非対応、IE9は一部対応。詳細はのちほど。
シンプルなだけじゃつまらない？！ レスポンシブWebデザインのページデザイン工夫事例
レスポンシブWebデザインは装飾を抑えてシンプルに作るものだ・・・ということで「面白くない」「うちのサイトはデザインで売っているので、まだレスポンシブには早いかな」というようなお話を時々お聞きします。レスポンシブ＝面白くないサイトと思われがちですが、意外に探してみると面白い事例もたくさんあります。装飾は必要最低限にする代わりに、文章、写真・イラスト（と動画）、レイアウトで魅せる工夫をしているサイトが多いようです。 今回は、その工夫事例をいくつかご紹介したいと思います。 ※ただし、あまり複雑なレイアウトは運用や構築時の手間や混乱につながるので十分ご注意ください。 イレギュラーなレイアウトが面白いデザイン マウリッツハイス美術館展―展覧会の紹介 ランダムな配置とキレイなグリッドがカッコイイですね。小さい画面と大きい画面で画像を切り替えていますので少しソースは複雑と思いますが、とても計算されてい
レスポンシブWebデザイン、ブレークポイントの考え方とピクセル密度の問題
レスポンシブWebデザインは、画面幅に合わせてレイアウトが変化することで、様々な画面サイズにワンソース(一つのhtml)で対応させることができる制作手法です。Media Queryという技術でCSSを切り替えることでレイアウトが変化します。CSSが切り替わる画面幅を『ブレークポイント』と呼びます。 今回はレスポンシブWebデザインのサイト制作時に、特に気になるブレークポイントの設定について、考え方と注意したい点をご紹介したいと思います。 CSSが切り替わりレイアウトが変化するポイントを「ブレークポイント」と呼びます。 ブレークポイントの考え方 ブレークポイントはどの画面幅でも見やすいレイアウトになるように設定するものです。 レスポンシブWebデザインは「どんな画面幅で見ても、適切に表示させるための制作手法」です。どんな画面幅でも見やすいようにデザインし、どんな画面幅でも見やすいレイアウトに
有名企業・団体のレスポンシブWebデザイン事例－Microsoft、NTT DATAなど。
海外ではレスポンシブWebデザインがいち早く企業や団体のサイトに取り入れられ、すでにたくさんの事例が上がっています。今回はそんな海外の数ある事例の中で、有名企業・団体のレスポンシブWebデザイン事例についてご紹介したいと思います。日本も2012年内のうちに、多くの有名企業がレスポンシブWebデザインによるサイト構築を進めるのではないかと感じています。 NTT DATA NTT DATA海外向けコーポレートサイト。とても美しいレスポンシブWebデザインの事例です。単にデザインだけの美しいだけでなく、350ページ(※注：ツールを使用して確認)を超える全ページを、ストレスなく閲覧できる設計になっています。特に、ニュースコンテンツもうまくレスポンシブ対応されている点や、スマートフォンで利用した場合の導線の引き方がスマートでした。(スマートフォンではシンプルなナビゲーションになっており、扉ページを挟
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
