素材の用意ができたら後はコーディングするだけだ。エディターは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」は筆者の会社が輸入代理をしている実在の商品です。
Copyright © ITmedia, Inc. All Rights Reserved.