Muse基本講座

ツールヒントの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスを重ねると詳細が表示されるツールヒントを使って、イラスト内でのマウス移動で説明が表示されるインターフェースを作成します。
講師:
05:22

字幕

このレッスンでは 「ツールヒント」について解説します それでは サンプルファイルの中の 「 My Workspace 」 ここに入ります そうすると こんな感じで 机の上のイラストが出ています 「ズームツール」を 75% 位にすると 全体が見えます これから作りたいものなのですが 例えば このタブレットの上に マウスを持ってくると タブレットの説明が表示される このスマートフォンの上に持ってくると スマートフォンの説明が表示されるという そういうインターフェースを 作ってみようと思います では「ウィジェットライブラリ」から 「コンポジション」の「ツールヒント」 これをドラッグ&ドロップで 適当な所に持っていきます そうすると こんな説明文の詳細と 丸が3つ出てきました これが「ツールヒント」というもので この丸の所にマウスを持っていくと これが表示されるのです それを応用すると面白いことができます やってみましょう 今回はタブレット スマートフォン キーボード マウス 4つの説明を作りたいと思います これは初期状態だと 説明文の数が3つです ですので「 + (プラス)」を押して もう1個作っておきましょう 4つ目はこれです 今 4つ目の説明文が こっちの方に来てしまっているので あらかじめ 持って来ましょう これを足していくと 説明文の表示場所が かなり ウィンドウの外などに 行ってしまう場合があるので これに気を付けてください それでは早速 作業をしましょう まず 1個目をクリックします そして これをドラッグ&ドロップしてきて タブレットのこの範囲を広げます そうすると これが べた塗りで隠れてしまうのですが これに「ステート」を表示します そうしたら この色を 全部の状態において 透明に切り替えます これで1個出来上がりです では 分かりやすいように ここに「タブレット」と書いておきましょう では2個目です 2個目をクリックすると切り替わります これをスマートフォンの所に持ってきて 範囲を広げて 説明文は毎回表示場所が変わってしまうので ここら辺に持って来ましょう では ここです 「ステート」で この様にして 全部 透明にします では この部分は 「スマートフォン」としておきましょう そうしたら また これをクリックして 今度はキーボードの所に持ってきて 全体を覆います この位置を変えて また こっちを 全部 透明にします そうしたら こちらの中身を 「キーボード」としておきましょう そうしたら 最後の1個です これをこっちに持ってきて マウスを覆うようにして これも「塗り」を全部 透明にします この「塗り」を透明にするという仕組みは 分かっていると なるほどな と思うのですけど この 「イラストの上にマウスを持ってきたら 説明が表示される」というものは 結構 見ている方は ビックリするんじゃないかな? と思います では 最後にこれです ここに「テキストツール」を使って まず 新しく作るときは この中にテキストのボックスを作ります そして ここに「マウス」と 改めて入れておきます 新たに加えたものは テキストボックスも何もないので そこに加えてください 最初に作られるものは テキストボックスがあらかじめあるのですが 新しく作るとそれは無くなるので そこに気を付けて 中身を作ってください では この状態で プレビューしてみましょう そうすると こんな感じになって マウスを持ってくると表示されたり タブレットの説明 スマートフォンの説明 こんな風に表示されます 今 ちょっと画面が狭いので 上の方が隠れてしまっていますけども これで もし こういった不都合がある場合には こうした「ツールヒント」の位置を もっと下の方のエリアの近くにすると 安全です 通常 大体 Web サイトを表示する時は これより縦幅が長いので 大丈夫だと思うのですが もし 心配な時には そうした対策も行ってください

Muse基本講座

Adobe MuseはHTMLやCSSといった専門知識がなくても、IllustratorやInDesignを使うような感覚で手軽にWebサイトをデザインできるソフトです。このコースではMuseを使ってページに文章や写真をレイアウトするやり方やグラフィックの作成、モバイル機器に対応したサイトの作成方法などについて学習します。

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

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

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

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