Webデザイン

2016.10.26 2016.12.12

いつでもどこでも簡単に作成できる! Adobe Comp CCを使って印刷物やWEBのレイアウトを作ってみよう。

タグ:,

Web制作担当のnoriです。

印刷物やWebサイト制作の際に、IllustratorやPhotoshopを使ってワイヤーフレームやレイアウトを作る人が多いと思いますが「Adobe Comp CC」というアプリを使ったことはありますか?

Adobe Comp CCは、頭に浮かんだアイデアをスマートフォンやタブレットで素早く簡単に形にすることができるので、パソコンに入ったAdobeソフトと組み合わせて使うととても便利なアプリです。

ここでは、Adobe Comp CCの基本的な使い方と、PCのAdobeソフトと組み合わせて使う方法をご紹介いたします。

Adobe Comp CCについて

スマートフォンやタブレット用にAdobeが開発したアプリで、2015年3月にリリースされました。

指で直感的に書いたり、実際の素材を使用して、完成のイメージに近いレイアウトをつくることができます。また、Adobe Creative Cloudを契約していると、Illustratorやphotoshopなどへ書きだしや、Typekitでダウンロードしたフォントを使うこともできます。

Webサイトのレイアウトを作ってみよう!

①Adobeアカウントを登録する

ダウンロードしたアプリを起動します。

起動するとAdobeのアカウントを選択する画面が表示されます。パソコン上のphotoshopやIllustratorなどと共有して使う場合は、同じアカウントでログインしましょう。また、Adobeアカウントは無料で作ることができるので、新しいアカウントを作成してタブレットやスマホのみで使うこともできます。

②新規のプロジェクトを追加する

Adobe IDの登録が終わると、使い方の説明が表示されます。

簡単な手順を分かりやすく読むことができるので、ここで大まかな使い方の流れを覚えておきましょう。

次に進んだ画面で、サンプルカンプの左側にある+マークをタップすると、新しいプロジェクトを作成することができます。

 

③形式を選択して画面を作成する

形式を選択する画面が表示されます。制作物のサイズを選ぶことができるので制作物に合わせて選択しましょう。

④選択した画面にオブジェクトを描画する

オブジェクトは右上の三角と丸が重なったアイコン「シェイプ」から選択することができます。

また、下のようにタブレットやスマホに指でオブジェクトを書くと、自動で認識して形にしてくれるので直感的に使うこともできます。

他にも、右上のアイコンを選択するとさまざまなオブジェクトを作成することができます。

「T」アイコンをタップすると「見出し」「小見出し」「段落」などのテキストをセットすることができます。下のように、フォントを選択したり、「Typekit」から新しいフォントを追加したりすることもできます。

「画像」アイコンをタップすると、カメラでの写真撮影や、デバイス上に保存してある画像を選択してセットすることができます。他にも、「Adobe Stock」の画像を直接選択することもできるので便利です。

実際に作成したものを「自動モックアップ」で確認することもできます。

⑤パソコンのAdobeソフトと共有する方法

スマホやタブレットのAdobe Comp CCでイメージを作成した後は右上のアイコンから送り先を選択して、パソコンのPhotoshop・Illustrator・InDesignなどに送ることができます。仕上げはPCを使うことができるので便利ですね。

では、実際にパソコン上で使っているphotoshopに送ってみましょう。

送られてきました。作った順にレイヤーも分かれているので、このまま仕上げの作業をphotoshopで作業することができます。

最後に・・・

他にも、画像加工に使うPhotoshop MixやPhotoshop Fixなどのアプリと連携させてイメージに配置した画像を編集することもできるなど、便利な機能がたくさんあります。

また、クライアントとの打ち合わせの際にデザインがないと、お互いのイメージがつかめないことがあると思います。

そのような場合に、Adobe Comp CCのジェスチャー機能を使って、土台となる簡単なイメージを共有しておくと、その後の作業もスムーズに進むようになるのではないでしょうか。

使い方次第でとても便利に使えるAdobe Comp CC。

効率良く仕事を進める便利ツールとして使ってみてはいかがでしょうか。