Muse Widgets

Museで再利用・配布可能なナビゲーションメニューをつくろう!

Creative Edge School Books Webcast

ライトボックスのナビゲーションメニュー(ページ全体が暗くなり中央にメニューが表示される)を作成します。

対象者:

  • Museをすでに使用していて、作業をもっと効率化したいと考えている人
  • Museのウィジェットライブラリに興味がある人
  • この学習コンテンツで作成するオリジナルのナビゲーションメニュー(ライトボックス・オーバーレイ)を自分のサイトで使いたいと思っている人
  • Museの自動化の仕組みに関心があり、大まかに把握したいと思っている人

達成目標:

  • ウィジェットライブラリとは何か理解できること
  • 使用頻度の高いWebページの「部品」を使うメリットについて理解できること
  • ウィジェットライブラリの構造を理解できること
  • ウィジェットライブラリを組み合わせてオリジナルのライブラリを作成する方法を習得すること
  • Museライブラリの書き出し、読み込みを実行できること
  • 組み込んだMuseライブラリを自分のWebページの仕様にあわせて調整できること

Curriculum

Introduction解説動画のスクリーンショット

Introduction

[解説]Museで再利用・配布可能なナビゲーションメニューをつくろう!

再生時間:10分09秒

オリジナルのナビゲーションメニュー(ライブラリ)をMuseにインストールする方法、Webサイトに組み込む方法、カスタマイズする方法など解説します。Introductionは講義です。

※パソコンを使ったレッスンはありません。

視聴する

Step-00解説動画のスクリーンショット

Step-00

[解説]ウィジェットライブラリの構造とカスタマイズ方法を理解しておこう!

再生時間:10分17秒

オリジナルのナビゲーションメニューは、Museに搭載されているウィジェットライブラリを組み合わせて作成します。Museのウィジェットライブラリは、まず「コンテナ」と呼ばれる部品があり、その中に「ターゲット」部品、さらにその中にメニューなどの部品を置くという階層構造になっています。この階層構造は、レイヤーパネルで簡単に操作することができますので、難しい作業ではありません。

※Step-00は講義です、パソコンを使ったレッスンはありません。

Step-01解説動画のスクリーンショット

Step-01

基本ページを作成する

再生時間:4分09秒

Step-01からStep-10までは実習です。ダウンロードした素材データをデスクトップに置いておきましょう。まず、オリジナルナビゲーションメニューを作業するため基本ページを作成します。プランの画面で「新着情報」「サービス」「お問い合わせ」の3つのページを作成しておきます。各ページには、ページタイトルのみ追加します。

完成データ:Step-01.muse

Step-02解説動画のスクリーンショット

Step-02

垂直方向メニューを設定する

再生時間:2分21秒

マスターページにウィジェットライブラリの「垂直方向メニュー」を配置します。垂直方向メニューには、「新着情報」「サービス」「お問い合わせ」の3つのリンクボタン(メニュー項目)が自動的に作成されています。メニュー項目のフォント設定を変更します。

完成データ:Step-02.muse

Step-03解説動画のスクリーンショット

Step-03

ライトボックスを設置する

再生時間:5分01秒

マスターページにウィジェットライブラリの「コンポジション」→「ライトボックス表示」を配置します。ライトボックスの不必要なパーツを非表示、もしくは削除していきます。このライトボックスの中に、「垂直方向メニュー」を組み込みますので、ライトボックスの大きさを(メニューのサイズにあわせて)変更します。

完成データ:Step-03.muse

Step-04解説動画のスクリーンショット

Step-04

メニューバーを配置する

再生時間:4分24秒

垂直方向メニューをライトボックスの中にドラッグして組み込みます。ドラッグすると青い枠線が表示され、自動的に中央に配置されます。続けて、マスターページの最上部にメニューバー(ナビゲーションバー)を配置します。長方形ツールを使って矩形を描き、ドラッグ配置するだけの簡単な作業です。このメニューバーの右端にライトボックスを配置します。

完成データ:Step-04.muse

Step-05解説動画のスクリーンショット

Step-05

マウスアクションのスタイルを指定する

再生時間:5分42秒

ライトボックスに組み込んだ「垂直方向メニュー」のアクション「通常」「ロールオーバー」「マウスダウン」「アクティブ」を設定します。ロールオーバーはマウスカーソルが重なったときの表示、マウスダウンはクリックしたときの表示です。アクティブでは文字色の彩度が下げます。例えば、新着情報のページが表示されているときは、メニュー項目の「新着情報」の文字色は暗くなっています。

完成データ:Step-05.muse

Step-06解説動画のスクリーンショット

Step-06

ハンバーガーアイコンとクローズアイコンを配置する

再生時間:4分06秒

ライトボックスの「トリガー」(クリックしてメニューを表示・非表示する部分)内に、ハンバーガーアイコンを配置します。また、メニューを展開したときに表示されるクローズアイコンも配置します。この2つのアイコンは解像度に依存しないSVG形式のファイルになっています。

完成データ:Step-06.muse

Step-07解説動画のスクリーンショット

Step-07

ナビゲーションバーをページの最上部に固定する

再生時間:5分52秒

ページをスクロールしても、ナビゲーションバーが常に最上部に表示されるように固定します。アプリケーションバーの「固定」から位置を選択するだけの作業です。

完成データ:Step-07.muse

Step-08解説動画のスクリーンショット

Step-08

ロールオーバーのエフェクトを設定する

再生時間:2分07秒

メニュー項目にマウスカーソルが重なったときに実行される0.5秒程度のフェード効果を設定します。メニュー項目にマウスカーソルをあわせると、スッとオーバーラップするように色が変わります。

完成データ:Step-08.muse

Step-09解説動画のスクリーンショット

Step-09

ページのファイル名を指定する

再生時間:2分01秒

プラン画面でトップページ以外のHTMLファイル名を変更します。トップページはデフォルトで「index.html」になっていますが、他のページはタイトル(日本語)がページ名になっていますので、半角英数字の名前に変更します。

※Museからパブリッシュする場合は必要のない作業ですが、Museから「HTMLを書き出してFTP」する際、トラブルになることがありますので念のために変更しておきます。本来は不必要な作業です。

完成データ:Step-09.muse

Step-10解説動画のスクリーンショット

Step-10

Museライブラリとして書き出す

再生時間:8分00秒

作成したナビゲーションメニューをMuseライブラリに変換、書き出します。Museライブラリは「.mulib」という拡張子がつきます。このMuseライブラリは自由に配布することができます。受け取った人は、Museライブラリのアイコンをダブルクリックするだけで、Museに組み込むことができます。

Step-10では、ライブラリを組み込んだ後のカスタマイズまで学習します。

完成データ:Step-10.muse

Payment

この学習コンテンツは、動画12本・64分で構成されており、スモールステップで詳細に解説しています。また、一人出版社では、動画コンテンツに最大400%まで拡大表示する「エクストリームズーム」を採用していますので、スマートフォンでもメニュー項目や小さな文字などを読むことができます。

※Webcast(ライブ配信)のアーカイブです。教材として制作されたものではありません。イントロダクションが視聴できますので、ご購入される前にご覧になってください。

 

本商品は、PayPal(クレジットカード含む)で購入することができます。

※銀行振込をご希望の方は[ebookcast@gmail.com]までお知らせください。

 

こちらでは購入者の個人情報を取得しませんので、IDやパスワードが記載されているページのリンクは、PayPalの決済完了ページに表示されます(IDパスワードをお知らせするメールは届きません)。

購入ページに詳しく書かれています。

 

※「Muse導入ガイド[中級編]コンプリート版」の購入者には無償提供しています。購入者ページで視聴できます。

総再生時間:64分

学習形式:講座ビデオ

付属(ダウンロード提供):レッスンデータ/完成データ

価格:600円(税込)

購入方法:PayPal(クレジットカード含む)/銀行振込にも対応可

リリース日:2017年2月19日

購入ページへ

クリックすると購入ページに移動します

ホームに戻る

Creative Edge School Books Webcast

© Creative Edge School Books 2015

ライトボックスのナビゲーションメニュー(ページ全体が暗くなり中央にメニューが表示される)を作成します。
Introduction解説動画のスクリーンショット
Step-00解説動画のスクリーンショット
Step-01解説動画のスクリーンショット
Step-02解説動画のスクリーンショット
Step-03解説動画のスクリーンショット
Step-04解説動画のスクリーンショット
Step-05解説動画のスクリーンショット
Step-06解説動画のスクリーンショット
Step-07解説動画のスクリーンショット
Step-08解説動画のスクリーンショット
Step-09解説動画のスクリーンショット
Step-10解説動画のスクリーンショット

ライトボックスのナビゲーションメニュー(ページ全体が暗くなり中央にメニューが表示される)を作成します。
Introduction解説動画のスクリーンショット
Step-00解説動画のスクリーンショット
Step-01解説動画のスクリーンショット
Step-02解説動画のスクリーンショット
Step-03解説動画のスクリーンショット
Step-04解説動画のスクリーンショット
Step-05解説動画のスクリーンショット
Step-06解説動画のスクリーンショット
Step-07解説動画のスクリーンショット
Step-08解説動画のスクリーンショット
Step-09解説動画のスクリーンショット
Step-10解説動画のスクリーンショット