納期明日!? PSDを一晩でWebページにする最新Web制作フローを試してみた：ブラック案件駆逐法（1）（3/3 ページ）

とある小さなWeb制作会社を舞台に、クライアントからのさまざまなブラック案件を、Adobe Creative Cloud 2014を使って解決していくストーリー。ムチャ振りするクライアント、安請け合いするメンバー、それに振り回される制作者。果たして、無事にブラック案件を駆逐できるのか！？【今回の話】突然、ランディングページを作れという案件が降って湧いて来た。納期は明日だ。PhotoshopのカンプをParfaitとDreamweaverを使ってWebページに仕立てる流れを動画付きで解説する。

[岡本紳吾，hatte.Inc]

Dreamweaverのライブビューでリアルタイム編集

　素材の用意ができたら後はコーディングするだけだ。エディターはDreamweaverを利用することにした。LP程度であれば、例えば「Edge Code」のようなシンプルなエディターを使ってもいいのだが、「Dreamweaver CC 2014」ではライブビューがかなり強化され、ブラウザー上で確認する手間が大幅に削減されている。

　アドビシステムズではブラウザー上でのテストを簡素化するために古くは「Browserlab」に始まり、「Edge Inspect」を開発、テストに並々ならぬ情熱を注いできた。そしてその最新版がDreamweaverの［ライブ］ビューである。

　単に表示するだけなら以前のDreamweaverでも可能だったが、Dreamweaver CC 2014は［ライブ］ビュー上で編集できるようになったのだ。そして、その結果は編集画面に即時反映されるので、そのまま変更を保存できる。似たようなことはChromeやFirefoxなどのブラウザーの開発者ツールでできるのだが、ここまでシームレスにまとまってくれたのは助かるところだ。

　下記は、［ライブ］ビューを使っている動画だ。［CSS デザイナー］でプロパティを変更すると、左側のコードと［ライブ］ビュー上のレイアウトがリアルタイムで変わる様子が分かる。

※クリックすると動画を再生できます

　また、下記動画は、Parfaitで位置情報の値を確認して［ライブ］ビュー上でh1要素のCSSを［CSS デザイナー］で調整しているところだ。

※クリックすると動画を再生できます

　欧文フォントは「Edge Web Fonts」を利用しているので、Dreamweaverでもその設定をした。

　かくして、突然降ってきたLP案件は、Creative Cloudの活用で何とか納品できた。

次回「それ、動かないの？」

　LPを無事納品したところ、クライアントがひと言「ファーストビューの部分を動かしたい」という。動かすといってもいろいろな方法がある。動画で済ませるのか、ちゃんとしたアニメーションにするのか。まさか両方やりたいって言い出すんじゃ……。

※案件についてはフィクションですが、筆者が実際に体験した事実を元に執筆しております。実際にコーディングしたデータを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