Muse (2015) 基本講座

コンポジションウィジェット

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
限られたスペースの内容を操作により切り替えて、複数の画像やテキストを効率的に見せることのできるコンポジション系のウィジェットについて解説します。
講師:
07:48

字幕

このレッスンではコンポジションウィジェットの機能について解説します。それではページの中で比較的スペースの空いてる Contact Us のページを使ってウィジェットの説明を行います。では、この「コンポジション」の項目に入ってるものですね。「コンポジション」の項目に入っているものはグラフィックや文章などを複合的に切り替えて表示できるタイプのウィジェットが入っています。それではまず分かりやすいものとして「特集記事」これをドラッグ&ドロップでページの中に持ってきてみましょう。そうすると、こんなインターフェースが出てきます。では、まずこれプレビューでどんな感じか見てみましょう。プレビューしてみるとこの様なものが出てきて左側のメニューですねここにマウスを重ねると右側の写真と文章も切り替わるとこの様な動作になっています。こうして文章や写真を1個のスペースの中でも切り替えて効率よく見せることができるそれがコンポジションウィジェットです。こちらも1回クリックすると全体が選択状態になってそして、このオプションが出てきます。さっきマウスを重ねると内容は変わってましたが例えば「ターゲットを表示」というのを「クリック時」にしてみると見た目は一緒ですがマウスを持っていっただけでは切り替わらなくてクリックすると切り替わるようになってます。 この方がわかりやすいですね。ウィジェットはもちろん中身を大幅にカスタマイズすることができます。例えばもちろんテキストや写真なんかはこれらをダブルクリックすることでエディット状態に入って内容を打ち変えたりですとか画像を入れ替えたりといった操作が可能です。こちらのボタンの方ももちろんこの様にテキストの内容を変えられます。現在、このボタンとページは3つになっていますがダブルクリックして、このボタンが選択状態にある時にこの+のボタンをクリックすると新たに追加されます。新たに追加された所には何もないですけど例えばこっちのボタンのラベルなんかは他の所のラベルを選択してる状態でCommand もしくは Ctrl を押しながらC を押してコピーしてそしたらこっち側を選択してる時にV でCommand もしくは Ctrl+V でペーストすればこの様に貼り付けられます。そして、適宜直せば OK ですね。また、中身のコンテンツもダブルクリックすることで選ぶことが出来るのでCommand もしくは Ctrl+C でコピーしてそしてこちらの何もない所にペーストしてやればこの様に入れることができます。位置もそれぞれ自由に変えることができます。 この様に増やしてやれば、項目をより増やしてやって内容をカスタマイズすることができます。こうした個々のボタンのレイアウトなんかは単体で選ばせてるものですね、ドラッグで動かすことでレイアウトを変えられるので好きなレイアウトで作ることができます。では1回これを選んで Delete して消してしまいましょう。他のコンポジションウィジェットを見てみましょう。例えば「ツールヒント」なんてのがあるんですけどドラッグ&ドロップで持ってくるとこの部分、特集記事と同じ内容が入ってますけどこっちにあるもの、丸い所これをクリックするとそれぞれの別の所に切り替わるようになってます。これどんな動作するかというとプレビューしてみると普段は何も出てないですがこの丸の所にマウスが来るとこの様に表示されるというわけですね。なので、今これ並んでますけどそれぞれのこの丸をダブルクリックして個別選択して、この様に好きな場所に持っていくこともできます。合わせて、この中身も移すことができるのでこんな感じにしておけば例えばこの後ろに写真を貼っておいてそれぞれ部分ごとに説明を行う時なんかこれを、この様にマウスを合わせれば説明が表示されるとこの様な使い方が出来ます。 その他「プレゼンテーション」なんていうのがありますけどこれはちょっとこのインターフェースが大きくなっていてやはり3枚のスライドが出ているような状態になってます。これプレビューしてみるとそれぞれ、クリックすることでこの様に切り替えるといった様な使い方が可能です。そして例えば似たようなものなんですけど「ライトボックス表示」なんてのもあります。じゃこれをプレビューしてみるとライトボックスの場合にはクリックした時点でこの様に画面の他の部分が黒く落ち込んでその中で写真を切り替えて見ることができると写真なんかは特に印象的に見せたい時便利ですね。この様なものもあります。例えばこういったものをもっと根本からデザインしたい時にはこの空白とかを使って細かく自分で作り込んでいくということも可能です。Web ページ上、たくさんの情報を載せたくてもあまりたくさんの要素を一遍に並べてしまうとごちゃごちゃしますがこのコンポジション系のウィジェットをうまく使ってやると限られたスペースを生かして限られたスペースの中でもその中で複数の情報をこの様にユーザーに見せることができます。こういったものも0から組み立てるとかなり大変ですがMuse であれば、この様に元となる部品をドラッグ&ドロップして、文章とか写真とかあとレイヤー等ちょっと変えれば使えるという、大変手軽になっています。 是非、たくさんの情報を載せたい場合にはこういったものを活用して下さい。

Muse (2015) 基本講座

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

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

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

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

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