お久しぶりです。デザイナーの野田です。
まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。
「必読！5分でわかるレスポンシブWebデザインまとめ」
「必読！5分でわかるレスポンシブWebデザインまとめ Pt.2」
を読んでいただけるとスムーズです。
今回で、【必読！5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。
100％ 5分では分らないので、タイトルはスルーしてやってください。
様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。
この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。
また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で知っててもらいたい事が多すぎて、なかなか制作編に移せませんでした。
ようやく制作編になりますので、是非、皆さんの参考にしてください。
とりあえず制作する（仕様について）
レイアウトについて
まず、今回制作するサイトのレイアウトは、【レスポンシブWebデザイン＋可変グリッドレイアウト】を合わせて制作させていただきます。
レイアウトについては、「必読！5分でわかるレスポンシブWebデザインまとめ」をご覧ください。
ページ全体はCSS3（Media Queries）で制御、異なる画面サイズに応じてページのレイアウト・デザインを調整しつつ、コンテンツ部分のみ、可変グリットでブラウザサイズに合わせて決められたサイズのボックス要素が再配置されるといった仕様にします。
当然、HTML5は今後標準化してくると思うので、レスポンシブWebデザイン同様、新しい技術を使って制作していきます。
対応デバイスの確認
対応デバイスについては、「必読！5分でわかるレスポンシブWebデザインまとめ PT.2」をご覧ください。
今回は、全てのデバイスに対応させていたら大変なので、
・iPhone 4 / 4S (縦：640 x 960 横：960px x 640px)
・iPad (縦：768px x 1024px 横：1024px x 768px)
・PC (横幅：960px)
スタンダードな上記の3デバイスに対応させたいと思います。
現在は、Androidユーザーもかなり増えていますが、割愛させていただきます。
Retinaディスプレイの対応
はい。やりましょう。
大変ですが対応します。
Retinaディスプレイの対応については、こちらも「必読！5分でわかるレスポンシブWebデザインまとめ PT.2」をご覧ください。
CSS3の使用に関して
CSS3については、PCではあまり使用せずに画像で対応、タブレットやスマートフォンのみ使用します。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
