　　　　Adobe Muse CC 雑感

Adobe Muse CC 雑感

AdobeのCC (Creative Cloud) がやっと使えるようになった。そこで自分なりに懸案となっていたホームページを作ってみたいとAdobe Muse CCを使い始めた。無論Muse CCはWeb作成アプリだがその使用は初めてだったものの...はまってしまった。

おかげさまで現行のブログは日々多くの方々にアクセスしていただいている。ここに至った詳しい経緯は「サイト攻撃を受け情報発信をブログに変更する顛末記」でご紹介したことがあるが、これまで2003年からホームページを続けてきたものの数度のハッキングに会い疲れ果て、比較的安全だと思われるブログに移行することで現在に至っている。

ブログも決して悪いわけではないが一般的なウェブページと比較すればデザインにしても自由度は少ないし、コンテンツの階層化も限界があり、特に過去に書いた記事にアクセスするのが厄介なため日常のアクセスの多くは最新情報に偏ってしまう傾向がある。

その他いくつかの理由により "Macテクノロジー" の暖簾はそのままにジャンルを広げ、あるいは傾向を変えて新しい視点を持ったウェブページ公開をしてみたいと考えてきた…。また動機のひとつとしては新しいことをやってみたいという意欲も出てきたからだ。ただしその実現にはいくつかの壁があることも事実だった。

※Muse CCによるニューMacテクノロジー研究所、試作サイトのトップページデザイン(α版)。メチャ遊んでみた(笑)。なおα版のウェブページにもかかわらずマネーツリー株式会社様の許可をいただきバナー広告を見本として掲載しています【クリックで拡大】

私はマイコンとかパソコンといったものは1977年から始めたから今年で足掛け39年になる。またその間約14年の間、アップルジャパンのデベロッパーとしてMac専用のソフトウェア開発会社を率いてきた。したがって周りの方々から見た私のイメージはといえば、「ソフトウェアやMacおよびその関連製品の情報・動向に詳しい奴」といったものらしい。
しかし現実として私の知識範囲はピンポイントであり、逆にいうなら穴だらけで、特にウェブに関することはずっと友人に助けてもらってきたこともあって系統立てた勉強や訓練を怠ってきたため、最新情報も含めて実に頼りないのだ…。

そんな私にウェブ制作ツールとしてAdobe Muse CCは実に具合がよろしい。ウェブに関する知識が不要というわけにはいかないが、事実HTMLなどのコードを書く必要はないし、まるで InDesignでパブリッシュしている感覚が楽しい。
ともあれ道具立てとしてAdobe Muse CCを正式購入し、新しいドメインを取得し、ホームページを置くウェブホスティングサーバーを確保した上でこれまでできなかった自由度の高いウェブページを構築してみようと始めたところだ。

Muse CCには有料／無料のデザインを重視したテンプレートが多く揃っている。初歩としてはそれらの中から目的に合った素敵なテンプレートを選んでカスタマイズするのが基本のようだが、思うようにカスタマイズするには当然のことながらMuse CCの仕組みや実装されている機能、そしてそれらの働きを知る必要がある。
また最新のテンプレートは動的なもの…背景全面のアニメーション、パララックススクロールやアコーディオンパネルなどなどが目立つ。流行とかブームもあるのだろうし確かに魅力的だが、こうしたコンテンツはよほど上手に作れなければ利用者から見てみずらいものとなるだろうし個人的には正直好みではない。

ということでまずはMuse CCの仕組みを探りながら勉強の目的も兼ね、Muse CCでゼロからウェブページを作ってみることにした。
ここはMuse CCの講座ではないので細かなステップの紹介は避けるが、Muse CCにはAdobe独自のホスティングサーバー (Business Catalyst)が使え、１GBのスペースを活用できるからサーバーにアップした完成形のイメージを掴むのは勿論、取り急ぎこのBusiness Catalystでホームページを公開することもできる。

※Muse CC起動直後にページサイズや段組といった設定を行う「レイアウト」ウィンドウが表示

さてMuse CCを起動した初期画面にはページサイズや段組といった設定を行う新規サイトの「レイアウト」ウィンドウが表示するが後で変更も可能なのでこの初期値のまま「OK」を押す。
ここで大切なのはMuse CCのメニューバー右にあるプラン／デザイン／プレビュー／パブリッシュのモード切替とその下に位置しているコントロールバーにあるデスクトップ／タブレット／スマートフォンといったこれまた切り換えタブだ。勿論左側には縦位置にツールバーが表示されている。

※まずはサイトマップを作成する「プラン」モードとして起動

タブレットや iPhoneといったスマートフォンのサイズにも対応したデザインを考慮する必要もあるが、ここではデスクトップになっているかを確認して次に進む。なお作業画面は下にマスター、上にホームの白紙サムネイルが表示されている。ここでいわゆるサイトマップを構成するわけだ。
しかし、後で変更できる自由度があるにしても闇雲に兄弟ページや親子ページを増やしては混乱するだろうから、ある程度予め紙にでもサイトマップの構成案を書いてから作業を進めるべきだろう。

まず上段 ”ホーム” のサムネイル左右に表示する “＋” アイコンをクリックすると隣に新しい兄弟ページができる。またサムネイル下に表示する “＋” をクリックすれば親子ページというべき階層ページを作ることが出来るが、いずれにしても新しいページを作ったら必ずサイトマップに従ってサムネイル下の名前をきちんと変えておくべきだ。

※兄弟ページ作成(上)と親子ページ作成(下)

なお親子ページを複数用意した場合、サムネイルが縦方向に列び煩雑となる。その場合は親のサムネイル下にある “＋” アイコンをクリックするとすべての親子ペーシが折りたたまれて表示される。また再度クリックで元に戻る。

※親子ページが増えた場合には折りたたむことができる

こうしてマスターページのデザインならびに設定を開始することになる。
まずはモードを “デザイン” に変えてヘッダーおよびフッター、背景色ならびに予め用意した写真や画像をドラッグ&ドロップし配置するが、その都度 “プレビュー” モードにしてどのように見えるかを確認しながら作業を進める。

※ホーム(トップ)ページとミュージアムページのデザインを試作しているところ

マスターの構成が決まったらホームをはじめ、各コンテンツページを作り込んでいくが、この辺はAdobeの他の製品、例えばInDesignなどを使っている方には操作性が似ているので馴染みやすいのではないか。事実ページレイアウトそのままの感じで作業を進めていける…。

実際にやってみると難しいのは、どのようにしたら思い描いた機能を実装できるかを知らなければならないことだ。ハイパーリンクの設定などはまだしもYouTubeの動画を貼り付けるとかRSSフィードの設定、Business Catalystへのパブリッシュはまだ分かりやすいものの、任意のホスティングサーバーへFTPでパブリッシュするとか別途ライブラリとかウィジェットといった類のものを時にダウンロードし読み込んで使う…といったあれこれだ。

※YouTubeの動画を表示し再生可能にしたページ(上)と現行ブログからRSSフィードで記事情報を読み込ませたページ(下)

ただしMuse CCにしても何でもできる訳ではない…。例えばサウンドの再生やいまデスクトップ上にある動画を画像のようにレイアウトする機能は持っていない。またモバイルデザインに自動的な変換ができないなど現時点ではまだフレンドリーではない部分もある。

※こちらはボタンをクリックすることでPDF資料を閲覧ならびにダウンロードできるページの試作

問題はMuse CCの機能として出来ないことではなく “出来ることと出来ないことを知ること” に違いない。でないと無駄な時間を浪費するだけとなる。勿論中にはサードパーティーのウィジェットやテーマを別途入手することで実現できる場合もあるが…。

※スタッフ紹介のページは今のところお遊びだ(上)。そしてコンタクトページ試作(下)

まあウェブページに詳しい方から見れば難しい事はないのだろうが、そもそもMuse CCを使おうとするユーザーはHTMLをはじめ、複雑なことを覚えなくても良いからというユーザーに違いない。だからだろうか…Muse CCの基本的なあれこれは幸いこれまでのつたない経験が役に立ったのは嬉しかった。
しかし一時いくつかの点において頭を抱え、友人に相談してみようと思ったことが数度あったものの、まずは自分で苦労しないと身につかない事を知っているだけに何とかひとつずつ自分で解決していった。

ボタンを押すとリンク先のページへ飛ぶ…といった基本的にことはまだしも、例えばPDFファイルをダウンロードできる機能やYouTubeの動画を表示して再生する…といった機能実装は１度分かれば難しい訳ではないものの疎い人間には決して簡単ではない。また専門用語というと大げさだが、日常見聞きしているものでも意外と本質を知っていないことも多い。

※企画したプランページ (サイトマップ試作)全体【クリックで拡大】

ただしありがたいことにMuse CCはメジャーなツールだけのことはあり、Adobeのサイトは勿論だが、他にも基本的に分かりやすいチュートリアルビデオや解説のウェブページが有料無料で多々あるので、それらを活用し勉強させていただいている。

ともかくウェブデザイナーの方々の苦労が分かったような数日間だった(笑)。何しろ発注者と制作者が同一人物なのに、なかなかイメージしたサイトデザインが出来上がらない。「ああでもない、こうでもない」と工夫を続けていること自体はとても楽しいが、機能面の実装よりやはりデザイン面で納得のいくものを作り上げるのがこんなに難しいものかとあらためて感じた次第。

ということで何とか作ってみたサイトはまだまだβにも届かないα版であり、デザインは勿論コンセブトやコンテンツもがらりと変わる可能性もある。それに企画そのものが頓挫する可能性もある…。
ともあれMuse CCの自由度を楽しみ、遊び心に溢れたサイトができたらと試行錯誤を続けているが、このサイトではAppleやMacだけに縛られずファッション、食文化、歴史、AI、ロボット、本、旅、絵画、音楽などなど現行ブログと分野を違えるというより視点を新たにしたサイトにしたいと考えているが、さて…ものになるのだろうか(笑)。

※多くの Web フォントを利用できるのも魅力

いずれにしてもAdobe Muse CCは私にとってとてつもない魅力的を持った “オモチャ” であることに気がついた！！それにWebフォントも Typekit Web Fonts や Edge Web フォントなど多くのフォンドを拡張して使えることなどなどを考慮すると当初高いと思っていたMuse CCの月額費用が安価に感じるようになった。我ながら現金なものである…。

【ご注意】
・Muse CCの初心者のため、使い方や実装方法が適切ではない場合があります
・図版掲載中のバナー広告はマネーツリー株式会社様の許可をいただいてます

関連記事

2016-02-15(05:20) :
製品レポート :

このページのトップへ

« 前の記事ホーム次の記事 »

このページのトップへ