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

» 2014年07月18日 18時00分 公開
[岡本紳吾hatte.Inc]
前のページへ 1|2|3       

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


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。