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

Adobe Creative CloudとスマートデバイスでWebデザインのワークスタイルはどう変わるのかを検証する連載。今回は、モバイル用サイト、PC用サイトのワイヤフレーム／デザインカンプを作り込むのに有効なPhotoshopの新機能を紹介しよう。

[岡本紳吾，hatte Inc.]

想定される画面数分の「アートボード」を用意する

　デザインスペースを有効にすると、「テンプレート」機能を使えるようになる。Photoshopで新規ドキュメントを作った場合、まず画面の大きさを指定する必要がある。テンプレート機能では、想定されているスマホの機種やPCの画面の大きさがあらかじめ用意されており、これを選択するだけで新規の「アートボード」を用意できる。

　「アートボード」とはPhotoshopのファイル形式に最近追加された概念で、それまでは1つのファイルにつきデザインできる領域は1つだけだったが、アートボード機能が追加されたことでドキュメント内に複数のデザイン領域を用意できるようになった。複数のアードボードの間でデザイン要素をコピーペーストすることが容易になり、共通したデザイン要素を持っている構成を作りやすくなる。例えば、今回のように、スマホ用、PC用のページを見比べながらデザインしたり、遷移する複数のページをまとめてデザインしたりするのに有効だろう。

　ひとまず、最初のアートボードはiPhone 6用、2枚目のアートボードはPC用として作業を進めよう。

新規でアートボードを作成した状態

テンプレートの項目が消えてしまうが、アートボードの追加は「レイヤー」メニューから行うようにすればOKだ

画面サイズの高さが足りない場合は、ドラッグして調整できる

デザインスペースでワイヤフレームを作りスマホ／タブレットで確認

　今回は、Webメディアのトップページを作ってみることにしたい。Webメディアのデザインの場合、PC版は一覧性、検索性を高めるためにタイルのように並べるレイアウトなる場合が多い。スマホ版は横幅が狭くなるので、1タイトル1行のレイアウトを組むことにしよう。

スマホ版のワイヤフレームをざっと組んだところ

　PC版には人気のコンテンツなどを表示するサイドバーエリアを用意し、スマホ版ではこれをヘッダの下に配置することにした。

PC版に要素をコピーして作業を続ける

　スマホのデザインをする際はサイドバーを利用することがないため、大抵はフッタエリアに持っていくことが多いだろう。もし、表示する必要がないのであれば、CSSで「display:none」にして非表示にするか、そもそも表示しないレイアウトを組んで、PC版のサイドバーも取ってしまうという方法も考えられるだろう。

ざっくりレイアウトが完了した

　ここでいったんデザインスペースを出る。ウィンドウの「Photoshopへ戻る」をクリックするか、画面右下に「Ps」のアイコンがあるので、これをクリックする。

　ウィンドウの「Device Preview」（デバイスプレビュー）を選択し、確認したいスマホ／タブレットを同一ネットワークに参加させるか、USBでPCに接続するかして、スマホ上でAdobe Preview CCを起動する。

　するとDevice Previewにデバイス名が出てくるので、クリックすることでデザインを確認できる。テキストの大きさは適切か、タップするエリアは十分に取られているかなど、実際に手にとって確認することが可能だ。