Museで手軽にWebサイト制作

モバイル機器での表示をチェックする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマートフォン、タブレットといったモバイル機器向け調整の意味と、Google Chromeを使った確認法を解説します。
講師:
04:34

字幕

このレッスンでは スマートフォンやタブレットといった モバイル機器での表示について解説します 今ですね 先に製作した Profile のページを開いています これが実際のネット環境 ブラウザーでどのように表示されるか チェックする時には 「ファイル」メニューの 「ブラウザーでページをプレビュー」ですね これを実行すると システムの方でデフォルトに設定されている ブラウザーで表示して チェックすることができます ではですね 表示してみましょう 今ですね 画面はブラウザー Google Chrome ですね そちらの方に切り替わりました 他のブラウザーでもまず 表示は一緒だと思いますが こんな感じに表示されています これで見る限りは メニューの操作であるとか またはテキストを読むことですね これに特に支障はないかなと思います ただですね これはあくまで パソコンで見ている表示でして 現在はウェブページへのアクセスも スマートフォンやタブレットといった モバイル機器 そちらを経由しているものが 非常に増えています ではこれをですね 例えば スマートフォンで見た時にどんな表示になるか そういったチェックが 今は非常に重要になっています 例えばですね このブラウザー Chrome を使うと そうした様々な機器からアクセスした場合の 表示を簡単にチェックすることができます 例えばこのページをですね Apple の iPhone 6 Plus から アクセスした時 どんな表示になるか シミュレーションしたのがこちらです スマートフォンの画面サイズになってますね その中に縮小されて 表示されるんですが このように小さくなってしまいます もちろんですね 部分的に拡大してあげれば テキストも読めるわけなんですが なかなかですね 手間もかかってしまうので こうしたスマートフォン向けには 最適化されたデザインというのをですね 用意してあげるのが もっとも得策となります Muse はですね こうしたアクセスする機器ごとに 違ったデザインを持たせることができます なので こうしたですね 表示が小さくなって しまうスマートフォンなんかの場合には 別にデザインを用意してあげるのが 一番得策となります ではですね こうした 機器別の表示のチェックなんですが ちょっとやり方を解説しておきます じゃ Chrome ですね まず Muse の方から 「ブラウザーでページをプレビュー」で Chrome の方で ページを開きます そしたらですね 右上のこのメニューですね 「Google Chrome の設定」 これをクリックします そうすると このようなメニューが出てくるので 「その他のツール」この中に デベロッパーツール というものがあるので これを実行します そうすると このような 開発用の画面が出てきます いろいろ細かいものがありますが 使うのはここだけですね 「Device Mode」という アイコンがあります これを一回クリックすると このようにですね 表示されている ウインドーのサイズが変わります ここで この「Device」というところに メニューがあります 中を見てみると 例えば Kindle Fireですとか iPad iPhone そして Google の Nexus BlackBerry または パソコンでですね 解像度を変えた場合とか あと Galaxy とかですね 今のですね 割と主立った モバイル機器 そうしたものの選択肢が出てきます 例えば じゃ iPhone での表示を 確かめたいとなったら iPhone のしかもモデルもですね 複数ありますので じゃ例えば「iPhone 6 Plus」だと どうなるかなと 選んであげると このようにその機器で表示された状態ですね それをシミュレーションすることができます これをですね チェックしておくと わざわざ 他のいくつものデバイスを用意して チェックするという手間を 省くことができるので 大変効率的です Muse でですね モバイル向けの表示を作った際は 是非 この Chrome の機能を使って チェックすることをお勧めします

Museで手軽にWebサイト制作

MuseはWebデザイナー以外でもスタイリッシュなWebサイトを作ることができる画期的なツールです。このコースでは架空のアーティストのニューアルバムのPRサイトを例に、サイトの構成や素材のレイアウト、動画や音声といったリッチメディアの埋め込み方、TwitterやFacebookなどのSNSとの連携、またモバイル機器への対応などを学ぶことができます。

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

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

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

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