Dreamweaver CCで作るレスポンシブWebデザイン

制作前の事前設計と各端末向けのデザインの確認

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
実際にレスポンシブWebデザインを制作するにあたり、やみくもに制作を始めるのではなく、どの解像度に対応させるか、いくつブレイクポイントを設けるか、おおよそどういったレイアウトにするか、など、事前に計画を練っておく必要があります。このレッスンでは、そういったプランニングについて解説致します。
講師:
07:18

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくに当たってのサイトの構成やデザインの事前設計について解説していきます。まずはダウンロードしてきたファイルの中にある「 planning 」というフォルダーの中の「デザイン」というフォルダーの中にPC 用のデザインタブレット用のデザインそしてスマートフォン用のデザインこちら3つのデザインの画像を入れていますのでこちらを開いておいてください。そしてこれがそのファイルを開いた状態です。このファイルを利用しながら今回のレッスンを進めていきたいと思います。それでは早速レッスンを始めていきましょう。さてレスポンシブ Web デザインを制作するにあたってはあらかじめサイトを制作する前にそのサイトの構築やデザインについてよく検討しておく必要があります。もしそういった検討をせずにやみくもにサイトの方を制作していってもレスポンシブ Web デザインを使ってサイトを効率良く制作していくはずだったのが逆に複雑になったり意図したレイアウトを実現できずにサイトをもう一度設計し直す必要が出てきたりするなど、あまりいい結果にならずに二度手間三度手間になってしまう可能性があります。 それを防いで効率良く制作していくためにもこのレスポンシブ Web デザインに対しての事前の設計はしっかりとやっておいた方が良いでしょう。さてその事前設定を始めるにあたってまず一番初めに考えないといけないこと、それはどういった端末に対応させるかということです。今開いて頂いているこちらのデザインの画像これは今回のコースで作っていく架空のサイトのデザインとなりますが、このデザインは3つ用意しています。それは PC 用のデザインそしてタブレット用のデザインそしてスマートフォン用のデザインこちらの3つですね。今表示しているのが PC 用のデザインです。そしてこちらはタブレット用のデザインです。そして最後にこちらはスマートフォン用のデザインとなっています。おおよそこの3つのタイプの端末に向けてそれぞれに最適化させたデザインで表示させるというニーズが最も多いかと思いますが中にはタブレット部分を飛ばしてPC 用のデザインとスマートフォン用のデザインこの2つのデザインでサイトを制作するという時もあります。そしてどの端末に対応させるかが決定すれば次に考えないといけないのはブレークポイントというものです。ブレークポイントとはそれぞれの端末に最適化されたそのレイアウトデザインを切り替えていく基準点となり、その基準点はその端末の表示領域の横幅となります。 例えば対応させる端末をPC と iPad と iPhoneこの3つの端末にすると仮定します。するとそのレイアウトを切り替えるためのポイントは2つあります。1つは PC と iPad のデザインを切り替える為の基準となるブレークポイントそしてもう1つはiPad と iPhone のデザインを切り替えるための基準となるブレークポイント この2つです。そのブレークポイントを決定しておくことによりこのように PC 用のデザインからタブレット用に切り替える、そしてさらにタブレットからスマートフォン用に切り替える、といったことが初めてできるようになります。そのレイアウトを切り替えるための基準点となるブレークポイントこれは横幅で指定するのですがこの横幅を指定する際にはその対象となる端末の横幅が1つの基準目安となります。最後にそのブレークポイントが決定したらそれに合わせて実際のサイトのデザインを制作していきます。今回は架空のサイトとしてこういったデザインを用意していますが、こちらもそういったブレークポイントを考慮した上でPC 用タブレット用そしてスマートフォン用のデザインを用意しています。レスポンシブ Web デザインを制作するに当たってこういった形でサイトのデザインを作るときにはそれぞれ対象となる端末に向けたレイアウトの最適化を考えるとともに極力ページの中のコンテンツやレイアウトはそれぞれPC 用タブレット用スマートフォン用どれも似たような形にしておく必要があります。 例えばこのデザインにおいてもPC 用のデザインにおいてはヘッダーグローバルナビメインイメージコンテンツでサイドメニューといった形でありますがタブレット用を見てみますと同じようにこちらもヘッダーやグローバルナビといった形で下に続いていきスマートフォン用もデザインは違うものの内容的には同じですね、このような形になっています。例えばこの PC 用やタブレット用スマートフォン用向けのデザインが全く違うような構成を取っていたりとかそもそもデザイン自体も全く違うものになってしまいますとレスポンシブ Web デザインのメリットを活かすことはできなくなってしまいます。レスポンシブ Web デザインとは1つの HTML のソースコードに対してメディアクエリと CSS を使ってうまくレイアウトを切り替えてそれぞれの端末に最適化させた状態で見せていく方法ですがこれがそれぞれの端末全く違う構成全く違うデザインとなってしまいますとそれが現実的に難しくなり結局のところそれぞれを別のサイト要するに PC 用サイトタブレット用サイトスマートフォン用サイトという形で別々で作ってしまう必要が出てきてしまうからです。それを防ぐためにもしっかりとそれぞれの端末に向けたデザインは統一性をもたせてデザインを制作する必要があります。 さて今回のコースではDreamweaver を使ってレスポンシブ Web デザインの制作を行っていくわけですがこの Dreamweaver を使うとレスポンシブ Web デザインを制作するにあたって非常に便利な状態で制作ファイルを出力してくれます。そのファイルを利用しながらレスポンシブ Web デザインを制作していくわけです。先ほどお話したブレークポイントなどもDreamweaver が汎用的な形でまずは出力してくれるのでそちらをベースしながら開発していくととてもスムーズです。以上で今回のレッスンは終了です。今回は Dreamweaver でレスポンシブ Web デザインを作成するにあたってのサイトの構成やデザインの事前設計について解説致しました。以降のレッスンでは実際にこの架空のサイトのデザインに沿った形でDreamweaver を利用したレスポンシブ Web デザインの制作手順について解説していきますので是非そちらも参考にしてみてください。

Dreamweaver CCで作るレスポンシブWebデザイン

このコースでは、レスポンシブWebデザインに対応したサイトをDreamweaverを使いながら制作する方法について解説していきます。レスポンシブWebサイトについての説明や、制作するにあたっての設計のコツ、Dreamweaverがもつ機能や使い方などを実際の制作手順に基づいて解説していきます。

3時間40分 (32 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。