はてなブックマーク

今回は、RWDのグローバルナビゲーションのパターンをよくまとめた参考サイトをご紹介させて頂こうと思います。”Adventures in Responsive Navigation”という海外のサイトです。※菊池崇さんが運営されているfacebookページ「レスポンシブWebデザイン」で紹介されていたものです。とても参考になるfacebookページですので、ぜひRWDに興味をお持ちの方は「いいね！」されるとよいと思います。 こちらのサイトでは、8つのナビゲーションパターンを紹介しています。 パターン１．”Do Nothing”アプローチ ブレークポイントまでくるとナビゲーションが真ん中寄せになり、余白が広くなるのみで特別なことは何もしていない簡単なパターンです。メニューの数が少ない場合に使えそうです。 パターン２．フッターナビゲーション グローバルナビが「MENU」というボタン一つになって、

レスポンシブWebデザインのサイトにはシンプルなものが多いのは、皆さまもご存じの通りかと思います。 レスポンシブWebデザインは様々なデバイス向けに広くコンテンツが閲覧できるように作るという前提がありますが、それではなぜ、様々なデバイス向けに対応させようとするとシンプルになるのでしょうか。 【理由1】小さい画面サイズの端末からのアクセスも想定する必要があり、一画面内のコンテンツは本当に必要なものにフォーカスするべきだから。 スマートフォンや一部のゲーム機など、画面サイズの小さな端末からアクセスしたときに、コンテンツが必要以上に多いと見づらいことは言うまでもありません。最近リニューアルを終えたサイトの多くが、今後数年にわたりサイトを使っていくことを想定されたものなので、当然スマートフォン等から見られることも想定して作られています。なので、そのようなサイトをPCで閲覧すると、これまでのようなコ

6月16日、ロンドン交通局が公式ブログで近日中にサイトリニューアルすることを発表し、海外でニュースになっています。今回の記事は、日本国内の企業の方には非常に興味深いものではないかと思い、ご紹介させて頂きます。 この事例で興味深いのは、以下の点でとても思い切ったリニューアルをしたという点です。 １．ユーザー利用頻度が大変高く、規模も大きなサイトである。 ２．既存のPCベースのサイトから、モバイルファーストへ大幅な方針変更をした。 ３．レスポンシブWebデザインを、思い切ったモバイルファーストで構築した。 Image from TFL ロンドン交通局によると、サイトは月間800万ユニークユーザー（ロンドンの住人の75%）を誇り、年間で2.5億の訪問があり、今も伸び続けているそうです。このサイトにはJourney Plannerという機能があり、出発元の施設と行先の施設を入力すると、そこまでの行

2012年6月、Googleがスマホ対応の方法としてレスポンシブWebデザインを推奨すると公式ブログに掲載し、話題になりました。今回はこれまでGoogleが公式ブログでどのようにレスポンシブWebデザインを扱ってきたか、経緯をまとめて紹介したいと思います。 Googleは自社サイトもレスポンシブWebデザインで構築している。 2012年6月12日 Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法 こちらの記事で初めてレスポンシブWebデザインを推奨することを公式に発表しました。Googleはスマートフォンサイト構築の際、以下の3つをサポートしているとまとめています。 レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Goo

巷では「リッチなコンテンツはレスポンシブWebデザインに馴染まない」との声も聞こえますが、ポイントを絞って使えばレスポンシブ対応サイトでも期待以上の効果を発揮することができます。 そこで今回は、動画等の視覚的な演出を効果的に使った、海外のレスポンシブWebデザイン事例を紹介させていただきます。 中にはECサイトや管理ツールなど、国内ではレスポンシブWebデザインが余り浸透していない分野も紹介していますので、ブレイクスルーのきっかけにしてもらえればと思います。 Case1.デザインと機能性を兼ね備えたECサイト SKINNY TIES (米) [ECサイト / ファッション] 直観的な操作で完結する、モバイルファーストな設計 様々なネクタイを「カラー」「デザイン」「幅」から選べるショッピングサイト。 注目すべきは、直観的で分りやすい商品検索や購入方法にあります。 ナビゲーションから直接、カラ

レスポンシブWebデザインにすべきか、専用サイトにすべきか。マルチデバイスの対応方法に頭を悩ませている企業担当者様はとても多いかと思います。結論から言うと、クライアントと制作会社は両者歩み寄り、相談して決めていくのが良いと考えています。クライアントは制作のことを理解し、制作会社はクライアントのことを理解した上で初めて議論ができると感じています。 今回は、マルチデバイス対応が必要な場合に、どのようにして方向決めをしていくのが良いかを書いてみました。 1.制作会社がクライアントのことを理解する。 ヒアリングシート。制作会社側がクライアントのビジネス・サイトを理解するために使うことがあります。 制作会社がWebのプロといえど、クライアントのビジネスゴール、ターゲットユーザーのこと、サイトの位置づけ、運用の現状などはサイトを見ただけで全て理解することはできません。ここを抜きにしてマルチデバイスの対

古いブラウザ対応をどこまでするか、悩ましい問題かと思います。今回はレスポンシブWebデザインにおいて、知っておきたいブラウザ対応、特にIEに関する内容です。難しそうな話ですが、私自身htmlのソースが書けるわけではありませんので、コーディングに詳しくない方にも分かりやすく解説できればと思います。 css3でできることと、IEの現状 モバイルファーストで考えた場合、レスポンシブWebデザインはhtml5/css3でソースを書くのが望ましいとされています。その理由は、従来画像を使わなければ表現できなかった部分をcssのみで表現できるようになり、それによりページ容量を軽くできるためです。スマートフォンを含む最近のブラウザは基本的にcss3に対応しているのですが、IEに関しては対応状況が遅れていて、ここで少し悩ましい問題が発生しています。（IE8はほとんど非対応、IE9は一部対応。詳細はのちほど。

レスポンシブWebデザインは装飾を抑えてシンプルに作るものだ・・・ということで「面白くない」「うちのサイトはデザインで売っているので、まだレスポンシブには早いかな」というようなお話を時々お聞きします。レスポンシブ＝面白くないサイトと思われがちですが、意外に探してみると面白い事例もたくさんあります。装飾は必要最低限にする代わりに、文章、写真・イラスト（と動画）、レイアウトで魅せる工夫をしているサイトが多いようです。 今回は、その工夫事例をいくつかご紹介したいと思います。 ※ただし、あまり複雑なレイアウトは運用や構築時の手間や混乱につながるので十分ご注意ください。 イレギュラーなレイアウトが面白いデザイン マウリッツハイス美術館展―展覧会の紹介 ランダムな配置とキレイなグリッドがカッコイイですね。小さい画面と大きい画面で画像を切り替えていますので少しソースは複雑と思いますが、とても計算されてい

レスポンシブWebデザインは、画面幅に合わせてレイアウトが変化することで、様々な画面サイズにワンソース(一つのhtml)で対応させることができる制作手法です。Media Queryという技術でCSSを切り替えることでレイアウトが変化します。CSSが切り替わる画面幅を『ブレークポイント』と呼びます。 今回はレスポンシブWebデザインのサイト制作時に、特に気になるブレークポイントの設定について、考え方と注意したい点をご紹介したいと思います。 CSSが切り替わりレイアウトが変化するポイントを「ブレークポイント」と呼びます。 ブレークポイントの考え方 ブレークポイントはどの画面幅でも見やすいレイアウトになるように設定するものです。 レスポンシブWebデザインは「どんな画面幅で見ても、適切に表示させるための制作手法」です。どんな画面幅でも見やすいようにデザインし、どんな画面幅でも見やすいレイアウトに

”モバイルファースト”の第一人者、Luke Wroblewskiのブログから記事を翻訳してご紹介します。今回はマルチデバイスに対応するレイアウトパターンについてです。元記事：Multi-Device Layout Patterns, May 14, 2012 フルードグリッドとメディアクエリによって、レスポンシブデザインはウェブページのレイアウトを様々なスクリーンに対応させることを可能にしました。たくさんのデザイナーがこの技術を喜んで使うに従い、たくさんの革新的方法が生み出され、明確なパターンが出現してきました。今回は、マルチデバイスにうまく対応する有名なレイアウトパターンを一覧にしてみました。 レスポンシブデザインの最新レイアウトパターン傾向をつかむために、Media Querieのサイト上で取り上げられているすべての例を何度も綿密にチェックしました。その際、パターンとして最も頻繁に表れ

”モバイルファースト”の第一人者、Luke Wroblewskiのブログから記事を翻訳してご紹介します。文中にたくさん“デバイスエクスペリエンス”という言葉が出てきます。デバイスエクスペリエンスとは、数あるデバイスを画面サイズや機能性・ユーザーの利用方法、といった括りで分類し、それぞれに向けた専用のサイトを提供すること、と理解して頂ければよいかと思います。 元記事：Which One: Responsive Design, Device Experiences, or RESS?, February 29, 2012 As more organizations realize they need to invest heavily in multi-device Web designs, the inevitable question of “how” comes up. Responsi

海外ではレスポンシブWebデザインがいち早く企業や団体のサイトに取り入れられ、すでにたくさんの事例が上がっています。今回はそんな海外の数ある事例の中で、有名企業・団体のレスポンシブWebデザイン事例についてご紹介したいと思います。日本も2012年内のうちに、多くの有名企業がレスポンシブWebデザインによるサイト構築を進めるのではないかと感じています。 NTT DATA NTT DATA海外向けコーポレートサイト。とても美しいレスポンシブWebデザインの事例です。単にデザインだけの美しいだけでなく、350ページ(※注：ツールを使用して確認)を超える全ページを、ストレスなく閲覧できる設計になっています。特に、ニュースコンテンツもうまくレスポンシブ対応されている点や、スマートフォンで利用した場合の導線の引き方がスマートでした。(スマートフォンではシンプルなナビゲーションになっており、扉ページを挟

多種多様なデバイスが登場している現在、すべてのスクリーンにいかにして対応していくかが企業ウェブ担当者の課題となっています。この問題を解決する一つの方法として「レスポンシブウェブデザイン」に注目が集まっています。 レスポンシブウェブデザインとは。 1つのhtmlで多様なスクリーンに対応できる制作手法。「メディアクエリ」と呼ばれる技術を使うことで、ページ幅に合わせてcssを切り替え、見た目を変えることができます。 ↑讀賣テレビ採用サイト　ブラウザの横幅を縮めたり広げたり、お試しください。 ■メリット ・ワンソースでマルチデバイスに対応ができる。 ・画面幅に依存しないので、将来的に現れる端末にも対応できる ・単一のURLになるのでSEO面で強いと言われている ・システムによる出しわけが不要。コーディングだけで完結 ■デメリット ・スマートフォンで見たときにソースを全て読み込むので重い ・フィーチ

先日、知人から「最先端のスマホサイトってどんなサイト？」と意見を求められました。今回はモバイルファーストの観点から、私の考える素晴らしいスマホサイトのあり方について記事にしてみました。今回は個人的な希望も含んでいることをご了承頂けると嬉しいです。また、今後は事例もご紹介していきたいと思います。 私が考える「最先端のスマホサイトのあり方」は、一言で表すと とにかく便利…