食わず嫌いはいけないのでAdobe Muse CCを使ってみた。

2014/02/12 U-YA コメント 1件のコメント

去年の秋ごろ以前にやっていたブログで使ったことも無いのにテキトーな事書いたAdobe Museですが、アクセスの解析をしてみたら検索ワード”Adobe Muse”でブログを見に来ている人が結構いた。

使い方や評判を調べに来ているのに自分の憶測で書いた記事を読ませるのは申し訳ないと思ったのでちょっと使ってみた。

ちなみに前回書いた記事の内容は以下の通り。

視覚的＆直感的にウェブサイトがデザインできちゃうらしいよ。

オンライン上のサービスなら無料でも似たようなの（Wix等）はあったけど、正直重いし、有料テンプレートを使ったりしない限りデザインもそこまでバラエティがあるわけではないし何しろウェブに繋ぎながらデザインをしないといけないという点でそこへんの無料ブログと大差が無いと思ってましたが、とうとうクライアント側だけでできちゃうのかーという感じ。

しかもサブスクリプションで既にお金払ってる訳だからデザインもどんどん豊富になっていきそう、

さらに追い打ちをかけるようにEdge Reflow（こちらはメンバー登録を済ませれば無料）とかいうのを使えばレスポンシブデザインをフォトショから書き出したりもできちゃうらしいじゃないですか。

とは言っても今だって初心者御用達のホームページビルダーでも似たような事は出来るしウェブの知識が少しでもあればこんなので作ったウェブサイトはいろいろとマズい事くらいは容易にわかる。

けど問題はそこじゃなくて、クリエイター系でPsやイラレ、映像関係でAfやPrくらいしか使わないけどとりあえずCCは使ってますって層に簡単に作れる環境が勝手にお膳立てされてしまっているのが問題なんだ。

ここまで書いておいて使ったことはなかったので実際どうなのよ！？

というのが気になるところだと思います。

食わず嫌いもいかんので早速使ってみました。

起動・設定

まずはAdobe CCの公式HPへ行ってCreative Cloudをインストールします。

それからAppの中にあるAdobe Muse CCの体験版を選択してインストール。

インストールが完了したら起動します。

起動直後の画面はこんな感じ。

他のAdobeのソフトウェアと比較するとかなりシンプル。

新規作成はFileからNew siteを開きます。

Height Widthやカラム数、余白などの設定が出来ます。

とりあえずデフォルトのままOK

このような画面が出ればOK。

左下にあるのはマスターテンプレート。

中央左にあるのは最初のページ（Home等）になります。

デザイン・制作

先ずは雛形ファイルを作るので左下のマスターテンプレートをダブルクリック。

自動的にDTPソフトのような制作画面へ移行します。

PhotoshopやFireworksを使ったことがあれば特に難しい事はありません。

アイコン等もPhotoshopとほぼ同じ、レイヤーの操作もFwよりはPsに近い感じです。

マスターテンプレートを編集すると当該テンプレートと関連付けられているページ全てに適応されます。

※ソチオリンピックにちなんでロシアにしてみた。

ページ数が沢山あって適応したいテンプレートが複数ある場合でも簡単に追加・変更が出来て何時でも一目で分かるようになってます。

そしてページごとの設定をしたいときは各ページをダブルクリック。

編集の仕方はマスターテンプレートと同じです。

ハイパーリンクを選択するとURLの入力(外部リンク)or各ページの選択(内部リンク)が設定できます。

サイト構成を後から変更してもここで設定したリンクは変わりません。

既にリンクが設定してあるページを削除するとハイパーリンクの設定も解除されます。

色々と各ページの細かい設定が終わったらサイト構成を作りましょう。

そのまま書き出しても問題ありませんが、一応見た目を整えて整理する意味でもやっておきましょう。

最初のページをHomeの下へドラッグすれば、あとはサイトマップを作る要領で配置していけばOK。

エクスポート・書き出し

何もコンテンツの無い国旗を書き出すわけにはいかないので、試しに5分で作ったウェブサイトっぽい何かを書き出して見ましょう。

見た目はこんな感じ。

~~ちょっとやっつけ仕事すぎなのは気にしないでください。~~

書き出しの方法は2種類あります。

１．そのままローカルフォルダにHTMLを書き出す方法。

２．FTP設定をしてネットワーク上に直接書き出す方法。

余程めんどくさがり出ない限りは最後のエラーチェック等をするためにもローカルに書き出す事をオススメします。

チェックした後にFileZillaやFFFTP等を使ってアップロードしましょう。

ローカルフォルダを選択すると書き出しが開始されます。

この5ページほどであれば数秒もかかりません。

ローカルに書き出す場合はフォルダ選択後にドメイン名は｢index.html｣と入力しておけば大丈夫だと思います。

書き出されるファイルは以下の通り。

最初の階層：index.html, sitemap.xml, muse_manifest.xml

cssフォルダ内：index.cssと全ページに関連するグローバル＆各ページCSS

Scriptフォルダ内：pie.js, jQuery1.8.3min.js, jquery.watch.js, museutils.js

imageフォルダ内：各種画像ファイル

簡単なものであれば以上です。

コード等の内容

これが一番気になる部分ではあると思います。
さきほど書き出したHTMLとCSSの中身を見てみましょう。

index.html

<!DOCTYPE html>
<html class="html">
 <head>

  <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
  <meta name="generator" content="7.2.232.244"/>
  <title>Home</title>
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/site_global.css?397963719"/>
  <link rel="stylesheet" type="text/css" href="css/index.css?3782136300" id="pagesheet"/>
  <!-- Other scripts -->
  <script type="text/javascript">
   document.documentElement.className += ' js';
</script>
   </head>
 <body>

  <div class="clearfix" id="page"><!-- group -->
   <div class="clearfix grpelem" id="u125-3"><!-- content -->
    <p>&nbsp;</p>
   </div>
   <div class="clearfix grpelem" id="ppu88-3"><!-- column -->
    <div class="clearfix colelem" id="pu88-3"><!-- group -->
     <div class="clearfix grpelem" id="u88-3"><!-- content -->
      <p>&nbsp;</p>
     </div>
     <div class="rounded-corners clearfix grpelem" id="u90"><!-- group -->
      <img class="grpelem" id="u98-4" src="images/u98-4.png" alt="Adobe MUSE TEST" width="134" height="32"/><!-- rasterized frame -->
     </div>
    </div>
    <div class="clearfix colelem" id="pu100"><!-- group -->
     <div class="clearfix grpelem" id="u100"><!-- group -->
      <div class="rounded-corners clearfix grpelem" id="u332"><!-- group -->
       <div class="clearfix grpelem" id="u335-4"><!-- content -->
        <p>Homeです。</p>
       </div>
      </div>
      <div class="rounded-corners clearfix grpelem" id="u108"><!-- column -->
       <div class="position_content" id="u108_position_content">
        <img class="colelem" id="u113-4" src="images/u113-4.png" alt="Side Bar Menu" width="126" height="30"/><!-- rasterized frame -->
        <img class="colelem" id="u121" src="images/u121.png" alt="" width="127" height="2"/><!-- rasterized frame -->
        <div class="clearfix colelem" id="u118-5"><!-- content -->
         <p><a class="nonblock" href="%e3%83%9a%e3%83%bc%e3%82%b8%ef%bc%92.html">ページ２</a></p>
        </div>
        <img class="colelem" id="u122" src="images/u122.png" alt="" width="127" height="2"/><!-- rasterized frame -->
        <div class="clearfix colelem" id="u117-5"><!-- content -->
         <p><a class="nonblock" href="%e3%83%9a%e3%83%bc%e3%82%b8%ef%bc%93.html">ページ３</a></p>
        </div>
        <img class="colelem" id="u123" src="images/u123.png" alt="" width="127" height="2"/><!-- rasterized frame -->
        <div class="clearfix colelem" id="u116-5"><!-- content -->
         <p><a class="nonblock" href="%e3%83%9a%e3%83%bc%e3%82%b8%ef%bc%94.html">ページ４</a></p>
        </div>
        <img class="colelem" id="u124" src="images/u124.png" alt="" width="127" height="2"/><!-- rasterized frame -->
       </div>
      </div>
     </div>
     <div class="clearfix grpelem" id="u115-5"><!-- content -->
      <p><a class="nonblock" href="index.html">ページ１</a></p>
     </div>
     <div class="grpelem" id="u119"><!-- simple frame --></div>
    </div>
   </div>
   <div class="verticalspacer"></div>
   <div class="clearfix grpelem" id="u80"><!-- column -->
    <div class="position_content" id="u80_position_content">
     <div class="colelem" id="u107"><!-- simple frame --></div>
     <div class="clearfix colelem" id="u106-4"><!-- content -->
      <p>Copyright hogehoge All Reserved 2014</p>
     </div>
    </div>
   </div>
  </div>
  <!-- JS includes -->
  <script type="text/javascript">
   if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
  <script type="text/javascript">
   window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
  <script src="scripts/museutils.js?4291592202" type="text/javascript"></script>
  <script src="scripts/jquery.watch.js?4068933136" type="text/javascript"></script>
  <!-- Other scripts -->
  <script type="text/javascript">
   $(document).ready(function() { try {
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.fullPage('#page');/* 100% height page */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
   </body>
</html>

index.css

.html
{
	background-color: #7F7F7F;
}

#page
{
	z-index: 1;
	width: 960px;
	min-height: 480px;
	background-image: none;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	background-color: #FFFFFF;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}

#u125-3
{
	z-index: 39;
	width: 5px;
	position: relative;
	margin-right: -10000px;
	margin-top: 20px;
	left: 16px;
}

#ppu88-3
{
	width: 0.01px;
	position: relative;
	margin-right: -10000px;
	margin-top: 20px;
	left: 21px;
}

#u88-3
{
	z-index: 47;
	width: 918px;
	min-height: 97px;
	border-color: #000000;
	background-color: #754C24;
	position: relative;
	margin-right: -10000px;
}

#u90
{
	z-index: 50;
	width: 198px;
	border-color: #000000;
	background-color: #006837;
	-moz-border-radius: 10px 10px 0px 0px ;
	-webkit-border-radius: 10px 10px 0px 0px ;
	-khtml-border-radius: 10px 10px 0px 0px ;
	border-radius: 10px 10px 0px 0px ;
	position: relative;
	margin-right: -10000px;
	margin-top: 51px;
	left: 51px;
}

#u98-4
{
	z-index: 51;
	display: block;
	vertical-align: top;
	margin-bottom: -4px;
	position: relative;
	margin-right: -10000px;
	margin-top: 18px;
	left: 22px;
}

#pu88-3,#pu100
{
	width: 0.01px;
	position: relative;
}

#u100
{
	z-index: 8;
	width: 918px;
	border-color: #000000;
	background-color: #006837;
	padding-bottom: 46px;
	position: relative;
	margin-right: -10000px;
}

#u332
{
	z-index: 42;
	width: 538px;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	background-color: #000000;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	padding-bottom: 326px;
	position: relative;
	margin-right: -10000px;
	margin-top: 76px;
	left: 98px;
}

#u335-4
{
	z-index: 43;
	width: 397px;
	min-height: 35px;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	background-color: transparent;
	color: #FFFFFF;
	line-height: 36px;
	font-size: 30px;
	position: relative;
	margin-right: -10000px;
	margin-top: 25px;
	left: 51px;
}

#u108
{
	z-index: 9;
	width: 126px;
	border-color: #000000;
	background-color: #754C24;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	padding-bottom: 0px;
	position: relative;
	margin-right: -10000px;
	margin-top: 76px;
	left: 695px;
}

#u108_position_content
{
	margin-top: 11px;
	margin-bottom: 48px;
}

#u113-4
{
	z-index: 10;
	display: block;
	vertical-align: top;
	left: -4px;
	position: relative;
}

#u121
{
	z-index: 35;
	display: block;
	vertical-align: top;
	margin-top: 29px;
	position: relative;
}

#u118-5
{
	z-index: 29;
	width: 81px;
	min-height: 24px;
	font-weight: bold;
	margin-left: 5px;
	margin-top: 3px;
	position: relative;
}

#u122
{
	z-index: 36;
	display: block;
	vertical-align: top;
	margin-top: 5px;
	position: relative;
}

#u117-5
{
	z-index: 24;
	width: 81px;
	min-height: 24px;
	font-weight: bold;
	margin-left: 5px;
	margin-top: 5px;
	position: relative;
}

#u123
{
	z-index: 37;
	display: block;
	vertical-align: top;
	margin-top: 3px;
	position: relative;
}

#u116-5
{
	z-index: 19;
	width: 81px;
	min-height: 24px;
	font-weight: bold;
	margin-left: 5px;
	margin-top: 8px;
	position: relative;
}

#u124
{
	z-index: 38;
	display: block;
	vertical-align: top;
	position: relative;
}

#u115-5
{
	z-index: 14;
	width: 81px;
	min-height: 24px;
	font-weight: bold;
	position: relative;
	margin-right: -10000px;
	margin-top: 118px;
	left: 700px;
}

#u119
{
	z-index: 34;
	width: 125px;
	height: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	background-color: #000000;
	position: relative;
	margin-right: -10000px;
	margin-top: 110px;
	left: 695px;
}

#u80
{
	z-index: 2;
	width: 918px;
	border-color: #000000;
	background-color: #754C24;
	padding-bottom: 0px;
	position: relative;
	margin-right: -10000px;
	margin-top: 587px;
	left: 21px;
}

#u80_position_content
{
	margin-top: 55px;
	margin-bottom: 4px;
}

#u107
{
	z-index: 7;
	width: 918px;
	height: 4px;
	border-color: #000000;
	background-color: #000000;
	position: relative;
}

#u106-4
{
	z-index: 3;
	width: 264px;
	min-height: 18px;
	margin-left: 327px;
	margin-top: 4px;
	position: relative;
}

body
{
	padding-top: 35px;
	padding-bottom: 36px;
}

#page .verticalspacer
{
	clear: both;
	margin-bottom: -587px;
}

HTML5で書き出されているようです。

MetaのGeneratorは恐らくMuseのバージョンだと思います。

それにしても、自力で似たようなものを作るなら10分の1以下で書けそうなコードですね。

文字もWEBセーフフォント以外を使うと画像として書き出されるようです。

position:relativeの嵐、そしてmargin:-10000pxって・・・。

まとめ

結論から言うと「思ったとおり」でした。

ご丁寧にjQueryまで吐き出してくれましたがちょっと実用に耐えうる代物では無い感じ。

設定弄り倒せばもうちょっとマシなコードを吐き出すのかも知れませんが現状そこまでの時間を割く価値は無い。

どうしてもHTMLやCSSの知識無しで作りたい方にはイケダハヤト氏の広告でおなじみのWix等をオススメします。

難易度もデザインもSEOの観点から見てもMuseの完敗は否めない。

現状使い道があるとすればサイトマップは見易いからこれでデザインカンプより前の段階のドラフト作る程度？

そこまで言われてもMuseが気になる方は1ヶ月無料の体験版を使ってみると良いと思います。

ただ悪いところばかりではない。

まずUIが他のAdobe製品に慣れていれば使いやすい。

あとはsitemap.xmlまで自動で吐き出してくれるのは便利だなぁと思った。

この機能は是非Dreamweaverに組み込んで欲しい。

cityJumperWEB.com

市民ジャンパーWEB屋のブログ