コーディングの手腕がないデザイナーだけでWebページ制作をしてみた件について：ブラック案件駆逐法（3）（2/2 ページ）

とある小さなWeb制作会社を舞台に、クライアントからのさまざまなブラック案件を、Adobe Creative Cloud 2014を使って解決していくストーリー。ムチャ振りするクライアント、安請け合いするメンバー、それに振り回される制作者。果たして、無事にブラック案件を駆逐できるのか！？【今回の話】コーダー不在時にクライアントから新たなページ追加のお願いが……。PhotoshopとMuseを使えば「デザインさえあれば何とかなる！」

[岡本紳吾，hatte.Inc]

Photoshopボタンの配置

　MuseではPhotoshopでボタンのロールオーバーなどの定義を読み込むことができる。定義といっても、それぞれのステートのレイヤーを用意しておくだけだ。レイヤーはMuseでは統合できないため、あらかじめステートごとに統合しておく必要がある。

　もちろん、Photoshopを用いなくてもMuse単体でステートごとの画像を差し替えることができるが、Photoshopを使った方がレイヤー効果などを利用しやすい。

　レイヤー名は「Normal」「Over」とした。Museはレイヤー名を判定するようで、このようにしておくと読み込み時に適切なステートに自動設定してくれる。もちろん、読み込み時にどのステートがどれなのかを指定できるので、後で分かればどんな名前にしても構わない。

　配置メニューの下にPhotoshopボタンを配置があるので、それを選択する。

　後は「OK」を押して、さっと配置するだけだ。

プレビューする

　画面右上にあるプレビューのボタンをクリックすると、アプリケーション内でブラウザーでの表示を確認できる。実際にPhotoshopボタンが機能しているのかを確認してみよう。

　マウスオーバーも適切に動作した。

　後はボタンにリンクを設定してHTMLをパブリッシュするだけだ。本当に一切コードを書かなくてもページを作成できた。

条件付きだが、ある程度の実案件でも対応可能

　このように、Museはコードを書かなくてもデザインがあればそれをブラウザー上で表示、操作ができるHTMLコンテンツをオーサリングできる。

　ただし、Web制作案件というのは、さまざまな制約、規約が定められていることがある。コーディング規約やCSSの制限、「対応ブラウザーはどれなのか」などだ。この辺りが自由に設定できるのであれば、Museは実案件でもかなりのパフォーマンスを発揮するはずだし、実案件で活用している方もいると聞く。

　筆者もMuseを実案件で利用しようと画策しているのだが、最近依頼される案件はことごとく厳しいコーディング規約が存在しており、泣く泣くDreamweaverで制作をしている。

　例えば、今回のようにごく短期の制作期間であるとか、予算が少なくて「取りあえず画面に表示されればいいので」といったような場合、Museはかなり役立ってくれるだろう。そして、規約がガッツリ決まっていたり、作業をコーダーに任せられたりするのであれば、Dreamweaverの出番といっていいだろう。

　実際の案件によってオーサリングツールをうまくセレクトしてみてほしい。

次回「それ、レスポンシブになります？」

　われわれ制作者はもちろん、クライアントも業界のトレンドを勉強している。今回の案件でも「レスポンシブにしたい」という要望が。短納期なのでうまく避けられていたがもう逃げ道はない。制作前のPSDファイルはまだあったはずだ。それならば、Edge Reflowを使えばレスポンシブデザイン対応のサイトを書き出せる。手直しは機能強化されたEdge Codeを使ってみよう。

　できるだけ短期間で既存サイトをレスポンシブ対応にすることはできるのか？

※案件についてはフィクションですが、筆者が実際に体験した事実を元に執筆しております。実際にコーディングしたデータをWeb上でご覧いただけます。筆者のGitHubアカウントから素材を含めてダウンロードすることもできます。当記事のLPで紹介されている「Climbing lovers Jewelry」は筆者の会社が輸入代理をしている実在の商品です。

岡本 紳吾（おかもと しんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto