ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeウェブデザイン基礎講座 > レスポンシブデザインについて知っておくべきこと

レスポンシブデザインについて知っておくべきこと

投稿日:2014年4月11日   ソフトウェア:-

このチュートリアルではレスポンシブデザインについて知っておくべきことについて紹介します。


Step1:はじめに

レスポンシブデザインは特に新しいものではありません。 レスポンシブデザインの歴史は、Ethan Marcotte がA List Apartの記事の中でレスポンシブデザインという言葉を使った2010年に遡りますが、このわずか3年少しの間にウェブデザイナーの仕事を完全に変えてしまったということは疑いも無い事実です。

レスポンシブWebデザインに関する書籍

•Responsive Web Design (Brief Books for People Who Make Websites)
•Responsive Web Design with HTML5 and CSS3
•Implementing Responsive Design: Building sites for an anywhere, everywhere web
•Responsive Design Workflow
•Quick Guide How To Get Your Site Ready For Every Device And Browser
•Responsive Web Design by Example
•Getting The New Baseline In Web Design Right
•Responsive Web Design Overview For Beginners

レスポンシブデザインは最近ではどこにでも存在しますが、それは発展を続けるモバイル機器産業のおかげです。
実際、Pew Internetによると、55%のアメリカ人が2012年中にモバイル機器を使ってインターネットにアクセスしており、そのうち31%がウェブにアクセスする際のメインの手段であると答えています。
レスポンシブデザインについてまだお知りになりたいことがあるなら、この先をお読みください。



Step2:レスポンシブデザインとは何か

まず最初に、ウェブサイトがレスポンシブであるということはどういうことかということを理解する必要があります。
レスポンシブなウェブサイトというのは、サイト訪問者のディスプレイのサイズに合わせて表示を変えることができるサイトのことを言います。
スマートフォンやタブレットの台頭により、デザイナーはフルサイズのデスクトップのモニター上と同様に、小さなスクリーンでもサイトが上手く表示されるような方法を考える必要がありました。
これを実現するため、メディアクエリを使って機器の種類や解像度を検知し、フレキシブルな画像、文字、グリッドを組み合わせることによって、スクリーンサイズに合わせて表示をします。






Step3:レスポンシブデザインはモバイルフレンドリーとは異る

モバイルフレンドリーなサイトは成長を続けるモバイル機器に対するひとつの解決策と見られてきました。
モバイル機器からサイトを訪れたユーザーはそのサイトのモバイル版である全く異なるURLのサイトに転送されます。
つまり2つのサイトを構築してメンテナンスする必要がありました。

レスポンシブデザインでは1つのサイトの構築で済みます。



Step4:フルードグリッドとの親密な関係

レスポンシブな世界が可能なのはフルードグリッドのおかげです。
まず、サイトの最大サイズのレイアウトを定義します。
通常はほとんどのモニターにフィットする1024pxです。
次にページをいくつかのカラムに分けます。
それぞれの要素はピクセルベースのサイズではなく比率サイズでデザインし、機器やスクリーンサイズが変わっても、そのコンテナに決められた縦横の比率で調節されます。

レスポンシブ



Step5:画像や書体もレスポンシブに

画像をレスポンシブサイトに追加するだけでは自動的にレスポンシブにはなりません。
フォントについても同じことが言えます。

画像については、JavaScriptを使ったPicturefillや、JavaScriptとPHP(サーバー側で)を使ったAdaptive Imagesといったスクリプトによるソリューションがもっとも良い結果が得られます。
多くのレスポンシブなWordPressのテーマにはレスポンシブな画像の機能が内蔵されています。

文字については、サイズを指定する際に、pxやemではなくremを使用することによりレスポンシブになります。
最初にそのhtmlのフォントサイズを100%と宣言し(html {font-size: 100%;})、メディアクエリを調整してディスプレイに最適なフォントサイズに変更します。
(@media (max-width: 640px) {body {font-size: 1.2rem} } @media (max-width: 1100px) {body {font-size: 1.5rem} })



Step6:フレームワークでもっと簡単に

レスポンシブデザインの世界にはウェブサイトのレイアウトを構築する際に利用が可能なフレームワークが存在します。
デザイナーがデザインをする上での土台となるという意味で、基本的にはテンプレートに近いものです。
フレームワークによってグリッド、タイポグラフィ、ナビゲーションのレイアウト、ボタンのスタイル、テーブルなどがあらかじめ決まっています。
この利点は人気のあるブラウザでの互換性がテスト済みであるという点です。

フレームワークには完全に全ての機能が揃ったものから、必要最小限のものまで様々なものがあります。
中には、CSSファイルが含まれていて、一からコードを書き直さなくても、CSSファイルを修正するだけでサイトの見た目や雰囲気を変えることができるものもあります。



Step7:Eメールもレスポンシブに

ウェブサイトと同様に、モバイル機器で閲覧されるメールの数も着実に増加しています。
HTMLメールが異なる機器上で同じように表示されるようにするため、多くの人々がメール文書のデザインにレスポンシブデザインやフレームワークを取り入れています。
こういった流れから、Eメールのオプションを取り入れているフレームワークもたくさん存在します。

レスポンシブデザインはまだ初期段階にあり、解決すべき問題もいくつかあります。
水平型のナビゲーション、テーブル、画像などは注意深く計画しないとレスポンシブサイトではおかしな表示になってしまうことがあります。
ますます多くの開発者がこれらの問題の解決に取り組むに従って、より多くの問題の対処方法が明らかになってきています。
それらの問題が完全に無くなるまでは、他のウェブサイト構築と同様に、レスポンシブなウェブサイトは急ごしらえで作るのではなく、しっかりと計画を立てて作成する必要があるということを忘れてはなりません。



引用:Web Design Library   著者:Responsive Design  翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング