Web制作時に欠かせない「ワイヤーフレーム」。
ホームページのトップから下層ページの構成図（資料用サイトマップ）を作った後、各ページごとのコンテンツ順位を決定する際に作成します。
私は最近もビジュアルデザイン作業もやっていますが、ディレクターさんごとにワイヤーフレームの作り方もそれぞれ違いわかりやすい物から、わかりづらい物まで様々あります。
ビジュアルデザインを作成する際の指針になるのでなるべくわかりやすいワイヤーフレームを作成することで、デザイナーさんとの圧倒的にやりとりが効率的になります。
私がワイヤーフレームを作成する際には極力シンプルに、でもクライアントの意向を反映させつつ、UI/UXを考えた設計になることを心がけるようにしていますが、作業を効率的に行うためにどのツールを使うかいつも悩みます。
そこでiPadを使い始めてから、便利だなーと感じたワイヤーフレーム作成が直感的に作れてしまう「Adobe Comp」の使い方をご紹介します。
まずはアプリを入れましょう！
1.早速アプリを開くと、プロジェクト一覧のページが出てきます。右下の「＋」ボタンをタップすると新規作成ができます。
2.任意の作成サイズを選びましょう。
Web用、iPhoneやAndroid、Applewatchなどいろいろな種類のデバイス用のアートボードが揃っています。
印刷用もあるので、印刷出力したい場合にはそちらを使用します。
3.選んだサイズのアートボードが開きました！
真っ白なこの部分に、作成していきます。最初にざっくりと分けたいと思ったので、シェイプを開いて正方形のシェイプを配置します。
バウンディングボックスが配置時に表示されているので、サイズを調整。後で変更する場合は、任意のオブジェクトを選択すれば調整できます。
4.直感的に配置を繰り返せるので、どんどん進めていきます。
テキストは右上「T」のボタンをタップするとダミー文字のテキストが出現します。そしたら、配置したテキストが選択されている間は下に画像のようなメニューが出てくるので、フォントやスタイル、右寄せ・中央寄せ・左寄せなど見やすい設定を行っていきます。
5.オブジェクト同士の整列を行いたい場合には、２つ以上のオブジェクトを選択（キーボードshift+タップ）すると、下の整列メニューがでてくるので任意のルールをタップして完了。
すごく簡単ですよね。
6.オブジェクトカラーを変更する場合にも、変更したいオブジェクトを選択して下のメニューから「ピッカー」「テーマ」「Stockテンプレート」から選べます。
テーマを使用すると他の色と併せて配色もできますよ。
6.オブジェクトには写真も挿入できます。クライアントの要望イメージを伝える事もすぐにできるので大変便利です。
例えば、キャッチコピーなどは字間や行間も大切なのでその調整も下のメニューから調整できます。
7.最後は、共有ボタンでPhotoshopに送信したり、画像にして送ったりすることも簡単にできるので、複数で共有したい場合には作業がスムーズに行えます。
ちなみに、私のPC版のPhotoshopにも共有した場合のレイヤー構成はこんな感じでした。
このほかに、描画ジェスチャーを使用して手描きでも同じ作業ができます。
これ覚えたらすごく便利ですね。クライアントの前でさささっとこんなレイアウトイメージですと作りながら説明することができると思います。
