addthis

2015年12月2日水曜日

【使い方様々】レストラン、バンド、ビジネスなどに使えるAdobe MUSEテンプレート



こんにちは!!

本日は最近見つけたおすすめのAdobe Museのテンプレートをご紹介します。
海外のサイトになりますが、私もよく使っているサイトですので怪しいサイトではありません笑

1.SKYWELL



まず最初ですが、いきなり最強のテンプレートをご紹介しちゃいます。
こちらはSKYWELLというテンプレートなんですが、とにかくかっこいい!!便利!!やすい!と三拍子揃ってるテンプレートです。



画像を見ているだけでどれだけかっこいいデザインかはお分かりいただけるかと思います。独自のCSSアニメーションやバックグラウンドビデオもサポート。ホバーエフェクトなんて鳥肌ものの格好よさです!

クールな感じですので、コーポレートサイトやサービス紹介、お店の紹介なんかにも使えると思います。

本当に色々使えるテンプレだと思いますので、持っていて損はないでしょう。



2.KUBE


これちょっとバンドとかDJとか何かしら芸術活動している方におすすめ!
活動にWEBサイトは欠かせないと思いますし、でもわざわざHTMLなんか覚えるのに時間を使うならスクラッチの技術を磨いたほうが全然マシと思うので、MUSEでサクッと簡単にクールなサイトを作ってしまいましょう。





LIVEの写真ギャラリーとか本当かっこいいですね。
もちろんSOUNDCLOUDも埋め込めますし、YouTubeの動画もサクッと埋め込めちゃいますよ!



3.SERENA


こちらはベーカリーとか、おしゃれなカフェ、あるいはレストランとか飲食業向けの天雨レートですね。上の画像はベーカリーですが、めちゃくちゃ美味しそうで本当にカリフォルニアまで飛んで行きたくなりますね。





やっぱりWEBサイトが綺麗なお店って食事も美味しいんだろうなって思っちゃいますよね。個人的には飲食店てあまりWEBサイトにこだわってないお店が多いと思いますので、ここでちょっとクールなサイト作っちゃえば、他店との差別化も図れますね。

え??サイトなんかより食べログにサクラ投稿した方が効果的だって??
そんな悲しいこと言わないで、ちょっと見て行ってくださいよ。


今回は使用用途の異なるテンプレートをご紹介させていただきました。
業界によってこんなに雰囲気も違ってくるんですね。
これらテンプレートは有料なので、もちろんクオリティは高いです。
買わなくても見ているだけで勉強になりますね。
ぜひぜひご覧いただければと思います。


私が運営しているAdobe MUSEの総合情報サイト「Made with Muse」もよろしくお願い致します。



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




2015年8月2日日曜日

Adobe Museで使えるウィジェットやテンプレートの宝庫「Muse-Themes」をご紹介






久しぶりの更新になります!
今回ご紹介したいのは、私がMuseを始めたばかりの時にお世話になったアメリカのサイト「MUSE-THEMES」さん。



こちらのサイトでは無料・有料のウィジェットやテンプレートがたくさん掲載されておりまして、私がMuseを使い始めた2年くらい前には大変お世話になりました。

日本語の情報もほとんどなかったもんですから、このサイトで掲載されているテンプレートをダウンロードして勉強したり、ブログを読んでやり方を覚えたりと、とにかく役に立ったのです。

一番利用頻度が高かったのはウィジェットで、掲載数も一番多いかと思います。


↑背景をビデオにするウィジェット


↑こちらはサイドバーにメニューを置けるウィジェト。
選択されていない時はもちろん表示されないです。
メニューを選択すると横からスッと出てきます。


こちらはモバイルサイトを作るには欠かせない
モバイル用のメニューウィジェット。
モバイルは画面が狭いですから、こういうスタイリッシュな
ウィジェットを使ってスッキリしたサイトを作りたいですね。


サイト自体は無料のコンテンツもありますが、会員登録することにより有料のテンプレートやウィジェットがダウンロードし放題になります!

お値段も年間で$75だったかな?毎月600円程度の金額で、このクオリティのコンテンツを使えるのですから、安い買い物でしょう。

自分で一から作るよりも、ウィジェットを活用することにより遥かに早く、かっこいいサイトを制作することができますので、お急ぎの方や、早急にサイトのレベルアップを図りたい方は検討してみていはいかがでしょうか?

サイトは↓のリンクから

Muse-Themes










2015年3月15日日曜日

Adobe Museで作ったサイトにAddThisを使ってSNSシェアボタンを埋め込みアクセスアップ!






こんにちは!

今日はサイトを制作した後に、どうやって自分のサイトの存在を世の中にアピールして行くか?という疑問を解決する便利なツールをご紹介します!

その方法は「SNSでユーザーに自分のサイトを広めてもらう」です。

ユーザーさんがこの記事をシェアしたい!と思わせるような魅力的な記事を書くことも大事なんですが、シェアし易いようなサイト構成を作っておくことも大事であります。

でもツイッターとかフェイスブックのボタンをいちいち埋め込むのって結構面倒ですし、よくわからないですよね!

ここでご紹介したいのがこのツール




AddThisというツールであります!
こちらは無料と有料がありますが、無料で充分すぎる機能を持っています。

こちらは登録してコードを埋め込んでしまえば、自動的に世界中のSNSのシェアボタンを表示してくれる優れものです。

ツイッターやフェイスブックなどのメジャーなものはもちろん、「はてな」や「LinkedIn」などちょっとマイナーなものまで取り揃えています。
ユーザーが普段使っているSNSのシェアボタンを自動的に分析して表示されるので、更新の手間もかかりません。

このブログの左についている、


こういうボタンや

私のサイト「Made with Muse」で使っている



自動的に記事をレコメンドしてくれる機能など、たくさんのパターンが用意されています。

私のサイトのアクセス流入元の15%はすでに何らかのSNS経由となっており、馬鹿にできない量になっておりますので、皆様も是非SNS対策を強化していただいて、アクセスアップを狙ってみてください!

よろしくお願いいたします。

AddThisのサイトはこちらから
http://www.addthis.com/





2015年1月28日水曜日

Adobe MuseでPhotoshopを使わずにアイコンの色を変えてみる時短テクニック






こんにちは!

本日は画像の色を簡単に変更できるショートカット的な小技をご紹介します。




たとえば上のような画像があったとします。(カメラのシャッターのアイコンです)
これをサイトで使用しようと思った時、黒いままでは何か違う、青とか赤の方が自分のサイトに合うなと思った時、色を変えねばなりません。
でもアイコン一個の色を変えるためにわざわざphotoshop開くのも面倒だな…

という時に役に立つのが今回ご紹介する技でございます。
Museの機能だけで簡単に色を変更しちゃいましょう。


1. Museのページに画像を置いて選択しましたら、上部の「効果」をクリックします。
2. 3つある四角の一番右側の「光彩」を選択します。
3. 「光彩」と「光彩(内側)」のチェックボックスをオンにします。
4. 「不透明度」は100%に、ぼかしは大きい数字(今回は100)に設定します。
5. 最後にカラーを好きな色に変更します。



すると、あら不思議!
アイコンの色が青に変更になりました!

この技を活用することで、わざわざphotoshopを開いて色を変えて書き出して、みたいな作業をカットすることができ、スムーズにサイト制作を進められて便利です!

ぜひ使ってみてください。
よろしくお願いします。

また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。





2015年1月25日日曜日

Adobe Museの無料ロールオーバーウィジェットでボタンにオシャレなエフェクトをつける






こんにちは!

今日は無料で手に入る便利なウィジェットをご紹介します。

今回ご紹介するには、ボタンにカーソルを合わせた時にフワッとエフェクトがついて、
オシャレにボタンの色を変化させたりできる便利なウィジェットです!

言葉で説明しても上手く言えませんので、まずは自分が作成してみたサンプルをご覧ください。

サンプルページ
http://www.madewithmuse.net/rollover-widget.html

サンプルページのボタンにカーソルを合わせて頂くとわかるのですが、従来のステートボタンは一瞬で色が切り替わりますが、今回のウィジェットを使うことで、フワッと変化するように変更できています。

なんだか今風で嬉しいですよね!

やり方はめちゃくちゃ簡単でして、ダウンロードしたウィジェットをエフェクトさせたい箇所があるページに置くだけ。




このようにウィジェットを設置するだけです。
変化する速度と、4種類のエフェクトスタイルが選べます!

一点だけ注意ですが、このウィジェットを置いてしまうと、置いたページにあるステートボタンの全てにエフェクトがかかってしまうようです。

詳しい使い方などは、ダウンロード先のMuseResourceさんに動画がありますので、見てみてください!

ダウンロード

こういうちょっとしたボタンの変化にもこだわりを持っているサイトって素敵ですよね!
ぜひ使いこなしてみてください。

よろしくお願いします。