マルチデバイスのサイト運用負荷をレスポンシブWebデザインで軽減する
今回はコンテンツをレスポンシブWebデザインで運用することで、運用負荷を軽くするアイディアをご紹介したいと思います。 レスポンシブWebデザインはフォーマット化すれば怖くない すでにご存じの方も多いかと思いますが、レスポンシブWebデザインはワンソースでマルチデバイスに対応できるというのが大きなメリットです。デバイス別でコンテンツを作らなくてよいので、運用負荷が軽くなります。しかし一方で、“なんだか難しそう”“デザイン表現に限界があるんでしょ？”ということで避けられるケースがあるのも事実かと思います。 それをクリアするために、最近では必要なレイアウト分をパターン化して運用フォーマット（テンプレート）を構築するケースが増えてきています。フォーマット化するので、運用も簡単で負荷は軽くなります。ポイントはデザインクオリティと運用の柔軟性を保つことです。以下に事例をご紹介します。 事例：日々作成が
レスポンシブWebデザインのグローバルナビゲーションパターン（参考サイトのご紹介）
今回は、RWDのグローバルナビゲーションのパターンをよくまとめた参考サイトをご紹介させて頂こうと思います。”Adventures in Responsive Navigation”という海外のサイトです。※菊池崇さんが運営されているfacebookページ「レスポンシブWebデザイン」で紹介されていたものです。とても参考になるfacebookページですので、ぜひRWDに興味をお持ちの方は「いいね！」されるとよいと思います。 こちらのサイトでは、8つのナビゲーションパターンを紹介しています。 パターン１．”Do Nothing”アプローチ ブレークポイントまでくるとナビゲーションが真ん中寄せになり、余白が広くなるのみで特別なことは何もしていない簡単なパターンです。メニューの数が少ない場合に使えそうです。 パターン２．フッターナビゲーション グローバルナビが「MENU」というボタン一つになって、
レスポンシブWebデザインがシンプルであるべき理由
レスポンシブWebデザインのサイトにはシンプルなものが多いのは、皆さまもご存じの通りかと思います。 レスポンシブWebデザインは様々なデバイス向けに広くコンテンツが閲覧できるように作るという前提がありますが、それではなぜ、様々なデバイス向けに対応させようとするとシンプルになるのでしょうか。 【理由1】小さい画面サイズの端末からのアクセスも想定する必要があり、一画面内のコンテンツは本当に必要なものにフォーカスするべきだから。 スマートフォンや一部のゲーム機など、画面サイズの小さな端末からアクセスしたときに、コンテンツが必要以上に多いと見づらいことは言うまでもありません。最近リニューアルを終えたサイトの多くが、今後数年にわたりサイトを使っていくことを想定されたものなので、当然スマートフォン等から見られることも想定して作られています。なので、そのようなサイトをPCで閲覧すると、これまでのようなコ
レスポンシブWebデザインとIE対応
古いブラウザ対応をどこまでするか、悩ましい問題かと思います。今回はレスポンシブWebデザインにおいて、知っておきたいブラウザ対応、特にIEに関する内容です。難しそうな話ですが、私自身htmlのソースが書けるわけではありませんので、コーディングに詳しくない方にも分かりやすく解説できればと思います。 css3でできることと、IEの現状 モバイルファーストで考えた場合、レスポンシブWebデザインはhtml5/css3でソースを書くのが望ましいとされています。その理由は、従来画像を使わなければ表現できなかった部分をcssのみで表現できるようになり、それによりページ容量を軽くできるためです。スマートフォンを含む最近のブラウザは基本的にcss3に対応しているのですが、IEに関しては対応状況が遅れていて、ここで少し悩ましい問題が発生しています。（IE8はほとんど非対応、IE9は一部対応。詳細はのちほど。
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デザイン、ブレークポイントの考え方とピクセル密度の問題
レスポンシブWebデザインは、画面幅に合わせてレイアウトが変化することで、様々な画面サイズにワンソース(一つのhtml)で対応させることができる制作手法です。Media Queryという技術でCSSを切り替えることでレイアウトが変化します。CSSが切り替わる画面幅を『ブレークポイント』と呼びます。 今回はレスポンシブWebデザインのサイト制作時に、特に気になるブレークポイントの設定について、考え方と注意したい点をご紹介したいと思います。 CSSが切り替わりレイアウトが変化するポイントを「ブレークポイント」と呼びます。 ブレークポイントの考え方 ブレークポイントはどの画面幅でも見やすいレイアウトになるように設定するものです。 レスポンシブWebデザインは「どんな画面幅で見ても、適切に表示させるための制作手法」です。どんな画面幅でも見やすいようにデザインし、どんな画面幅でも見やすいレイアウトに
マルチデバイスレイアウトパターン―Luke Wroblewski記事翻訳
”モバイルファースト”の第一人者、Luke Wroblewskiのブログから記事を翻訳してご紹介します。今回はマルチデバイスに対応するレイアウトパターンについてです。元記事：Multi-Device Layout Patterns, May 14, 2012 フルードグリッドとメディアクエリによって、レスポンシブデザインはウェブページのレイアウトを様々なスクリーンに対応させることを可能にしました。たくさんのデザイナーがこの技術を喜んで使うに従い、たくさんの革新的方法が生み出され、明確なパターンが出現してきました。今回は、マルチデバイスにうまく対応する有名なレイアウトパターンを一覧にしてみました。 レスポンシブデザインの最新レイアウトパターン傾向をつかむために、Media Querieのサイト上で取り上げられているすべての例を何度も綿密にチェックしました。その際、パターンとして最も頻繁に表れ
有名企業・団体のレスポンシブWebデザイン事例－Microsoft、NTT DATAなど。
海外ではレスポンシブWebデザインがいち早く企業や団体のサイトに取り入れられ、すでにたくさんの事例が上がっています。今回はそんな海外の数ある事例の中で、有名企業・団体のレスポンシブWebデザイン事例についてご紹介したいと思います。日本も2012年内のうちに、多くの有名企業がレスポンシブWebデザインによるサイト構築を進めるのではないかと感じています。 NTT DATA NTT DATA海外向けコーポレートサイト。とても美しいレスポンシブWebデザインの事例です。単にデザインだけの美しいだけでなく、350ページ(※注：ツールを使用して確認)を超える全ページを、ストレスなく閲覧できる設計になっています。特に、ニュースコンテンツもうまくレスポンシブ対応されている点や、スマートフォンで利用した場合の導線の引き方がスマートでした。(スマートフォンではシンプルなナビゲーションになっており、扉ページを挟
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイルファーストを考える：ガラケーとスマートフォンのアプローチの違い