Museを使ったWebサイト制作ワークフロー

ナビゲーションの装飾

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ナビゲーションメニューの色やフォントを、プロトタイプと同じデザインとなるように調整します。
講師:
00:06:35

字幕

このレッスンではナビゲーションメニューの色やフォントの設定を行います。それでは Muse のウィジェットを使って作成した、このナビゲーションのメニューこれの色であるとかまたフォントなんかを設定していきましょう。まず 配置した後に全体一律で 今「不透明度」35% にしましたけどこれを1回戻して「不透明度」100% にしておきましょう。それでは、このメニューを選ぶ状態ですが1回クリックすると全体が選ばれます。そしてもう1回クリックすると選ばれてる範囲が、この一個のメニューの枠、こうなりましたね。そうすると具体的に色などの設定が行えるようになります。これが全体が選ばれてる状態だと表示が変わってきて全体の設定になります。この個々の設定状態にしておきます。では、まず塗りの部分ですがこれを一回黒を選びます。そして、このメニューのウィジェット一個設定すると全部が一遍に変わるので全部が黒くなりましたね。そしたら「塗り」の所をクリックしてここで、塗りの「不透明度」これを 40% にしておきましょう。そうすると、背後が透けて見える状態になってます。このメニュー全体が選ばれてる状態で不透明度を調整してしまうとこの文字まで不透明度が適用されてしまうのですが単体のこの枠だけ選ばれてる状態ですね。 この状態だと、文字は別個のものとしてこの四角い部分だけの設定ができるのでここだけが今、半透明の状態になってます。文字は透けてない状態となってます。そして線は幅0ですね。線はない状態にしておきます。そしたら、このメニューなんですがこうしたボタン類はマウスのポインタを重ねたりしたときに状態が変わっていくそういったステートというものがあります。ここで設定できます。今「メニュー項目」となってますけどこの「通常」という所クリックすると「ロールオーバー」「マウスダウン」「アクティブ」と「ロールオーバー」というのはマウスを重ねた時ですね。そして「マウスダウン」クリックしたときなどそれぞれ変わっていくんですが次「ロールオーバー」を選んでみて下さい。マウスが重なった時今違うグレーになるようになってるのでこの時も黒にして「塗り」を 40% にしておきましょう。状態にかかわらず、この枠自体は 今回はいつも同じ色になっているという設定にしようと思います。「マウスダウン」も同じく黒で「塗り」は 40% です。そして「アクティブ」ですね。この状態でも「塗り」は黒でそして 40%そしてこの四角い部分で差をつけるのではなくて文字で差を付けるようにしましょう。 では 文字の部分のデザインを行います。では 2回クリックしてこの枠が選ばれてますけど更に文字の部分ダブルクリックするとテキスト部分だけ選ばれました。そしたら、このテキストですけどフォントを変更しましょう。フォントなんですが、このopen sans というものを使用します。選ぶと全部入ってきます。open sans ですがもし入ってない場合には「Web フォントを追加...」ですね。これを実行してそしてこの「Web フォントを検索...」ここでopen sans と検索してやるとここにでてきますのでインストールして使ってください。では 文字がこれになったらここも 文字だけ選んでる時は文字だけのステート、これを選ぶことができます。では「通常」「ロールオーバー」「マウスダウン」この3つは一緒にしておいて「アクティブ」ですね。そのページが選ばれてる時ここの部分だけちょっとテキストの色を変えましょう。「アクティブ」にして そしたら、このオレンジにしておきましょう。そうするとアクティブの所だけこの色になりましたね。通常だと白で、その他も白で「アクティブ」の時だけオレンジと他の文字の所もアクティブな場合はオレンジにしておきます。 この様に他のものもアクティブだとオレンジといった状態になりました。では この状態でプレビューしてみましょう。「プレビュー」をクリックします。そうすると、メニューができていてそれぞれのページの部分クリックしてみるとマウスを重ねるだけでは変化しないというデザインになってます。そしてクリックして移動した先のページの今いる部分だけ文字がオレンジ色になると今回はこの様な仕様としています。この様に同じメニューウィジェットを使っても細かく色であったりフォントであったりまたステートなんかを設定してやることでこちらのプロトタイプのデザインにピッタリ合ったようなものを作ることができます。この手順、是非とも実行して下さい。

Museを使ったWebサイト制作ワークフロー

HTMLを意識せずにデザイン性に富んだサイトを制作することができるMuseを使えば、ワークフローを整理することでより効率的な作業を行えるようになります。このコースではPhotoshopやInDesignを使ったプロトタイプの作成やTypeKitフォントの使用、グラフィックの配置や書式の設定、サイトのエクスポートに関するテクニックなどを学びます。

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

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

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

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