モバイルファーストに効く、Photoshopによるワイヤフレーム／デザインカンプの作り方：スマホカメラとタッチで変わる制作現場（4）（3/3 ページ）

[岡本紳吾，hatte Inc.]

Adobe Stockから写真を入手し、デザインカンプとしての完成度を高める

　ワイヤフレームが完成したらCreative Cloudのアプリケーションから「Adobe Stock」のタブを選択し、写真の検索を行おう。筆者は、ここではファッションの写真を検索しているが、好きなテーマで検索してもらって構わない。

Creative Cloudのアプリケーションから直接写真を検索できる

　検索結果はブラウザに表示されるので、欲しい写真のプレビューをライブラリに保存していこう。この場で写真を購入することも可能だが、デザインカンプ制作時は写真のプレビューを使った方がいいだろう。

ここでは「デザインスペース」というライブラリを作って、写真を保存している

　Creative Cloudの同期が有効なら、ライブラリに保存した写真はPhotoshopからすぐに利用できるようになる。

デザインカンプとしての完成度を高めたいので、Adobe Stockの写真をワイヤフレームに当て込んでいく

横幅を大体合わせておいて、写真が入るプレースホルダーの上に大体の位置で並べておく

　ここでデザインスペースを出て標準のPhotoshopで「マスク」の設定を行う。デザインスペースでもマスクは作れるが、まとまった処理では標準のPhotoshopの方が筆者は使いやすかったので、このようにした。

プレースホルダーを写真の下に置いて、写真のクリッピングパスとして適用することで切り抜きを行った

　この作業の最中もAdobe Preview CC上の表示はリアルタイムで更新されていく。

アセットの書き出す

　デザインスペースでは、右上にある「書き出し」パネルで選択しているアセットを書き出すことができる。

「書き出し」パネル

　グループ化している状態のものを選択した場合も、きちんとグループ化された状態で書き出され、グループ内にあるものを書き出し設定しておけば、サムネイルと、要素全体を念のため用意しておくといったこともできる。

要素全体をレイアウト確認用にpng形式で書き出して

サムネイルを2倍の大きさでjpg形式で書き出す

　書き出し時はアートボード名やレイヤー名がファイル名にそのまま使われるので、書き出しに関わる部分はきちんと名前を付けておくといいだろう。

　書き出しの設定が終わればファイルの書き出しから設定された全てのアセットを書き出せる。

書き出ししたいファイルにチェックを入れる

書き出しが終わった状態。アートボードも書き出した

　本来であれば、デザインカンプだけではなく本番用のファイルもPhotoshopで作れるため、もっと複雑な書き出しが行われると考えられる。

次回は、アートボードを使ってDreamweaverでレスポンシブWebデザイン

　このように、Photoshopに搭載されたアートボードで複数画面のアセットを一度に書き出せるようになったのに加え、デザインスペースの登場でデザインカンプ制作の前段階からPhotoshopを使えるようになった。

　恐らく、ワイヤフレームなどは別のアプリケーションを使っている人もいると思うが、複数のアプリケーションをまたがず、Photoshopだけで完結するなら、学習コストも削減できるはずだ。

　デザインスペースはまだ「プレビュー」の状態にあるので、今後機能追加などが行われることが想定される。また、アドビはUI／UXの設計ツールとして「Project Comet」を開発中だ。こちらについては2016年2月現在公開されておらず、アドビのデモでしかその動きを見ることができないが、サイト設計にかかる時間の大幅な削減が期待される。

　ワイヤフレームやデザインカンプを他のアプリケーションで行っている方も、ぜひデザインスペースを利用した方法も試してみてはいかがだろうか。

　さて次回は、Dreamweaver CCが「2015.1」のアップデートでPhotoshopのアートボードを使ってレスポンシブWebデザインができるようになったので、今回作成したデザインカンプを使ってWebサイトに仕上げるまでを試してみよう。

筆者紹介

岡本 紳吾（おかもと しんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。

Twitter：@hage

Facebook：shingo.okamoto