デザイナーのためのCreative Cloud活用術

モバイルデバイス用のレイアウトを作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマートフォンやタブレットでアクセスした時に表示される、スクリーンサイズに特化したモバイル用のレイアウトを作成します。
講師:
07:20

字幕

このレッスンでは、モバイル用のレイアウトを作成します。ここまでですね、大体のページの内容ができてきました。これらのデザインは例えばスマートフォンで見た場合もちろん表示されるんですけれど、基本的にこの表示が縮小されて出て来るので結構見づらくなってしまいます。なのでユーザーがより見やすいようにスマートフォン用のレイアウトを追加しましょう。ではまず「ページ」メニューから「代替レイアウトを追加」という所ですね、ここで「タブレット」「スマートフォン」とありますけれども今回は「スマートフォン」のレイアウトを加えてみましょう。そうすると「スマートフォンレイアウトを追加」というのが出て来ます。では「コピー元」とありますけれども、今「デスクトップ」というのがこのパソコン用に普通に作っているページの構成です。ではこれをコピーする形ですね。「サイトプランをコピー」、これはページの構成をコピーするということです。「ページ属性をコピー」ページの様々な属性も引き継がれます。そして「ブラウザの背景をコピー」この背景もコピーしておきましょう。そして OK をクリックします。そうするとこのようにページ構成は一緒ですね。名前も一緒になっています。 だけどまだ何も中身がなくてそして幅がスマートフォン向けのものになっている、こうした設定ができました。ではこの上のスイッチを使うと、デスクトップ、今まで作っていたものと、スマートフォン用とが切り替えられます。ではまずデスクトップの方のマスターですね、この中にある項目を全部コピーしてスマートフォン用の方に持って行きましょう。では Command もしくは Ctrl+A を押して全部を選びます。そうしたら Command もしくは Crtl+C を押してコピーします。そうしたらスマートフォンの方に移ってスマートフォンのマスターを開けます。ここで Command もしくはCtrl+V を押します。そうするとこのように要素がペーストされました。ではまずちょっとフッターを見てみましょう。フッターの部分、この部分ですね。デスクトップの方で使っていたこの背景もちゃんとやってきているので、これを幅に合わせてフッターの範囲に合わせます。そしてこのロゴの画像ですね、ちょっと大き過ぎるので縮小してはまるようにしましょう。そしてメニューですね。これもこの中に持ってきて配置してあげます。位置を微調整します。そうしたら今度上の方、ヘッダーの方ですね。 ロゴがちょっと大き過ぎるので大きさを変えてやって、ヘッダーの中に綺麗に収まるようにします。これでスマートフォン向けのマスター設定が出来たので、他のページにも反映されています。他のページ内容も持って来ましょう。まず CARNET の方ですね。ではこれらの要素を全部選びます。Command もしくは Ctrl+A を押してそしてCommand もしくは Ctrl+C でコピーします。そうしたらスマートフォンの方のCARNET のページに行って、ここで Command もしくはCtrl+V を押します。そうするとこんな感じで要素がやってきました。ではこの写真ですね、デスクトップの方では余白が出たので黒い背景を置いていましたけれども、これはもうなくて大丈夫ですね、消してしまいます。そしてこの写真をページの幅に合うようにリサイズしてあげます。こちらもリサイズしてあげます。そしてこのフォーム、これもこの幅に合う形に直してあげます。ちょうど持ってくると幅自体は収まる形ですね。では中央に配置して、後このテキストがあるのでもう少しスペースを空けます。そしてこのテキストを持ってきてこれも幅に合うように調整します。 それぞれ中央になるように持ってきて、はい、これでレイアウトができました。画像も調整して。ちょっとプレビューしてみるとこんな感じに幅の狭い領域であっても表示されるようになっています。ではもう一つのインプレッションの方もこれも全部を選んでコピーして、そしてスマートフォン向けのページにきて、貼り付けを行います。こちらもこの黒の長方形は要らなくて、写真をちょうどいいサイズにリサイズしてこのテキストもちょうどはまる広さにします。こうやって、もうできている要素のサイズを変えるだけなので、非常に短時間で作ることができます。プレビューしてみるとモバイル向けのレイアウトになって、このように切り替えもできるという形になっています。特に今ウェブサイトはモバイル・スマートフォンなどから見られるのが非常に増えています。スマートフォンは、それに特化したレイアウトがあった方が非常に見やすくなるので、ユーザーの利便性を考えてぜひともこうしたモバイル向けのページも作ってください。

デザイナーのためのCreative Cloud活用術

Creative Cloudに備わっているさまざまなツールを使うと、デザインに関する作業をひと通り行うことができます。このコースではIllustratorによるロゴデザインやCreative Cloudを使った素材の共有、ロゴを効果的に見せるPhotoshopでの写真加工やInDesignを使った名刺デザイン、MuseでのWebサイトの構築などを解説します。

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

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

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

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