2014を使って解決していくストーリー。ムチャ振りするクライアント、安請け合いするメンバー、それに振り回される制作者。無事にブラック案件を駆逐できるのか!?【今回の話】Webの流行に詳しいクライアントから「それ、レスポンシブにならないの?」とひと言。次回は、まとめ前回の「コーディングの手腕がないデザイナーだけでWebページ制作をしてみた件について」から続いていたLP(ランディングページ)制作も、ひとまずは落ち着いたかのように見えた。クライアントもいろいろとWebの最新情報を集めているようで、次なる要望を伝えるメールが届いた。スマホで見てもPCと同じレイアウトだから、ちょっと使いにくいので、スマホで見たときはレイアウトを変える方法、「レスポンシブ」っていうのですか、アレをやってほしいのです。Cloud」なら何とかなるのだろうか......。「レスポンシブWebデザイン」(以下、レスポンシブデザイン)というのは、デバイスの情報を基にしてURLを振り分けることなく、同じページでCSSを切り替えて表示する方法のことだ。CSSファイル一つで完結するので、サーバー側に手を入れなくていいことと、URLがPCと同じになるのでコンテンツが分散せず、SEOに有利とされている。Reflow)がある。Reflowを選択した。Reflowは、以前まではモックアップレベルのレスポンシブなWebを作ることができたが、最新バージョンからはリリースして問題ないレベルのHTMLを書き出せるようになった。これを使わない手はないだろう。ReflowはPhotoshopで作ったカンプを「動くレベル」のモックアップにする目的が強かった。Reflowが解釈してアセットに変換してくれる。ReflowでPSDを利用するにはプラグインをインストールする必要がある。PSD」も用意されているので、併せてダウンロードすれば、レイヤーの構成をどうすればいいのかだいたい分かるようになっている。ReflowとPhotoshopが連携するようになる。Page」のボタンをクリックすることで、読み込みが行われる。Assets」をクリックすればよい。Page」は繰り返し操作することでページを追加できる。Sync」を有効にしておくと、PSDが更新されたタイミングでアセットを更新してくれる。読み込んだところ、レイアウトはほぼ再現されている。レイヤーのグループがdivのグループとしてまとめられ、グループ内にある画像は背景画像として処理されるようだ。レイヤー名に拡張子を入れると、それは画像アセットとして認識される。レイヤーを非表示にしておくと読み込み対象から外れる。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。