iPadとタッチ操作でデザインカンプが作れるプロトタイピングツールCompを使ってみた：スマホカメラとタッチで変わる制作現場（3）（1/2 ページ）

Adobe Creative CloudとスマートデバイスでWebデザインのワークスタイルはどう変わるのかを検証する連載。今回は、プロトタイピングアプリ「Comp」を使って簡単なWebデザインカンプを作成し、Photoshopで仕上げるというワークフローを紹介しよう。

[岡本紳吾，hatte Inc.]

連載目次

無料のiPad用プロトタイピングアプリ「Adobe Comp CC」

　Adobe Creative Cloud（以下、Creative Cloud）とスマートデバイスでWebデザインのワークスタイルはどう変わるのかを検証する本連載。前々回の「デザインネタをWebで探す人が知っておきたい、日ごろのネタ収集と活用を効率化する4つのアプリ」では、Creative Cloudのスマホ向けアプリ群「Adobe Shape CC」（以下、Shape）「Adobe Brush CC」（以下、Brush）「Adobe Color CC」（以下、Color）を使って、それぞれ形状、ブラシ、色の組み合わせをデザインの素材として収集し、Webストレージ「Creative Cloud Libraries」に保存する方法を紹介した。

　Shapeを使って作った「形状」のベクターデータは、そのままCreative Cloud Librariesを経由してIllustratorなどで利用できる。前回の「スマホで作った素材を実業務で生かすタッチUIなIllustratorの使い方＆ポートフォリオサービスで共有」では、作ったデータをIllustratorで編集し、簡単なワイヤーフレームを作る方法を紹介した。

　2015年6月16日、Creative Cloudが2015年版のメジャーアップデートを果たし、アドビ システムズ（以下、アドビ）のタブレット用アプリにデザインカンプのプロトタイピングアプリ「Adobe Comp CC」（以下、Comp）が追加された。CompはiPad上でWebデザインのプロトタイピングが行えるアプリだ。Creative Cloudのアカウントがあれば、無料で使うことができる。前々回紹介したShape、Color、Brushのデータを活用することもできる。

Adobe Comp CC

　今回は、このCompを使って簡単なWebデザインカンプを作成し、Photoshopで仕上げるというワークフローを紹介しよう。「タブレットでプロトタイプを作る」というのは、これまでもさまざまなアプリが存在していたが、Compはアドビが提供している他のアプリやサービスとの連携が取れるようになっていることで、他にはない実制作のフローに統合されている。

　アドビはかなり前にワイヤーフレームを作れるアプリを出していたことがあるが、Compは最近流行しているプロトタイピングツールをアドビ流にブラッシュアップさせたものといえるだろう。というのも、一般的なプロトタイピングツールがプロトタイプを作ったら、いったん完結するのに対し、Compは作成したプロトタイプをCreative Cloud Librariesを通じてPhotoshopやIllustrator、InDesignなどのデスクトップアプリに送信することで、デザインの最終工程へシームレスに移行することができるのだ。

ヒアリングの場ですぐに試作ができるComp

　ここからは、クライアントと打ち合わせをしているシーンを想定して、CompとCreative Cloudのさまざまなサービスを連携させてみよう。

クライアント

何かね、画像がほら、ドーン！ ってある感じで！ その上にタイトルと、サブカテゴリの写真が載っかっていて、ちょっと説明文を入れたいねん。

　矢継ぎ早に飛んでくるクライアントの要望をサクサクと画面に入力できればどれほど楽だろうか。上のような要望の場合、画像は取りあえず置いておいて、テキストだけをレイアウトしてから適当な画像を見つけてきて合わせるといったフローになるのではないだろうか？

　これがCompだったら、話を聞きながらレイアウトを作ることができてしまう。こんな感じに。

画像がほら、ドーン！

その上にタイトルと

サブカテゴリの写真が載っかっていて

ちょっと説明文を入れたい

完成

　ここに表示されているのは全部仮のものなので、もう少しイメージが湧くようにテキストを編集したり、写真を入れたりして仕上げればOKだ。