addthis

2014年11月10日月曜日

Adobe Museで使える、フラットデザインによく合うオシャレな無料コンタクトフォーム






こんにちは!

今日は自分がMuseの中で最も気に入っているといってもいいウィジェットである「コンタクトフォーム」についてです。

やはりサイトを制作したとしても、見てくれている人からの反応が欲しいもの。
通常のサイトであればPHPを書いて設置する必要がありますが、Museは最初からウィジェットが入っていおりますので、ドラッグ&ドロップで簡単に設置できます。

コンタクトフォームももちろん色々デザインを変更することが可能です。
今回はフォームのデザインの際に参考になりそうなオシャレなコンタクトフォームを集めているサイトをご紹介します。


フラットなデザインに合うコンタクトフォーム

このようにフラットなデザインがとてもオシャレなテンプレートがダウンロードできるんです。


こちらはソーシャルボタンがついていて、とても格好良くまとまっています。
用事がなくても思わずお問い合わせしてしまうかも?? 


 黄色、黒、白がとても綺麗にまとまったフォームです。
パララックス系のサイトで一番下にこれがあったら思わずお問い合わせしてしまうかも??


こちらはシンプルなようで趣の深いデザイン。黒板のようですね。
少年少女時代を懐かしんで、思わずお問い合わせしてしまうかもしれません。

このようにお問い合わせフォームと言っても、ただ置いておくだけではなくて、デザインに一手間加えるだけで見違えるように変化しますね。
お客様に「なんかいいな、ここに問い合わせてみようかな?」と思わせるためにも、ちょっとオシャレなデザインのフォームを置いてみてはいかがでしょうか?

今回ご紹介したデザインは全て以下のページより無料でダウンロードできます。

MuseFree.com






2014年9月28日日曜日

Adobe Museで作ったサイトで自分のブログの更新情報を自動で表示させる方法






こんにちは

最近自分のホームページのTOPをリニューアルしまして、なかなか好評を頂き嬉しい限りです!

Made with Muse
ホームページはこちら

TOPページに自分の更新情報や他の方のMUSEに関するツイートなども自動で表示できるように変更しまして、大分更新が楽になりました!
今まではブログを更新するたびにMUSEのファイルを更新していたものですから…

また、「これっていったいどうやってるの??」という質問もいくつか頂戴しましたので、今回はこのやり方をご説明したいと思います。
ワードプレスみたいにブログの更新情報を自動で表示させる方法を探している方は多いみたいですね。

1、Rebel Mouseに登録しましょう

まずこの方法では「Rebel Mouse」というサービスを使用しております。


この可愛いネズミのロゴが目印です!
可愛い外見とは裏腹に、これがなかなか使えるサービスでして、ネット上のコンテンツを自動で収集して、日本で言う「まとめサイト」とか「キュレーションサービス」を作れる優れものなんです。



こちらがログイン画面になりますので、ここから新規登録をしてください。
有料プランもありますが、今の所無料プランで充分です。
全部英語なんですが、登録は簡単なんでご自身のプロフィールやサイト情報を入力してください。

2、自分のブログを登録しよう

登録が終了すると、ご自身のRebelMouseページが作成されます。
左側にメニューボタンがありますので、こちらをクリックしてください。
メニューが表示されますので、「Content Sources」を選択してください。
ここではご自身のRebelMouseページに表示させる「コンテンツの元ネタ」を登録します。




このようにブログの欄で自分のブログのRSS情報を入力します。
RSSが分かれば他人のブログでも大丈夫です。



他にツイッターも登録できます。表示させるユーザーを登録しましょう。
検索ワードでもOKです。




FacebookやInstagram、Linkedinなんかも登録できます。
画像にはありませんがYoutubeとかもあります。

「Publish On」という項目では表示方法を選ぶ事ができます。
「Post」を選択すると、自動で勝手に表示されます。私は自分のブログ更新情報はPostにしております。

「Save to Draft」に設定すると、関連するコンテンツは自動でドラフトページという所に一旦格納されます。格納されただけではまだ本番表示はされず、ドラフトページでこのコンテンツの表示を許可する事で始めて本番表示されます。
自分のサイトに掲載したくない関係ないツイートやブログ投稿などは自動表示されたくないと思いますので、一旦ドラフトに格納したほうがオススメです。

3、デザインを選ぼう

ブログの登録などが終わりましたら、次はデザインを選びます。

メニューの「Design」に移動して、




色々なデザインのレイアウトがありますので、気に入ったデザインを選択しましょう。


ちなみに私のデザインはこんな感じです。

4、Museのサイトに埋め込もう!!

ここまで出来上がりましたらほぼ完成です。
メニュー画面から「Embed」を選択します。



このページで埋め込み方を選択します。
いくつか項目がありますんもで、お好きなものを選択してください。
終わりましたら「Generate」をクリックします。



このようにHTMLコードが生成されますので、こちらをコピペします。
後はMuseのファイルを開いて、表示したい場所にこのHTMLコードを「オブジェクト」→「HTMLを挿入」から埋めこんでください。

このサービスが優れているのはレスポンシヴに対応しておりますので、お好きな大きさで表示するこができます。スマホのページにも埋め込むことができますよ!

ブログはRSSを取得したら表示されますので、投稿してから表示されるまでに多少時間がかかる事もありますが、とても便利なサービスですので、是非ご活用頂ければと思います。

今回ご紹介した「Rebel Mouse」は下記のURLから登録可能です。

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

それでは、またお会いしましょう。






2014年9月21日日曜日

無料のオリジナルAdobe Museテンプレート配信しております!







こんにちは!

先日からなんですが、「Made with Muse」オリジナルのAdobe Museテンプレート「PHOTOGRAPHER」を配信しております!

一応カメラマン向けに作成しましたが、色々な業種でお使い頂けると思います。
是非ともみなさまダウンロードしてみてくださいね。



見た目はこんな感じです。
トップは写真が目立つようにフルスクリーンのスライドショーを設置。


こちらは作品を展示する「ギャラリー」コーナーです。
ジャンルを変更する際にページをいちいち移動するのは面倒なので、
スライドショーで移動できるようにしました。



こちらは作品の詳細ページです。
スライドショーで画像が切り替わります。
作品が目立つようにシンプルに作成しました。



お問い合わせフォームも設置してあります。
これもいちいちお問い合わせページまでリンクするのも面倒ですので、
「contact」をクリックするとライトボックス風に画面に表示されます。



こちらはプロフィールを入れるページです。
ご自身の写真を入れるのがベストかと思います。
私は恥ずかしいので、鳥の写真です笑


いかがでしたでしょうか?
是非ともダウンロードして頂き、Museサイト作成の練習にお使いくださいませ。

こちらの無料テンプレートは下記サイトにて配信しております。

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

それでは、またお会いしましょう。






2014年9月17日水曜日

Adobe Museで使えるオシャレで無料のプリローダーウィジェット8種類!!






こんにちは

本日は、配信開始されたばかりだと噂の「プリローダーウィジェット」をご紹介します!

プリローダーとは、Webサイトを読み込んでいる間に画面の真ん中らへんでクルクル回っているアレです、アレ!!

最近のWebサイトは動画だのRETINAディスプレー対応画像だのどんどん高機能になっていますが、重いデーターが増えるにつれサイトの読み込みも重くなってしまいますよね。

そんな時に便利なのが、重いデーターを読み込んでいる最中に表示できるプリローダー。
凝ったデザインのプリローダーは見ているだけで飽きないですよね。

そんな、プリローダーが簡単にMuseで作ったサイトに表示できるようになるのが今回ご紹介する「プリローダーウィジェット」です。


こちらがご紹介するプリローダーです。
画像には4つしかありませんが、他にもあります。


こんなのとか


オシャレな円形とか


水玉的なデザイン?


これは定番のクルクル系

しかも、このウィジェットはサイズはもちろん、色や背景色、動作スピードなど細かい設定も行えてしまうんです!!

これで無料なんですから、たいしたもの。
是が非でもダウンロードして頂いて、この秋他のサイトに差をつけてみませんか?

今回ご紹介したウィジェットは下記のサイトからダウンロード可能です。

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

それでは、またお会いしましょう。




2014年9月13日土曜日

Adobe Museで作ったサイトにinstagramの写真を埋め込める無料ウィジェット






こんにちは

Adobe MuseにはTwitter、Facebook、Youtubeなど様々なソーシャルメディアと連携できるウィジェットが用意されております。

有名どころはもちろん、VimeoやPinterest、Paypalなんて日本ではちょっとマイナーな物まで用意されており充実していますよね。

しかし、なぜか「Instagram」だけは用意されておりません!


「Instagram」と言えば若者に大人気の写真共有サイトですし、簡単にオシャレな写真が撮影できるので若者を中心にたくさんのユーザーを抱える巨大プラットフォーム。

なぜだかMuseには「Instagram」の機能はついておりませんが、有名なMuseの素材配信サイト「QooQee」にて、ばっちり「Instagram」ウィジェットが配信されておりましたのでご紹介いたします。


こんな感じです。
こちらのサイト、とにかくオシャレです。

いつもデザインの参考にさせて頂こうと思い、見ているのですが、オシャレすぎて自分のセンスの無さが恥ずかしくなり、そっとパソコンを閉じます。



こちら結構細かくカスタマイズが可能です。
縦横の行数、表示される写真の最大数、もちろん写真自体のサイズなど
色々細かく設定できます。

このブログを書いている間に気がついたのですが、Web版のInstagramでも写真の埋め込み機能がありました!

写真の横に埋め込み用の「Embed」ボタンがあり、クリックすると表示されるHTMLをサイトに埋め込めるようです。

しかしこのやり方では写真を一枚一枚個別に埋め込んでいく必要がありますので、まとめてたくさん表示したい方は上記のウィジェットを使用する事をオススメいたします。

Instagramの写真はオシャレな雰囲気がありますので、サイトに埋め込んでおけば一気にオシャレなサイトが出来上がりそうですね!

こちらは下記のリンクよりダウンロード可能です。

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

それでは、またお会いしましょう。





2014年9月3日水曜日

Adobe Museで簡単にパスワード保護されたページを作る方法






こんにちは

本日はTwitterでご質問頂いた「パスワード保護されたページを作る方法」について書きたいと思います。


やり方としてはjavascriptを埋め込むだけなんですが、色々な方法があります。

Web初心者の方には分かりにくい内容だったり、ソースコードを見ればパスが分かってしまうようなやり方もありましたので、悩んだ末に一番シンプルな方法をご紹介させて頂きます。

1、まず「パスワードを入力するページ」と「正確なパスワードを入力すると表示されるページ」の2つを作成します。


図のように2ページ作りましょう。

「passwordprotected」というページが「パスワードを入力するページ」
「tokyo」と書いているのが「正確なパスワードを入力すると表示されるページ」

です。

ページ名は任意ですので、お好きな名前を付けてください。

ここで注意なのですが、

「正確なパスワードを入力すると表示されるページ」の名前(この場合はtokyo)は入力するパスワードと同じにしてください。

2、javascriptを挿入する

「パスワードを入力するページ」を開きます。


このようにお好きにデザインしてください。

次に「オブジェクト」から「HTMLを挿入する」を選び、


下記のコードをコピペして貼付けてください。

<!-- start GateKeeper code -->
<!-- http://www.HTMLisEasy.com/keeper/ -->
<form name="keeper" action="javascript:location.href =
window.document.keeper.page.value + '.html'" style="margin:0;">
<div style="display:inline;">
<input type="text" name="page">
<!-- <input type="submit" value="Go"> -->
<noscript><div style="display:inline;color:#ff0000;
background-color:#ffff66; font:normal 11px tahoma,sans-serif;">
<br>Javascript is required to access this<br>area. Yours seems
to be disabled.</div></noscript></div></form>
<!-- end GateKeeper code -->

すると下記のように白いボックスが表示されますのでお好きな場所に配置してください。
これがパスワード入力ボックスになります。


これで完成です。

3、秘密のページをサイトマップ、メニューから外す

次にプラン画面に戻ります。
秘密のページ(この場合はtokyoというページ)を右クリックし、ページプロパティを開きます。


「ページをsitemap.xmlに含める」のチェックを外します。
「メニューオプション」は「ページをメニューに含まない」に設定します。

これはgoogleなどの検索結果に秘密のページが表示されないように隠すために行います。

以上でパブリッシュして本番環境に移してみましょう。


上記のページを表示して、パスワードを入力してみてください。
(パスワードは「tokyo」です)

上手く行きましたでしょうか?
是非使ってみてくださいね。

パスワードを変更したい時は一緒にページの名前も変更してくださいね。

※注意
このやり方はセキュリティ的には高いとは言えませんので、大事なデーターや機密情報などが絡む場合は使用しないでください!これが原因で何か問題が起きても当方は責任は取れませんのでご了承くださいませ。自己責任でお使いくださいませ。

今回はこちらのサイトで紹介されているjavascriptを参考にさせて頂きました。

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

それでは、またお会いしましょう。




2014年9月2日火曜日

Adobe Museの「回り込み」機能で画像の周りに文章を回り込ませる方法






こんにちは!

本日はAdobe Museの「回り込み」機能の使い方をご説明したいと思います。

「回り込み」機能とは、読んで字の如く画像の周りに文章を回り込ませる機能です。
この機能を使えば長い文章があっても、効率的にスペースを使えるようになります。


まずは文章と画像を用意しましょう。
このままでもデザイン的に問題は無いのですが、画像の下に余白が出来てしまいちょっと寂しい感じがしますね。。。


回り込みのやり方ですが

1、まず画像を選択して、コピーまたはカットをします。

2、次にテキストボックスをダブルクリックして編集状態にし、画像を入れたい部分にカーソルを置いてください。

3、先ほどコピーした画像をコピーして貼付けてください。これで完了です。


このように画像回り込みが完成した状態になるはずです。
画像を選択し、サイズを変える事も出来ますしとても便利です。



回り込み機能を選択すれば、このように編集する画面が開きます。
上の3つのボタンで画像の位置を決める事が出来ます。(真ん中、左寄せ、右寄せ)
下の数値で画像を文章の間のスペース幅を上下左右決める事ができます。
初期設定では「0」になっておりますので、窮屈な感じです。
数値を増やして、余白を増やしておきましょう。

今回ご紹介したのは、いつもより細かい機能でしたが、覚えておくと便利です。
まだまだご紹介仕切れない程の機能がMuseにはありますので、がんばってコツコツご紹介して行きたいと思います。

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

それでは、またお会いしましょう。








2014年8月26日火曜日

Adobe Museで作ったWebサイトに無料でスマホ対応掲示板・フォーラムを作る方法






こんにちは!

連日の更新でノリにノっている管理人です!

毎日更新してよくネタが尽きないね?と言われますが、まだまだMuseの魅力を伝えきれておりません!
がんばって更新して参ります!

さて、今回は表題の通りMuseで作ったサイトに「掲示板・フォーラム」を設置する方法をご紹介いたします。

今までこういった質問はたくさん頂いておりましたが、やっと簡単かつお金のかからない方法を見つけましたので、この場を借りてシェアさせて頂きます。

それでは、早速ご紹介いたします。

1、無料の掲示板・フォーラム作成サービス「Muut」に登録しましょう。



「Muut」は海外のサービスなのですが、世界中の言語に対応しておりますので日本語での掲示板作成が可能です。
こちらに登録してください。「無料プラン」で大丈夫です。



掲示板のURLを記入していざ登録完了!!


2、掲示板を作成しよう





このような管理画面に行き着いたら、まずは最初は英語表記になっておりますので右の「setting」をクリックし言語を日本語に設定しましょう。



「Language」の所から日本語を選択してください。




すると日本語でちゃんと掲示板が作成されました!!!



ちょと自分で書き込んでみましょう!
適当に書いています(笑)



はい!Enterを押して投稿完了です!
めちゃくちゃ簡単ですね!

これで元となる掲示板は完成しました。
次はこの掲示板を使ってMuseで作成したサイト内にフォーラムを作ります。

3、Museのサイトに掲示板を埋め込もう!


いよいよMuseのサイトに掲示板を作る段階になりました。
まずはMuseでフォーラム用のページを作ってください。
私はシンプルに「forum」というページを作成しました。


先ほどの「Muut」の管理画面に行くと、右側に「Embed on your site」というリンクがございます。こちらをクリックしてください。



すると掲示板を埋め込むためのhtmlが表示されます。
こちらをコピペしましょう。



Museのフォーラムのページに戻って、
「オブジェクト」>「HTMLを挿入」をクリックしてコード挿入画面に先ほコピペしたhtmlを貼付けましょう。

ここで注意しなければならない事がございます。

コードをコピペした際は、
<script src="//cdn.muut.com/1/moot.min.js"></script>
となっておりますが、Museに挿入する際は、
<script src="//cdn.muut.com/1/moot.ja.min.js"></script>
として、「ja」を追記してください。

この「ja」とは日本語表記するために必要で、これが無いまま埋め込んでしまいますと英語の掲示板になってしまい、我々日本人には解読不能な掲示板が出来上がってしまいますので、ユーザー様のためにも日本語へ変換するようお願いいたします。


htmlを無事挿入したら、ボックスを任意の横幅まで広げましょう。
私は両端いっぱいまで広げてみました。
こちら横幅をモバイルに合わせればモバイル用の掲示板が自動で表示されます。
便利!!!スマホページで是非ご活用ください。

準備は出来ましたか?
これで完了です。
サーバーにアップロード!!!

Made with Museユーザーフォーラム


このようなフォーラムが完成しました!
上のリンクからご覧ください!

私のサイトもついに掲示板が出来上がりまして、貧相だったコンテンツも一気に充実したような気分になりますね!
みなさま是非ともお気軽に書き込んでくださいね!
メルアド登録以外にもfacebookかGoogle+でも登録可能です!

そして今回ご紹介させて頂いて掲示板作成サービスは下記のリンクからご覧ください。

http://muut.com/

一点注意が必要なのが、こちらのサービスが終了してしまった場合掲示板も閉鎖される恐れがございますので、こちらは自己責任でお願いします。
割と有名なサービスのようですので、当分は終わらないと思いますが。

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

何かと不便だと言われるMuseですが、外部サービスを応用すればとても便利に使う事ができますね。上手く使いこなせばデザイナーの強い味方となるはずです。

ではまたお会いしましょう。

必ずダウンロードしておきたい Adobe Museの便利ウィジェット8セット!






こんにちは!

なんと今回で2日連続更新になります!

何でこんなにペースが早いのかと申しますと、ちょっと良い感じのMuseウィジェットを見つけてしまったからなんです!!

あの知る人ぞ知るMuse素材サイト大手「MuseGrid」さんご提供の、Museユーザーならマストハブな便利ウィジェット8個セットでございます!

それでは早速ご紹介させて頂きます。


1、Google Analytics Installer


これはサイトを運営している方にはおなじみのGoogle Analyticsを簡単に導入できるウィジェットです。
やり方は簡単。AnalyticsのプロパティIDを貼付けて、マスターページにウィジェットを置けば終了です。とっても簡単ですね!

2、Image Placeholder 


サイトを作ってる時に、「写真を置きたい場所があるんだけど、良い写真は無い…。探すのも面倒だなー」という時はございませんでしょうか?
このウィジェットにはよくある感じの画像が10枚セットされておりまして、良い写真が見つかるまでこの10枚の中から適当な写真を選んで置いておけば、それなりに良い見た目が保てるという、プロトタイプ制作用の便利ウィジェットでございます。


3、Font Awesome 


これは以前ご紹介したFont Awesomeウィジェットと同じ内容なんですが、私はこちらの方が使いやすいかなー、と思います。


4、Ion Icons



こちらは私は知らなかったのですが、Ion IconsというFont Awesomeみたいなアイコンがございまして、そちらがセットになっている便利なアイコン集でございます。
個人的には今回はこれが一番良かったです。

5、Ion Icons Animated


こちらは上でご紹介したIon Iconsの中で、アニメーションするアイコンが数個あるのですが、こちらがセットになっているアイコン集でございます。
動きを出したいときに便利なセットでございます。

6、Social Media Meta 


これはソーシャルメディアでサイトがシェアされた時に表示されるサイトのメタデータを設定できるウィジェットになります。
これを使うとfacebookでシェアされた時に、タイムライン上で変な画像と意味不明な説明文が出てくる事を防げます。

7、Library Installer


これはヘッダーとフッターの中に好きなhtmlを埋め込めるウィジェットになります。
「俺のこだわりのコードを入れさせろ!」という意識の高いユーザー様にオススメでございます。bootstrapにも対応しているそうでございます。

8、Mobile/Tablet Helper 


こちらはですね、スマホやタブレットのホーム画面に表示される四角いアイコンを設定できる便利なウィジェットです。お気に入りされた時に変なアイコン出てきたら嫌ですもんね。
細かい所ですが、変なアイコンがホームに出てきたら即削除の可能性大ですので、しっかりこだわっておきたいですね。

いかがでしたでしょうか?
細かい設定も、ウィジェットで簡単に設定できてしまうのがMuseの魅力ですね。
是非ともダウンロードして頂いて、サイト作成のお役に立ててくださいね。

ご紹介したウィジェットはこちらからダウンロード可能です。(ダウンロードにはメールアドレスの登録が必要です)

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

ではまたお会いしましょう。

2015.12.02 新記事書きました!!
【使い方様々】レストラン、バンド、ビジネスなどに使えるAdobe MUSEテンプレート

2014年8月24日日曜日

Adobe Museのオシャレでセンスの良い無料テンプレート&ウィジェットが揃うサイト「MuseFree.com」






こんにちは!

最近はカメラの話題ばかりで、Museの情報をあまり更新しておらず大変反省しております!
先ほど良い感じの無料Museサイトを見つけましたので、皆様とシェアさせて頂きたいと思い、ブログを書かせて頂きます。

無料テンプレート&ウィジェットサイト

MuseFree.com


こちらのサイトを始めて見た時、衝撃が走りました。

「ついに、Museの無料素材もここまで来たか…」

日本にいると実感しませんが、海の向こうでは着実にユーザーを増やしており、それに伴い無料素材のクオリティもどんどんアップしているようでございます。

しかも、テンプレートだけでなく、便利なウィジェットやサイト制作でかなり使えそうな素材も全部無料!

これは利用しない手は無いのではないでしょうか??

それでは数ある素材の中で、私が気に入った物を少しだけご紹介させて頂きます。


まずは、こちらは「One Page Muse Template」。
読んで字の如く、最近流行りのシングルページタイプのテンプレートです。

このデザインセンスの高さは素晴らしく、きっと制作された方はかなりWebデザインに背通していると思われます。

すぐにでも使えるかと思いますので、ランディングページの作成にいかがでしょうか??


こちらはタブ作成のウィジェットですね。
タブって便利なんですけど、なかなかデザイン的に格好良くならないので私はあまり使わないのですが、これはオシャレ!
是非使ってみたいと思います。他にも複数のデザインあり。


こちらもオシャレなウィジェットですね。
周りの丸をクリックすると、真ん中の説明文が変わります。
サービスのメリットを紹介する際等に使えるのではないかと思います。


はい、来ました!
オシャレなデザインのコンタクトフォーム!
何とも言えないオシャレな感じが、「ちょっと問い合わせてみようかな?」と感じさせてくれますね。これは参った!


こちらは両脇にサムネイルを配置したオシャレなギャラリーでございます。
ちょっと人とは違ったデザインを求めているそこのあなた?
こちらの活用をオススメいたします。

いかがでしたでしょうか?
今回ご紹介できたのはほんの一部でして、他にも使えそうな素材はたくさんございます!
是非一度チェックしてみてくださいね。

サイトはこちらのリンクからご覧ください。

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

ではまたお会いしましょう。

2015.12.02 新記事書きました!!
【使い方様々】レストラン、バンド、ビジネスなどに使えるAdobe MUSEテンプレート