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

ナビゲーションの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Muse上で対応するページを作成した上で、メニューウィジェットを使ってプロトタイプと同じ位置にナビゲーションを作成します。
講師:
00:06:16

字幕

このレッスンではヘッダー部分のナビゲーションを作成します。それでは このデザインの中のヘッダーの一番上ここにはサイト内のそれぞれのページに飛ぶためのナビゲーションが置いてあります。これを実際に作ってみましょう。では 第一段階なんですがこのナビゲーションボタンが6個あります。そしてこの6個のボタンとこっちのサイトのロゴですね。ホームの画面にはこのサイトのロゴをクリックすると戻ってくるようになってるので実際にはサイト内にはページが7個あります。今回は Muse の中のウィジェットに入っているメニューのボタンを使います。それを使う時には 実際に Muse 内にページがある必要があるのでまずは必要なページを予め作ってしまいましょう。では 普段の画面で今「ホーム」だけがありますね。そしたら「「ホーム」の右隣りの、この+これをクリックすることで新たなページを追加できるので必要なページをあと6枚作ります。では1枚2枚3枚4枚5枚そして6ですね。そしてこれで全部で7ページができた形となりました。そしたら このそれぞれのページの名前それが自動的にメニューに反映されるようになってるので名前を入れておきましょう。 それぞれのページの名前なんですがこのコースのアセットname.txt というテキストファイルがあるのでここに6個の項目があります。「ホーム」以外はこの名前を実際に入れてやりましょう。では1個目これを選んでMac の場合は CommandWindows の方は Ctrl ですね。押して C を押してコピーしてそしてこのページ下の名前の部分ダブルクリックすると入力状態となるのでCommand もしくは Ctrl+V を押すとこの様に貼り付けが行えます。では 同じ容量で残りのページも、全部名前をコピー&ペーストしていきましょう。3つ目もコピーしてダブルクリックしてペースト。これで最初に全部名前を付けてしまいます。これで5個目そしてあと1つですね、info でこれで全部入りました。これを入れた上でさっき言った通り 今回「ホーム」はこのロゴでナビゲートさせるのでメニューの中含めないんですが何もしてないと、この「ホーム」もメニューの中に入ってしまいます。なので プランの画面で「ホーム」を右クリックして「メニューオプション」という所で「ページをメニューに含めない」これを選んでおきます。そうすると、この「ホーム」だけがメニューの中にでてこないといった状態になります。 それでは、実際にメニューを配置してみましょう。では、マスターの方に行って「ウィジェットライブラリ」からこの中に「メニュー」があります。そして「水平方向」ですね、これをドラッグ&ドロップして置いてやるともうさっき入れたメニューの名前が全部反映されてそしてちゃんと「ホーム」はなくて6個だけのメニューになってます。では これを、この位置に持ってきます。そして、このプロトタイプの画像と同じサイズになるようにしてやります。この時、もし見にくいという場合には一時的にレイヤーの元画像のロックを外してそして不透明度、幾分上げておいても OK です。またちょっとロックしておいてではですね、まず端の方までもっていってそして同じ大きさにしておきます。こちらもちょっと見ずらいという時には拡大してそしてちゃんと隙間が出来ないように大きさを合わせておきます。こうすることで元のプロトタイプの位置と同じ所にMuse のウィジェットを使ってメニューを置けました。このメニューなんですが選んで、そして「不透明度」これを 35% にしておきましょう。35 にしておきます。これで 後ろも見えるような状態となっています。この様にしてプロトタイプ上の画像と対応するようなパーツを配置していきます。

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

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

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

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

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

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