噂の高機能ツール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を意識して作業する事が前提となります。ソースコードを確認するととてもグチャグチャなコードで、さらに画面幅に合わせてレイアウトを可変とするJavaScriptの実装が記述されており、サイト全体がとても重くなっていました。加えて驚いたのは、テキストが画像化されて吐き出されていたため、テキスト化する手間が発生したことです。

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