Museで手軽にWebサイト制作

スマートフォン向けにページを調整してチェック

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プロフィールのページを例にして、デスクトップ向けの表示をスマートフォン向けに移植する実例を解説します。
講師:
05:51

字幕

このレッスンでは ここのページの内容を スマートフォン向けに 調整する手順を解説します それでは スマートフォン向けに作ったマスタが 各ページに適用されています 各ページの内容も映してみましょう では一回 「デスクトップ」に切り替えます 今回は 内容が分かりやすいので このプロフィールのページですね ここで 例としてやってみたいと思います では この プロフィールページの中の テキストボックス これはもう テキストであるとか あと 回り込みが設定された写真ですね こうしたものが完成されてます もう選択すると 1 個のパーツになっていますね こういったものができていれば わざわざゼロから作り直さなくても これを簡単に調整するだけで 移植することができます では このプロフィールのテキストボックスが 選ばれている状態で Mac の方は Command Windows の方は Ctrl を 押しながらC を押します はい これでコピーされましたね そしたら スマートフォンの一覧に行って スマートフォンのプロフィールページ ここにアクセスします もう マスタが適用されているので ではここに 素材を貼り付けてあげます Mac の方は Command Windows の方は Ctrl を 押しながらV を押すと さっきのパーツが そのまま持って来られました そしたら 位置を合わせてやって まず 幅を合わせてあげましょう これをドラッグしていくと ここも ちゃんと テキストボックスのサイズが変わるだけで レイアウトが変わっていきますね 写真も今 大きさが はみ出してしまっているので 適度な大きさにしてあげると このようにピッタリ 収まるかたちになります こうした 上下の部分も ドラッグしてあげるだけで 最適なかたちに 適合していきます では テキストボックス自体を センターになるようにしてあげると このようにですね 元々 デスクトップ向けに作った パーツを コピーペーストして ちょっと調整するだけで もうこんな感じの スマートフォンに最適化された デザインになりました では これを ちょっとプレビューしてみましょう 「プレビュー」を実行すると このようなかたちで スマートフォンだとどんな形になるか こんな風に見ることができます このときですね スマートフォン向けのレイアウトの プレビューモードでは 「プレビューサイズ」というところで デバイスを選ぶことができます 例えば今「iPhone 6 Plus」に なっていますけど これを「iPhone 5S」にすると ちょっとサイズが小さくなりますね ただこれは サイズがちょっと変わるだけなので 参考程度に 切り替えると いったところでいいかなと思います これを もう少しきちんと いろんな機器での表示を チェックしたいときには Chrome を使いましょう ではこれを 「ブラウザでプレビュー」を実行して Chrome ですね こちらのほうで開きました そしたら メニューから「その他のツール」 「デベロッパーズツール」 これで モバイルの表示ですね これをアクティブにして 「iPhone 6 Plus」にすると こんな感じで iPhone の表示だと こんな感じとかですね それぞれ たとえば 「Nexus 5」だとこんな感じとか このようにして もう少しつっこんだかたちで 様々なデバイスの表示を チェックすることができます この要領で 他のものも コピーペーストしていって 大きさを変えて ちょっとレイアウトを変えてやれば スマートフォンで読みやすい かたちとすることができます さらに「タブレット」をプラスすることで タブレット向けの表示というのも 作ることができるんですが これ 切り替えが 何で決まっているのかというと ファイルメニューの「サイドプロパティ」 これを開いてみてください そうすると「レイアウト」というところで 今 「デスクトップ」と「スマートフォン」 この2つがあるんですが ひとつは 画面サイズですね 画面サイズが 一定の この設定された大きさになると スマートフォン向けの表示になると そのような切り替えとなっています なので 「デスクトップ」と 「スマートフォン」の中間に さらにですね パソコンの画面よりは小さいけれど スマートフォンよりは大きい タブレットの表示を作っておくと さらに親切な設計とはなるんですが 手間がかかるので どこまでやるかですね タブレットであれば デスクトップの表示でも かなり十分見られる という 場合が多いので もし完全に最適化したい場合には 「タブレット」も加える 最低限の手間で済ませたい場合には 「デスクトップ」と「スマートフォン」ですね この2パターンを作るということになります 特に モバイル向けの最適化は 今欠かせない要素となっていますので ぜひとも最低限 スマートフォンへの最適化は行ってください

Museで手軽にWebサイト制作

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

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

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

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

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