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

新規サイトの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Museで新規サイトを作成し、マスターページのフッター部分にブロックを作成して背景色にします。
講師:
06:03

字幕

このレッスンでは、Muse で新規 Web サイトの作成を行います。それでは、今、画面の方にはMuse が立ち上がっています。Muse で Web サイトを作っていくために新規のサイトを作りましょう。では、起動画面で「新規」をクリックします。そうすると、「「新規サイト」の設定といったものが出てきます。ここをクリックすると詳細の設定もできます。では、大事な所としてこのページが「可変幅」「固定幅」という切り替えがあります。「可変幅」は、いわゆるレスポンシブデザインというやつでブラウザーの幅が変わるとレイアウトが随時変わっていくと言うものです。「固定幅」は基本的に決まったレイアウトとなっていてMuse では固定幅であっても例えば、スマホなんかの狭い画面で見た時とパソコンの幅の広い画面で見た時の切り替えを行うことができます。今回は「固定幅」で行います。そして、「ページ幅」は今、 960 になっていますけどこのまま 960 でやりましょう。それでは OK をクリックします。そうすると、この様にプランの画面が開きます。このグリッドの書いてある所に載っているのが実際のページの構成となります。今、サイトにアクセスして一番最初に表示される「ホーム」の画面です。 それだけが表示されています。そして、このサイトをデザインするにあたって例えば、画面上部に表示されるヘッダーメニューといったものであるとか一番下のフッターとかそうした共通要素はこの「マスター」の所です。ここで設定されます。「マスター」は個別のページというわけではなく全体に共通する要素をデザインする場所です。では、これをダブルクリックして開けてみましょう。そうすると、この様な表示となっています。では、この表示倍率をちょっと下げて全体が見えるようにしましょう。そうすると、こんな感じにあらかじめいくつかの線が引いてあります。まず、ここの「塗り」というのがありますけどこれを試しに、何らかの色にしてみましょう。そうすると、この部分が色になりました。これは何かというとさっき新規サイトを作る際に幅 960 ピクセルとしましたけどその幅がここです。これが実際のページの内容となる部分です。なので、こっちの線はページの幅を表している線でした。そして、そこからこの様に、ちょっとだけマージンを取って中の方に内容を入れるということになっています。そしてもう1つ「ブラウザー背景」というのもあります。こっちに違う色を入れてみるとその外側が色が変わりました。 あくまでページの内容はこの範囲であってブラウザーの幅がそれ以上になった時にその余白の部分がどんな色、もしくは画像になるのかその設定が「ブラウザー背景」の方で設定します。どちらも解釈すれば背景なんですが実際のページの内容の部分かその更に外の余白の部分かその違いがあるので、気を付けて下さい。とりあえず、どっちも白に戻しておきましょう。そうしたら、更にこっちに入ってきてこの上下に、こんな形の線が引いてあります。この線から上がヘッダーの部分です。ページの一番上に表示される部分です。こちらがフッター一番下に出てくる部分です。そしたら、このフッターの部分に背景の色を作ってみましょう。ここだけ色を変えてみます。フッターの範囲はこの上の所で調整します。そして、もう1こスライダーがありますけどこれはページの一番下を表すのと更に下にして表示の一番下から内容を置ける所までの幅です。そのパディングの部分を設定するのがこの部分です。実際にモノが置かれるのがこれより上というかたちです。では、これに合わせて「長方形ツール」を選んでこの部分に、フッターの中にこの様に長方形を描きます。そして、「塗り」を黒にします。そうすると、ここだけ黒くなりました。 では、一回これをこの「プレビュー」で見てみましょう。実際にブラウザーでどんな風に表示されるかを見る所です。「プレビュー」をクリックすると実際のページになるとこの様な見え方をするという例が出て来ます。まだ何も置いていないのでこんな感じですけど一番下の部分に黒い所があります。これがフッターの部分となります。そして、このフッターを設定したものは他のサイト内の全ページに自動的に、この様に設定されます。この様なかたちで Web サイトの一番基本的な新規作成を行います。

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

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

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

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

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

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