Muse (2015) 基本講座

スライドショーウィジェット

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
一定時間の経過やサムネイルのクリックなどで画像を入れ替えて表示できるスライドショーウィジェットの使い方について解説します。
講師:
09:40

字幕

このレッスンではスライドショーウィジェットの使い方について解説します。それでは Contact Us ページの空白を生かしてスライドショーウィジェット使ってみましょう。「ウィジェットライブラリ」の中の「スライドショー」に入ってます。では最初に、この「サムネール」という奴これをドラッグ&ドロップしてここに置いてみましょう。こんな感じに置けましたね。1回プレビューしてみましょう。スライドショーウィジェットはその名のとおりこの様に写真が表示されそれが一定時間でこの様に切り替わっていくスライドショーを簡単に作ることが出来ます。スライドはこうやって自動で切り替えるほかにサムネールをクリックすることで意図的に切り替えたりとかまたはこちらの矢印クリックすることで行ったり来たりとさせることも可能です。では今、この標準のデザインになってますがここの1回クリックして選択して「オプション」を開けて「画像を追加」という所で独自の画像に入れ変えることができます。ではこのフォルダーのアイコンをクリックしましょう。そうすると、このコースの素材の中にportfolio というフォルダーがあるのでその中に画像が8枚入ってます。 それを一括でこの様に選んで「開く」とやってみましょう。そうすると、ご覧の通り自動的に入れ替わります。それでですね、さっきのスライドショーはフェードして切り替わっていましたが例えば「効果」という所を「水平方向」なんていうのにしてみるとプレビューしてみると独自の写真に簡単に差し変わったのに加えてこの様に横滑りしていく感じですね。動きも簡単に変えることができます。また初期状態ではこんな感じのレイアウトですがこれも簡単に変えることができます。例えば1回クリックして選択してもう1回、この辺をクリックするとこのサムネールがまとまって選択されます。そしたらこのサムネールの枠をこの様に形を変えると並び方が変わります。こんな感じで横一列なんかもできますね。例えばこれを下の方に横一線に並べてやってこっちのスライドショーのスクリーンの方を上に持っていくとこのスクリーンも大きさを変えることができます。この様なデザインにすることも可能です。また、このスライドサムネールそれぞれ個別に選べるのでそれをドラッグしてやるとこんな感じに順番の入れ替えも可能です。簡単に順番を入れ替えてこの様に自分の好きなように並べ替えた上でプレビューするということも可能になっています。 ではですね一旦このウィジェットは消してしまいましょう。スライドショーウィジェットは様々な種類があります。例えば特徴的なものとして「フルスクリーン」なんてのがあります。これはちょっと変わっていて例えば「サムネール」はドラッグ&ドロップしたらとりあえずこれぐらいの大きさで置かれましたね。それに対して「フルスクリーン」はドラッグ&ドロップすると読んで字の如くこの様に画面いっぱいに自動で拡がります。そしてここででは「画像を追加」してそしてプレビューしてみると正にこんな感じで画面いっぱいに広がってスライドショー、見せるということもできます。あまり動作も重くなるのでやるケースは少なくないかもしれませんが極端にインパクトを付けたい時画像枚数をある程度少なくすれば十分動作する範囲ではあるのでこんな非常に大きいインパクトを狙った方法を使うという手もあります。こういった時、あんまり速く切り替わるとちょっと疲れてしまうので例えば次のスライドに切り替わるまでの時間を延ばしたりとかまた「トランジション速度」これも変えることができるので例えばこんな設定ですね、「フェード」の3秒とかにすると切り替わる時にこんな感じで非常にゆっくりと切り替わっていくとこんな感じの動きを付けることも可能です。 ではちょっと応用してやって見ましょう。では Home の画面に行きます。画面全体見たいので75% ぐらいにしましょう。Home の画面の上の部分には今写真が貼ってあります。固定の写真ですね。ではこれをスライドショーに入れ替えてみましょう。では今回は、この「空白」というものを使います。これは非常にシンプルないろんなものに使えるようにシンプルな状態になってるものですね。ではまずサイズを合わせましょう。これをドラッグして左上に合わせます。そしてこっちの右下の方をドラッグしてきてこちらの右下に合わせます。これでエリアが完全にスライドショーで覆われました。そしたらこのコントローラーこれもそれぞれ動かすことができます。Shift キーを押しながら順番にクリックすれば一遍に動かせるのでこういったものも中の方に入れてあげます。そしたら、今重ね順がテキストとかボタンの上に来てしまってるので1回レイヤーを開けます。それでですね、どこに入ってるかなと探すと「Header」の所に入ってますね。そしたらこれを「Content」の方に移動させてきてこれを更にどんどんどんどん下の方に持っていきます。そうすると、この様にテキストとかボタンの下に持ってきてスライドショーの上にこういったインターフェースや文字を載せるということもできます。 ではこれで画像を追加してみましょう。画像を全部選んで「開く」とします。そして「プレビュー」を実行してみるとこんな感じにですね。今時の Web サイトによくある感じでこのヘッダーのすぐ下の部分ですね。トップの所に大型のスライドショーを置いておくいろいろなサイトで行われてる手法ですがそんなのは、このスライドショーウィジェットを使うとかなり簡単にできます。下ではスライドショーが動いてるんですけどこの部分のテキストもきちんとテキストとして認識してますしこういったボタンも問題なく動作します。かなりビジュアル的にインパクトの強いものを簡単に作ることができます。一点注意としてスライドショーはWeb ページが読み込まれた時に画像を全部一緒に読み込みます。そして普通のこうした個々のパーツの画像よりもかなり大きい画像なので特にモバイルなんかで使ってる時にはダウンロードが遅くなってしまう可能性があります。あんまりいつまでもページが表示されないような状態ですとユーザーが他のページに行ってしまったりそうなってしまう危険もあるのであまりサイズの大きい画像を大量に入れるというのは避けた方が良いかなと思います。今回は8枚の画像でやってますけどこれもおそらく多めかもしれないので大体3、4枚ぐらいをマックスにしておくとビジュアル的なインパクトとファイル容量の軽さその両方のバランスが良くなってくるかなと思います。 非常にビジュアル的なインパクトでは大変有効な手段なので是非スライドショーを使ってみて下さい。

Muse (2015) 基本講座

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

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

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

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

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