addthis

2015年9月25日金曜日

Adobe Museの自動ライトボックス機能で映画の公式サイトのような演出を作る。






こんにちは!

今日はAdobe Museの2015年のアップデートで加わった機能についてご紹介したいと思います。

誰も気がついてないような機能なのですが、これがちょっと便利なのです。

みなさんは映画の公式サイトにアクセスした時にいきなり動画が出てきて、再生されるプロモーションムービーに見入ってしまうことはありませんか?

↓こういうサイトの事です!
http://shingeki.tv/movie/

巷ではポップアップ広告とか呼ばれているこの機能(正式名称はわかりません)
Museでも簡単にできちゃいます!

やり方はいたって簡単

①ポップアップを表示させたいページにウィジェットを入れる。


こんな感じです。
使用するウィジェットは「コンポジション」→「ライトボックス表示」になります。



左上に3つ小さいボックス(トリガー)がありますが、1個しか使いませんので削除します。パーツの「次へ」「前へ」も使いませんので削除、下に表示されていたテキストも削除しましょう。ここで「自動ライトボックス」にチェックを入れてください。

②YOUTUBEウィジェットをライトボックスに入れる。


 次にYOUTUBEのウィジェットを画像のようにこのライトボックスの中に入れてしまいます。1個だけ残したトリガーは透明に変更しておきます。


使用したいビデオのIDを入れて、お好みの設定に変更し「自動再生」にチェックを入れます。


背景の色を変えて、閉じるボタンもお好みで色やサイズを変えましょう。
以上で設定は完了です!


サイトを開くとあら不思議!
まるで映画の公式サイトのようにいきなりビデオが流れ始めました!

今回は動画でご紹介しましたが使い道は様々です。
「プッシュしたいキャンペーンのバナー」を表示させても良いと思いますし、「メルマガの登録フォーム」を表示させて会員登録促進の手段として使うもの良いと思います!
やれることが増えると色々夢が広がりますね!!

是非ご活用いただければ幸いです。

私が運営しているサイト「Made with Muse」にはAdobe MuseのTIPSを掲載しています。
是非ご覧いただければ幸いです!

Made with Muse


2015年9月16日水曜日

無料!本をめくるようなエフェクトのAdobe Museギャラリーウィジェット






こんにちは!

本日も海の向こうで見つけたお得な情報をお届けします!

おそらくヨーロッパあたりのサイトだと思うのですが、Adobe Museの素材を販売しているようで最近オープンしたみたいです。

コンテンツの充実度はまだまだみたいですが、無料で配布されているギャラリーウィジェットが面白かったのでご紹介させていただきます。


サイト名は「Widgets for Muse」という直球ズバリなネーミング!
こちらの無料コーナーで配布されているウィジェットに今回は注目です。


PageFlipという名前のウィジェットでして、ボタンを押すとページをめくるようなエフェクトで画像をスライドさせることが可能な優れもの。


こちらはSkill Barというウィジェット。
ポートフォリオサイトなのでよく見かける自分のスキルバーをアニメーションで作成できる優れもの。フォントやバーの色は変更できますので自分のサイトの雰囲気に合わせてカスタマイズ可能です。

まだ出来たばかりのサイトのようですが、Museユーザーには今後要注目なサイトとなりそうです。

↓今回ご紹介したサイトはこちらからご覧ください。


私が運営しているサイト「Made with Muse」にはAdobe MuseのTIPSを掲載しています。
是非ご覧いただければ幸いです!

Made with Muse







Adobe Museでスマホサイトのヘッダーを固定する方法






こんにちは!

今日は珍しく役に立つ記事を書いてみたいと思います!

最近質問されることが多いのですが、「サイトのヘッダーを動かないように固定したい!」と困っている方が多い様です。

PCサイトであれば「上の方に固定ボタンがあるよー」とお伝えして終わりなんですが、スマホサイトに関してはなぜかこの固定ボタンではヘッダーが固定されません。。。。

なので今回ご紹介するのは、「スマホサイトのヘッダーを固定する方法!」です。

やり方はいたって簡単

①ヘッダーを全選択します。固定させたい部分を残らず選択しましょう。



こんな感じですね。

②選択したら右側の「スクロール効果」をクリックします


「モーション」にチェックを入れて、「初期モーション」の値を0、下の凸凹マークみたいのも0、「最終モーション」の値も0に設定します。

すると、あら不思議!
スマホサイトでもヘッダーがばっちり固定されています!

縦長なスマホサイトだからこそいちいち上に戻るのは面倒なこと。
固定ヘッダーを活用してユーザービリティアップを目指しましょう!

私が運営しているサイト「Made with Muse」にはAdobe MuseのTIPSを掲載しています。
是非ご覧いただければ幸いです!

Made with Muse