Museで作るカラフルなスクロールページ

イントロの詳細を作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画面の最上部に置かれるイントロセクションを完成させるため、Webフォントの追加やステートボタンの設置などを行います。
講師:
08:58

字幕

このレッスンではイントロ部分の詳細を作成します。それでは、ホームに入ります。そして、イントロ部分というのはこの黄色っぽい写真の部分ですね。ここに文章だけを打ってありますけどこれも形を整え、こちらを完成させていきます。では、まずここの本文、違うフォントを使ってみたいと思います。では、テキストツールを持って文字を選んでいる状態でこのフォントのところを開けます。そうすると、Web フォントという項目があってWeb フォントを追加というのがあるのでこれをクリックします。そうすると、Web フォントの追加のインターフェイスが出てくるので開始します。では、今回の次からいうフォントを検索してみてください。まず、ひとつめがAdelle と打って下さい。そうするとこんなフォントが出てきます。Adelle とありますね。これをダブルクリックすると追加できます。では、もうひとつまた、Web フォントを追加して今度は、lato と入れてください。そうすると lato というフォントが出てきますのでこれを追加します。これを追加するにはインターネットに接続していてください。そしたら、この本文は lato を使います。 今ダブルクリックした時、テキストを選んでいたので選ばれていますね。lato を選びます。そしたら、テキストの詳細で揃えを中央揃えにしましょう。そして、行送りですね。これをもう少し増やしていって140 にしてサイズを 22 にしましょう。そうすると、こんな感じになります。そしたら、色を白にします。そうするとこんな感じになります。そしたら、ちょっとボックスが大きすぎるのでこれを適当なところに持ってきます。そして、これをドラッグすると位置を変更できるので中央に持ってきたいと思います。もっと分かりやすくやる場合には整列の部分から整列の基準をコンテンツエリアにした上で中央ですねクリックすると中央に揃います。そしたら、更にこの上にもう一個見出しを付けましょう。ちょっと、サイズを小さくします75% にしてでは横書きの文字ツールを選んだら今度は、横幅にいっぱいになっているテキストボックスを作りましょう。そしたら、内容はこんなものを入力します。A DIFFERENT KIND OF CONFERENCE と入れてあげます。そしたら、これのテキストサイズこれを 36 にしておきましょう。そして、フォントですね。 これは、Web フォントで追加したlato の baldちょっと太い lato bald にします。そして、揃えは中央にします。更に色を白にします。そうすると、こんな感じで見出しの部分ができました。では、このテキストに加えてイントロから一気にセッションの内容に飛べるボタンを作りましょう。では、ウィジェットライブラリからボタンですねその中にステートボタンというのがあるのでこれをドラッグ&ドロップで持ってきます。ステートボタン、このような物ですね。ステートというのは、マウスを重ねた時に状態が変わるもののことをさします。では、この丸をクリックして選択したらDelete してしまいましょう。そしたら、このステートボタンの色を設定します。ここにステートボタン通常と出ていますね。これをクリックするとこんな感じでこんな感じで状態の切り替えができます。では、通常時これは塗りを黒にしましょう。そしたら、ステートを切り替えます。まずロールオーバーにします。ロールオーバーはライブラリから拾ってきたパネルとのブルーですね、これにします。そして、アクティブですね。これも同じにしておきましょう。そしたら、今度は通常時これだと文字が見えないです。 ダブルクリックして文字のエディットに入って文字の色を白にしておきましょう。そしたら、こちらフォントを変更してWeb フォントの Adelleこれを選んでその上でサイズを上げていきます。22 にします。そしたら、形を整えてそしてこの内容をLEARN MORE と入れてみます。2行になってしまったので横を少し伸ばします。そしたら、文字とボタンを位置を揃えます。では、文字が選ばれている状態で整列をクリックして整列がコンテンツエリアに揃えるこれでオブジェクトを整列の真ん中の二つですね押してやって他をクリックするとこの様に確定されます。ボタン自体は全体の中央に置いておきます。そして他のステートへの切り替えこのトランジションというのを使いましょう。フェードを押してそして、ディレーションを1秒イーズというのをイーズインアウトこんな状態にしておきます。こうするとどうなるかまずはプレビューしてみましょう。で、今設定したコンテンツが出てきてマウスを重ねるとこんな感じにアニメーションするようになりました。では、これに加えてリンクを張りましょう。では、ボタンを選んでいる状態でハイパーリンク、ここを開けます。では、マウスを重ねた時に説明が出てほしいのでツールヒントのところにLearn more about Creator confこれを入れておきます。 そして、リンク先はSessions のアンカーとなります。これでもう一回プレビューしてみるとこのふわっと変わったボタンをクリックするとその Sessions の場所に移動するとこんな動作ができました。Web フォントのダウンロードと追加からボタンのスイッチいろんな要素を使ってイントロ部分を豪華な感じにしました。これらの手法も覚えておいてください。

Museで作るカラフルなスクロールページ

WebデザインソフトMuseを使うと、デザイン性にあふれたWebページを簡単に作ることができます。このコースではページ全体の設計、画面のスクロールに合わせた動きやエフェクトの追加、ページ内のナビゲーション作成やウィジェットの活用、そしてできあがったファイルをアップロードしてWebサイトを公開するまでのひと通りの手順を学んでいきます。

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

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

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

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