噂の高機能ツールAdobe Museで制作されたWebサイトをWordPressへ移行して感じた事

Adobe Muse CCとはどんなツールか

Adobe Museは、視覚的・直観的に操作でき、デザイン・コーディング経験がない初心者の方でもドラッグ&ドロップで簡単にホームページを制作できる高機能なWebサイト作成ツールです。

IllustratorやPhotoshopでデザイン・レイアウトを行うような感覚でコンテンツを配置して作成したページを、HTML・CSSで出力する機能もあり、ページ構成も簡単に設定する事ができます。また、スライダーやドロップダウンメニューのような動きのある実装もできるので、これによりデザイナーがデザイン・レイアウトをしながら同時にコーディングまで行えるようになり、作業時間の大幅な短縮化が可能となりました。

しかし、そのような高機能で便利なAdobe Museにもデメリットが存在します。

第一に、Adobe Museで吐き出されたHTML・CSSソースコードはゴチャゴチャして汚い点です。

各要素一つ一つをdivタグで処理するクセがあり、そのタグ一つ一つに付くclass名、id名も独自のアルファベットと数字で命名されており、意味付けがなく、指定箇所が特定しにくくなっています。また各タグ固有の意味・役割がHTMLの文法に沿って構成されていない箇所が多くあり、見にくく、管理もしにくいため、メンテナンス性の低い(いわゆる汚い)ソースコードとなってしまいます。そのためSEOを踏まえたサイトを制作する上では、必要に応じてタグを付け直しする手間が増え、一から作る方が工数もかからない場合があるので、構成重視のしっかりとしたWebサイトにはむいていないと言えます。

そして第二に、Adobe Museの開発が終了となってしまう点です。

2018年3月26日、Adobe Museの開発終了が発表されました。最終バージョンとなるAdobe Muse CC 18.1のアップデートが配信されていますが、技術サポートは2020年3月26日まで提供されることになっています。これにより、既にAdobe Museで制作されたサイトやデザインの移行をどうするか、といった問題が出てきています。

特に多いのはWordPress等のCMSへの移行ですが、実際にAdobe MuseからWordPressへ移行してみて感じた事・問題点などをあげていきたいと思います。

実際にWordPressへ移行した際の流れについて

実際にWordPressへ移行する際に行った作業の流れは以下になりますが、サイト制作全体の工程のうち、主にAdobe Museからの移行作業が発生した範囲のみをまとめました。

  • Adobe Museで作られたサイトをHTML・CSSで吐き出し
  • 吐き出されたソースコードのHTMLをヘッダー・フッター・サイドバー・記事等必要なパーツに分割
  • WordPressのテーマテンプレートに合わせて、分割したパーツを埋め込み
  • JavaScriptなどによる動的な部分の実装
  • テーマとして認識させるための最低限のお約束記述の追加
  • 標準で有効化されていない機能を使うため、function.phpの編集やプラグインのインストール

移行対象サイトが企業サイトだったため、当然SEOを意識して作業する事が前提となります。ソースコードを確認するととてもグチャグチャなコードで、さらに画面幅に合わせてレイアウトを可変とするJavaScriptJsの実装が記述されており、サイト全体がとても重くなっていました。

加えて驚いたのは、テキストが画像化されて吐き出されていたため、テキスト化する手間が発生したことです。まずは汚いグチャグチャなソースコードをテンプレートに移す際に、文法に沿ってコーディングし直す必要がありました。また、CSSの記述も場所が特定しにくい、ほぼidでスタイル指定されている、id名・class名が意味を持たない等があり、微修正を行う上でとても手間がかかりました。結果的に手間が大幅にかかり、当初想定よりも大変な作業となってしまいました。

Adobe Museからの移行をどうとらえるか

WordPressへの移行作業を通して感じたのは、制作するサイトの内容によってはまだまだAdobe Museのようなツールでは不完全な部分が多くあるという事です。

今回もデザインデータを見ながら一からコーディングする方が、明らかに手間がかからず無駄な記述を最小限に抑えることができるため、サイト全体を軽くできるだけではなく、保守性も高く、かつSEOも自由に効かせたWebサイトを制作できると感じました。

しかし、ランディングページや期間限定の特設ページ、プレゼンに使うページ等、工数をかけたくはないけれど、見せるためのデザインを重視するWebページではとても威力を発揮します。操作も簡単なのでデザイナーがデザインしたものをそのままサイト化できる点では非常に優秀なツールといえます。

使い方によってはとても便利なツールですし、サービスは終了となってしまいますが、WIXやJimdo等のオンラインWebサイト制作ツールと比べても断然高機能・高品質なので、今後こういったツールがきっかけとなり、Web制作用ツールが進化してゆくきっかけになる事は間違いないと思います。

今後デザインはデザイナー、コーディングはコーダーといった役割分担をする、という概念ではなく、Webサイト制作ツール+@のような新たな作業の形態に移行していくのではないでしょうか。

ライター:松田

御相談、ご質問はこちら

サイバーテック お問い合わせ
お気軽にご相談ください

製品カタログ・セミナーでの講演資料など、豊富な資料がダウンロードできます

サイバーテック 製品カタログ 資料ダウンロード

最新事例の公開情報や、イベント・セミナー情報をお届け

サイバーテック メルマガ登録
pagetop ボタン