Museを使ったレスポンシブWebサイト制作

レスポンシブWebデザインとは?

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブデザインとはどんなものか?という実例を、実際のサイトを閲覧しながら解説します。
講師:
07:22

字幕

このレッスンではレスポンシブデザインとは何かということについて解説します。現在は Website を閲覧する時もパソコンだけではなくて例えばスマートフォンであったりまたはタブレットであったり様々なデバイスでみるのが当たり前になっています。パソコンで Website を見ると例えば今この動画を見て頂いてるように割と横長の画面で見ることが多いですが一方スマートフォンなんかで見るときは縦長で見ることが多いですね。タブレットも基本的に縦長で閲覧することが多くなっています。しかもスマートフォンやタブレットそれぞれは解像度も小さいのでパソコン用にレイアウトされてるサイトをそのまま出してもちょっと見ずらいかなということがあります。そこで現在は Website を作る上ではそうしたモバイル機器での視聴に特化するこれが欠かせない要素となってます。モバイルで見やすくする方法は幾つかあるんですがその中で最もスマートで応用範囲が広いのがレスポンシブデザインと言えます。ではレスポンシブデザインとはどのようなものかちょっとこの Lynda.com 日本版のサイトを例にとって見て頂きましょう。まず今パソコンのブラウザーでサイトを表示しています。 Lynda.com 日本版のトップページですね。まずこれがモバイルデバイスで見られた時は横幅が狭くなります。では それをブラウザーの幅をドラッグ狭くすることでちょっとシミュレーションしてみましょう。幅を狭くしていくと見て頂くと、こうメニューとか配置してあるボタンなんかの位置が変わっていくのがわかります。ある地点を越えるとパッと上に出ていたナビゲーションが見えなくなってそしてよくモバイル機器のアプリなんかでも見られるようなこうしたメニューのスタイルになります。これが更に縮んでいくとこの様に、ここの文字なんかも小さくなってどんどんレイアウトが変わっていきます。例えばスマートフォンで見た時この幅だとするとそれに最適なレイアウトになってます。スマートフォンより多少広いタブレットで見た時これぐらいだとするとそれにも最適なレイアウトそしてパソコンで見た場合にも最適なレイアウトと、この様に1つのページがページの幅によってどんどん姿を変えていってそれぞれ見ているデバイスやスクリーンのサイズに最適化されるこれがレスポンシブデザインと呼ばれるものです。ちょっと違ったページを見てみましょう。これトップページでしたが、例えばこの「コース」の方のページですねもっと要素がいっぱいあります。 これがパソコン向けの今 表示になっています。これがどんどん幅が狭くなっていくとまた先程のトップと同じようにメニューなどのデザインも変わっていって下の方を見てみるとさっきは横に幾つか並んでいたものが全部縦一列に並ぶようなモバイル向けの表示になっています。これがちょっと広くなってくるとこの様に複数列の表示に変わってどんどん状況に合わせて表示される数が変わってきます。この様な状況に応じた変化これがレスポンシブデザインでこれを行うことでどんなユーザーに対してもかなりみやすい状況を提供できる理想的な形となっています。この Lynda.com のサイトは完全にレスポンシブのデザインとなってますがその他、幾つかのパターンが存在します。例えばこの様なパターンも存在します。これは Wikipedia のサイトですね。では Wikipedia のサイトこれ幅を変えてみるとこの様に幅に合わせて多少表示は変わっていってるんですがただ 基本的にこれ以上狭くならない所ですね。狭くするとはみ出してしまうポイントというのが存在します。そしてこちら側の左側のカラムはずっと幅が変わらなくなっています。これは一応ページの幅に合わせて多少レイアウトは変わってはいるんですが完全なレスポンシブデザインとは言えないものになっています。 この Wikipedia のサイトはこれはモバイル機器からアクセスすると全く違うデザインが表示されるようになっています。では そういったタイプもう少しわかりやすいものとしてちょっとこちらのサイトを見て頂くとこちらのサイトは幅を狭くしていってもレイアウトが基本的に全く変わりません。もしこの元々デザインしてある幅よりブラウザーの幅が狭くなるとそのままはみ出してしまうんですね。では これはモバイルで見た時どうなるかというとこちらがスマートフォンで先程のページを見た時をシミュレーションした画面です。見て頂くとサイト自体は同じサイトなんですがレイアウトが全く変わって最初からスマートフォン用にレイアウトされた形となっています。このケースは完全にアクセスするデバイスによって振り分けられてるというわけですね。先程のこちらのサイトのレスポンシブの様なこの段階に応じて常に変わっていくタイプではなく完全に決まったレイアウトが何種類か用意されていてアクセスしたデバイスであったりスクリーンの幅によって振り分けられるそのような仕様となっています。これもモバイル対応ではあるんですがレスポンシブデザインとはまた違ったものになっています。 この中でやはり一番理想的と言えるのがどのようなスクリーンサイズが来てもそれに柔軟に対応できるレスポンシブデザインと言えます。Muse を使うと、この様なレスポンシブデザインがHTML のコードを書いたりすることなく作ることができます。その様々なコツを是非このコースで学習して下さい。

Museを使ったレスポンシブWebサイト制作

Museを使うと、パソコンだけでなくスマートフォンやタブレットなどのモバイルデバイスで快適に閲覧できるレスポンシブWebサイトを簡単に作成することができます。このコースではレスポンシブWebデザインの基礎知識やMuseを使ったメニューのカスタマイズ、オブジェクトのスケーリングや画面の幅に応じた再配置、デザインの調整に付随する問題の解決方法などを学びます。

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

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

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

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