Muse (2015) 基本講座

ボタンの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
通常の長方形に対してステートによるカラーの変化とリンク先の設定を行い、ボタンとして利用する手順を解説します。
講師:
07:20

字幕

このレッスンではマウスオーバーによりステートが変化するボタンの作成について解説します。それではこのレッスンのファイルを開いてHome の所を開きましょう。そしたら、ここにこの画像の真ん中の辺りにカスタムでボタンを置いてそれをクリックすると特定のページに跳ぶというのを作ってみようと思います。ではボタンを作る時なんですがまず普通の長方形で大丈夫です。普通の長方形でではこのグリッドに合わせて長方形を描きます。そしたら塗りですね。この所で色を定めるんですが最初に緑を選んでおいてこの辺を操作して黄緑っぽいような色にしておきましょう。そして、ちょっと真四角だと味気ないのでここです、ここの数字を挙げていくとどんどん角丸が進んでいきます。段々丸くなってきましたね。これを 30 ぐらいまでもっていってこんな感じの角が丸いボタンにしてしまいましょう。そしたら、この状態ではただの画像なんですがこの長方形を選んでる時もここに今「通常」となってますがステートの設定「ロールオーバー」「マウスダウン」それぞれの状態で変わる設定ですね。それが行えます。では「ロールオーバー」マウスを重ねた時の所に移りましょう。ロールオーバーの状態でまた色の所を開けて色を変更します。 そうすると、「ロールオーバー」と「マウスダウン」もセットでかかりましたね。ではこの状態で1回プレビューしてみましょう。プレビューすると、この様にボタンが置かれていてマウスを持ってくるとこんな感じで色が変わるといった状態になりました。ではこれだけでもいいですがもう少し凝ったこともやります。ここのステートの部分を開けて今空になっている「トランジション」という所ですね。トランジションというのは切り替え効果のことです。ここでじゃあ「フェード」をクリックを入れてそして「デュレーション」ですね、これを1秒にしておきます。「速度」は「イーズ」というのにしておきましょう。これがオンになっていると プレビューした時にマウスを重ねるのよく見ててください。こんな風にふわっと一気に変わらずにふわっと色が変わる、こんなデザインにすることができます。これだけで大分違いますね。では、この状態に対して文字を打っておきましょう。じゃあ Learn More と打ってそしたら「段落スタイル」で「Main Body」としておきましょう。そうするとちょっと大きすぎるのでテキストの方で若干サイズを下げてやって真ん中揃えにするとそしてボタンとテキストの位置ですね、これを合わせます。 こうしてやるとこんな感じで、詳しくはこっちですよというボタンがあってこの様に動作しますね。ではこのボタンを選んでる状態で「ハイパーリンク」でリンク先 About Us のページを設定しておけばちゃんとボタンとして機能してクリックでこちらのページに跳ぶというそのような動作を設定することができます。では、このボタンのデザインをそのまま生かしてもう一個作ってみましょう。では、まずこれそれぞれボタンとテキストバラバラになってるのでShift キーを押しながら両方ともクリックすると選べます。そしたら Mac の方は OptionWindows の方は Alt キーを押しながらドラッグしていくとどんどん別の場所に持って行けるのでぐっと下の方に持ってきてちょっとこの辺に置いておきましょう。そしたら、今 Contact Us Today!になっている所ここをちょっと内容を変えてすぐにこちらからアクセスできるようにしておきます。ではここをWe'd love tohear from youabout your project とこんな感じで打っておきましょう。そしたら、今真ん中揃えですけどこの部分ですね、テキストの所をクリックして左揃えにしておきましょう。 そしてテキストボックスの大きさを調整しましょう。まずこれちょっとずらしておいてそしてこちらですね。必要なだけの長さにします。そしたらこのボタンですね。これを今度は隣に持ってきて文字の中身ですね。STARTCHATTING としましょう。そして、リンク先をContact Us のページにしておきます。そうすると、これ全部ステートを丸々コピーされてるのでこっちもマウスを重ねるとこのじわっとかっこよくアニメーションしてクリックすると該当するページに跳ぶというこんな動作を作ることができました。こうしたステートの変化長方形に対して適用できるのでこの角丸も合わせると、かなり色々なデザインができるかなと思います。よりデザイン的にもかっこいい状態で様々な所にナビゲーションができるので是非とも試してみて下さい。

Muse (2015) 基本講座

WebデザインソフトMuseを使うと、HTMLのコードを使わずにデザイン性に溢れるWebページを簡単に作ることが可能です。このコースではマスターページの作成やコンテンツの追加、テキストの追加や色の設定、ウィジェットや拡張機能の活用、レスポンシブなレイアウトの設定やデータをアップロードしてウェブ上に公開する手順などMuseの操作をひと通り学ぶことができます。

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

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

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

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