去年の秋ごろ以前にやっていたブログで使ったことも無いのにテキトーな事書いた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種類あります。
1.そのままローカルフォルダにHTMLを書き出す方法。
2.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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | <!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> </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> </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">ページ2</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">ページ3</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">ページ4</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">ページ1</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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 | .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に組み込んで欲しい。