Muse (2015) 基本講座

パネルウィジェット

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
タブの切り替えなどで効率よく情報を見せられるパネル系ウィジェットの機能を、About usページの改変を例に解説します。
講師:
10:50

字幕

このレッスンではパネル系ウィジェットの動作について解説します。それでは Contact Us のスペースを使って「ウィジェットライブラリ」のパネルの中に入っている項目ですね。動作を見てみましょう。まずこの「アコーディオン」という奴をドラッグ&ドロップしてプレビューしてみるとこの様に見出しをクリックするごとにその内容がスライドして出てくるとこんな動作をしています。また、もう1個の「タブ付きパネル」これはどんな動作かというとクリックすることでタブが切り替わって違う内容が見れるとこの様な動作となっています。コンポジション系ともちょっと似たような感じですね。では、これを使ってこの About Us のページここの内容なんですけどちょっと小さくしてみると今4人分のプロフィールが並んでます。これを、この「タブ付きパネル」に纏めてみましょう。ではこの「タブ付きパネル」ドラッグ&ドロップでこの外側でいいので持ってきます。そしたら1回こっちは小さくしておきましょう。この「タブ付きパネル」標準だと3つしか項目がないですけど選択されてる状態で、こっちの+をクリックするとタブを増やせます。これで4人分入りますね。 そして、このタブをクリックするごとに内容が切り替わります。では、1回クリックして全体が選ばれてる状態で更にそれぞれの画像であるとか文章をクリックすると選ばれるのでDelete してこの様に内容を空っぽにしておきましょう。複数回クリックが発生するのでこのハンドルが出てるかどうか選択があたってるかどうかを見極めながら操作して下さい。サイズをちょっと大きめにとってきましょう。1回こっちと合わせてみると例えば、元よりは小さいけどそこそこの大きさになるこんなぐらいでしょうか。これぐらいにしておいてみましょう。ではまず一番左のタブここに移動して、まず1ページ作ってみましょう。では、このアンディさんの写真これをドラッグ&ドロップでこっちに持ってきます。そうすると、この中に入ります。そしたら、この中で複数回クリックすると写真だけを選択できるのでサイズをちょっと縮めましょう。適当なサイズに縮めてこんな感じですね、配置します。そしたら、この置く位置ちょっとわかりづらいので写真だけを選択したらこっちの端っこにぴったりくっつくところまで持っていってカーソルキーで移動ができます。例えば1 2 3 4 5 6 7 8 9 101 2 3 4 5 6 7 8 9 20 回動かすと、こんな位置ですね。 縦も同じく 20 回動かしましょう。10 回の20 回とこれで位置の基準が大体わかりました。そしたら、これを基準として他のタブにも他の人の写真を入れていきましょう。じゃあ1回このマリアさんをこっちに持ってきます。そして、このアンディさんと揃えて大きさを揃えてやれば全く一緒になります。これでタブを切り替えて入れてやるそんな方法もあります。または、もう少しきちんとやるのであれば今アンディさんの写真を選んでますけどこれで「サイズ変更」という所クリックすると幅が 289 の、高さ 288 と数字が出てます。これと同じ数字にすれば同じサイズになるので他の人の写真、選んで「サイズ変更」で289 と入れてやってこの鎖がオンになってれば縦横一緒になります。誤差で 1pixel ぐらい少なく出ることもありますけど事実上、全く一緒と思って大丈夫です。全員の写真を同じサイズに揃えます。こうしておけば、あとはタブを切り替えてそれぞれの写真を持ってきてさっきの通りこの左上にスナップをさせたら20 回ずつこの様に位置を合わせてやるとこうすることで同じ位置に持ってこれます。もう1つですね。同じくこの様に位置が合いました。 これで4人分の写真を入れることができました。次に、テキストを持ってきましょう。では、このテキストをドラッグ&ドロップで同じように持ってきます。そして、これ元が白なので見えなくなってしまいましたね。そんな時にはこのタブの中の背景ここをクリックすると塗りが選べます。塗りを開けてポイントで元の背景を拾ってやれば同じ色になります。そしたらこれですね。写真と同じ高さにしておいてちょっとスペースを空けてこんな感じで全体の大きさを整えてやると1人分できましたね。では、同じような要領で他のタブも作業します。高さを写真と揃えておきます。それでですね、テキストの色が違うのでこれはテキストの項目でカラーを揃えておきます。では次のタブも同じように持ってきて同様に高さを揃えておきます。こういった作業例えば1つのページを完全に変えてしまってもいいですけど全体のプランのページでページを複製できるので複製して試しに別のバリエーションを作ってみるとそんなことも可能ですね。では、テキストカラーを白に揃えてこれで4人分できました。ではこちら側の内容を1回消してしまってパネルを持っていきます。そして、動作をプレビューで見てみましょう。 そうすると、こんな感じで切り替えで見れるようになっています。では、今度はズームして仕上げとして更に色を合わせていきましょう。このですね、このそれぞれのタブを単体で選んでるとこの様にこっちもステートの設定ができます。では通常時ここで塗りを変えてみましょう。では、ライブラリの中の「カラーテーマ」からこの濃い色にしてみましょう。これちょっと濃すぎるかなという時には一段薄くしてみます。そして、この文字も「ラベル」という状態になりますのでこれで色をテキストの所で変えてやるといまグレーになってるのを白にするとそういった変更が行えます。そしたら、この「アクティブ」のタブの時は塗りを黒とかにしてやると今選ばれてる所その状態がわかります。この様にしてカラーも他の部分と揃えていって最終的にページのデザインに合致したものを作ることができます。こうしたパネルをうまく活用すればあまりユーザーに無駄なスクロールをさせることなく効率よく情報を見せることができるので是非とも試してみて下さい。

Muse (2015) 基本講座

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

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

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

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

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