このページの本文へ

InDesignみたいにWebデザイン、「Adobe Muse」に日本版

2012年08月23日 10時01分更新

文●小橋川誠己/Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

 「紙媒体のデザイナーのためのWebデザインツール」――。そんなコンセプトの新しいソフトAdobe Muse 2.0を8月21日、アドビ システムズがリリースした。英語版は2011年8月にパブリックベータが公開されていたが、日本語版の提供は今回が初めて。単体パッケージは販売せず、Creative Cloudのメンバー(月額5000円〜)向けに提供する(単体サブスクリプションは計画中)。

Adobe Museのメイン画面(写真はベータ版)

Adobe Museのメイン画面(写真はベータ版)。IllustratorやInDesignで見慣れたUIが印象的だ

マスターページ、ガイド、スウォッチ……おなじみの機能

 Adobe Museは、HTMLやCSSなどのコードを記述せずに、Webサイトを制作できるソフト(Mac OS X/Windowsに対応)。Webサイトの制作では、PhotoshopやFireworksなどのグラフィックソフトでカンプを作成し、HTML/CSSをコーディングする流れが一般的で、HTML/CSSの知識が必須。「ホームページ作成ソフト」を使えばHTMLやCSSの知識は不要だが、テンプレートベースなので似たようなデザインになりがちで、商用サイトでは使いづらい。

 Museは、「InDesignやIllustratorのユーザーをメインターゲットにしている」(米アドビ システムズの中村美香プロダクトマネージャー)というように、InDesignで本や雑誌を作るような感覚でWebページをデザインできるのが特徴だ。

 ヘッダーやフッターなどの共通パーツは「マスターページ」として作成。各ページはテキストや画像などのコンテンツボックスを配置してレイアウトを作成する。ボックスの位置を揃えるための「ガイド」「整列」パネル、フォントの設定を登録しておく「段落スタイル」「文字スタイル」、よく使うカラーを登録しておく「スウォッチ」などおなじみの機能もあり、InDesignやIllustratorに慣れているユーザーなら直感的に操作できるように設計されている。

スウォッチや整列など、おなじみの機能が揃う

おもなツールパネル。スウォッチや整列などの機能が揃っている

 ボックスには「塗り」と「線」を設定でき、CSS3のグラデーションを適用したり、ドロップシャドウを設定したりもできる。テキストボックスでは、アドビのWebフォントサービス「Typekit」の400書体(欧文のみ)から任意のフォントを選べ、画像を使わなくても見栄えのいいデザインが可能だ。

「塗り」にはCSS3を利用してグラデーションも設定できる

フォントはWebフォントのほか、一般的なシステムフォントである「Webセーフフォント」、ローカルにインストールされている「システムフォント」から選べる。システムフォントの場合はHTML出力時に自動的に画像に変換される

フォントはWebフォントのほか、一般的なフォントである「Webセーフフォント」、ローカルにインストールされている「システムフォント」から選べる。システムフォントの場合は自動的に画像に変換される

アドビのWebフォントサービズ「Typekit」から任意の書体を利用可能。欧文のみだがデザイン性の高いフォントも多い

アドビのWebフォントサービズ「Typekit」から任意の書体を利用可能。欧文のみだがデザイン性の高いフォントも多い

 テンプレートは用意されていないが、タブパネルやアコーディオン、スライドショーなどの定番UIがウィジェットとして用意されており、ドラッグ&ドロップで配置できる。

さまざまなウィジェットも用意されている

テキストや画像を差し替えればそのまま利用できるウィジェットも用意されている

 制作したページは、HTMLファイルに出力するほか、アドビのホスティングサービス「Bussiness Catalyst」へワンクリックで公開もできる。Business Catalystの利用は1サイトまで無料。

【2012/8/23 16:15追記】

本記事執筆時に作成したデモページをBusiness Catalystを利用して公開しました。以下のURLからアクセスできます。

http://webprofessional.businesscatalyst.com/

Web Professionalトップへ

この記事の編集者は以下の記事をオススメしています