BT

レスポンシブWebサイトデザインのガイドライン

| 作者: Abel Avram フォローする 10 人のフォロワー , 翻訳者 尾崎 義尚 フォローする 0 人のフォロワー 投稿日 2014年6月22日. 推定読書時間: 3 分 |

原文(投稿日:2014/06/12)へのリンク

この記事には、異なる画面サイズとフォームファクターのスケールのWebサイトへのガイドラインが含まれている。

QAのPrinciple TechnologistであるDavid Walker氏はQA TechWeek 2014の中でGoing Responsive with FoundationセッションにおいてレスポンシブWebサイトデザインを作成するときのガイドラインについてプレゼンした。 Walker氏は、既存のデスクトップからモバイルアプリケーション向けのWebサイトを作成するいくつかの方法について言及した: ネイティブアプリ – 各モバイルOSにひとつ、組み込みHTML5 – PhoneGapなどのシミュレーターを使用して、サーバーでフィルタリングする – デスクトップとモバイルデバイス向けの2つをリダイレクトしてWebサイトを分離する。

これらの方法のそれぞれについてのメリットとデメリットの後Walker氏は、レイアウト、フォーマットとコンテンツを持つ完全な単一のWebサイトを構築した後、HTML5とJavaScript、CSSを使って表示するデバイス向けにメモリ上で調整するレスポンシブWebサイトデザイン(RWD)を紹介した。RWDの主な利点は、コンテンツの重複を減らし、将来のものを含めてすべてのデバイスサイズのためのWebサイトを準備できることである。短所は: 優れたCSSとJavaScriptスキルが必要、いくつかのリソースはモバイルネットワークには大きいかもしれない、古いブラウザーにはpolyfillsが必要。

レスポンシブデザインを作成できるようにWalker氏は、以下のいくつかのガイドラインを提案した:

  • フルードレイアウト(fluid layout)で作成する。 すべてのコンテナ幅は、ブラウザーのviewportのパーセントで定義する必要がある。
  • CSS3メディアクエリー(Media Queries)を使用する。 異なるメディアタイプでは異なるスタイルが適用される –画面、印刷、TVなど- そしてメディアパラメータ –width, height, 色, 解像度など
  • フルードイメージ(fluid images)を使用する。画像サイズは、ディスプレイの最大幅よりも大きくならないように調整するべきである。

メディアタイプに必要なスタイルを適用するために、スタイルに必要な表示幅を確立する。たとえばwww.time.comでは、40以上のスタイルがメディアクエリーに関連づけられている。 それらはChrome拡張のResponsive Inspectorで見ることができる。それらすべてのスタイルを使うことによって、time.comのコンテンツはブラウザーレベルで再配置されるため、異なる解像度のデバイスで表示してもページを水平スクロールすることがない。

Walker氏によるとRWDではまた、以下の考慮が必要である:

  • デバイスと接続速度に適した画像
  • モバイルUI/UXに合わせたナビゲーションパターンの変化
  • タッチに適したリンクやボタンのスタイル変更
  • 異なる解像度でうまく表示されるように動的なフォントサイズの変更
  • 画面上の必要なコンテンツの読み込み
  • retinaバージョンの画像を提供

Walker氏はまた、レスポンシブ フロントエンド フレームワークであるFoundationを使ったレスポンシブWebサイトの構築の仕方についてデモした。その他の同様のソリューションには、もともとはTwitter社が開発したBootstrapがある。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT