PSDファイルを基にしたリリースレベルのレスポンシブデザインの作り方：ブラック案件駆逐法（4）（2/2 ページ）

[岡本紳吾，hatte.Inc]

各ページのレイアウトの調整

　PSDを読み込んだら、レイアウトの調整を行う。Edge Reflowに読み込ませることを前提に作っておけば、この作業もほぼ不要になるが、案件によってはそうもいかない。

　ひとまず、グループになってほしいアセットは複数選択して「Add Parent」した。

　「Add Parent」すると、親に「Box」が追加され、グループ化される。なお、グループ化するコマンドはHTMLに影響しないが、「Add Parent」は文字通り親を追加する機能なので、HTMLに影響する。

　調整が済んだら、スクリーンサイズの追加をする。スマートフォンを想定しているなら取りあえず480px、横向きを想定した720pxを追加しておいた。このそれぞれのサイズでレイアウトを調整していく。

　中間のスクリーンサイズでも問題なく表示させるには、マージンや横幅を％指定するといい。横幅90％に左右マージンをそれぞれ5％取るというふうに、それぞれの要素の幅やマージンを調整していく。

　レイアウトの調整は「Layout」タブで行い、背景色や背景画像の設定は「Styling」タブで行う。ボタンのマウスオーバーはステートを指定して、そのときのスタイルを設定するだけだ。

「Layout」タブ

「Styling」タブ

　もちろん、リンクを設定することもできる。

　リンクはURL以外にもEdge Reflowの同一プロジェクトにある別ファイルを指定することもできる。

リリースレベルのHTMLコードで書き出す

　レイアウトが完成したらHTMLで書き出す。

　最新バージョンからはリリースレベルのコードを出力できるようになったので、以前のような理解が難しい複雑なコードではなくなった。

　また、「これはプロダクション向けのコードじゃないよ」というコメントも削除された。

Dreamweaverでレスポンシブデザインを作る場合

　案件によっては、このまま納品しても構わないと思われるが、HTMLやCSSのコーディング規約にのっとる形で修正をしなければならない場合もあるだろう。もし、コーディング規約が定められていて、レスポンシブデザインの知識がそこそこあるコーダーがいるなら、Edge ReflowではなくDreamweaverによるコーディングをお勧めしたい。

　Dreamweaverでレスポンシブデザインを作る場合、まず、すでにあるPC版のデザインでスクリーンサイズを追加する。

　そのサイズでのCSSを再定義するだけだ。

　少し古いが、下記記事も参照してほしい。

• 無料でCreative Cloudを使い倒せ（1）：レスポンシブWebデザインから実機検証までサクッと

次回は、まとめ

　これでレスポンシブ対応は何とか完了した。スマートフォンで検証したクライアントは「おおー」と歓声を上げていたらしい。レスポンシブデザインは、それ自体は動くものではないのだが、各デバイスで最適化されたコンテンツが提供されるというのは、見る側はもちろん、提供する側にとってもメリットが大きい。

　「長い間いろいろとありがとうございました！ 社長もやりたいこと全てできたので満足しているようです」とメールがきた。われわれも次なる案件へ目を向けることにしよう。

　これまで、ブラック案件を題材にCreative Cloudを使った作業の快適さを紹介してきた。次回はこれまで伝えきれなかった部分などをまとめて紹介する予定だ。

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