WEBと音楽と雑記

WEBエンジニアがWEBのことや音楽、ガジェットなど興味のあるものを紹介するブログ。

iPadでどこでもWEBデザイン!Adobe Comp CCが便利!

スポンサーリンク

Webデザインの仕事をしていると

  • いいアイデアが思いついた時に限ってパソコンが手元にない...。
  • 打ち合わせ先でイメージを伝える時に紙ではちょっと心もとない...。

そんな経験ありますよね。

そんな時にとても便利なアプリがAdobeから出ていたんです!

その名も「Adobe Comp CC」
www.adobe.com


Adobe Comp CCについては1年前くらい前から小耳に挟んでいたのですが、
当時は日本でのリリースはまだ先ということで記憶から消し去られていたのですが
知らぬ間にリリースされていました。汗


というわけで早速Adobe Comp CCを使って飲食店のデザインカンプを作ってみましたー!!
30分くらいでサクっと作ったので雑なところは勘弁してください。汗

f:id:kowakix:20160218222917p:plain

新規カンプを作る

Adobe Comp CCを開いたらこのような画面がでてきます。
今回は一から作るのでまずは新規カンプを作成します。
左サイドの「+」ボタンをタップ!
f:id:kowakix:20160219010731p:plain


すると形式を選択する画面へと移ります。
オリジナルのサイズで作成したので「新しい形式」をタップ!
サイズは1200 x 2000で作成しました。
f:id:kowakix:20160219010942p:plain


これで準備完了です!


f:id:kowakix:20160219011608p:plain


フレームワークを作る

さて次はWEBサイトの骨組みであるフレームワークを作成します。

ガイド線を引く

まずはガイド線を引きます。
右上の歯車マークから「グリッドとガイド」を選択
f:id:kowakix:20160219011943p:plain


ガイド線を引く幅が選択できるので丁度いいサイズにガイド線を引きます。
今回は横幅は1100で引きました。
f:id:kowakix:20160219012223p:plain


ヘッダーを作る

これぞAdobe Comp CCの魅力です!
こんな風に適当になぞった線が...
f:id:kowakix:20160219012530p:plain


お見事!綺麗なグレーの四角形オブジェクトに変貌しました!
f:id:kowakix:20160219012649p:plain


画像を貼る場所を作る

画像を貼りたい場所は四角の中にバツ印を描きます。
f:id:kowakix:20160219234042p:plain


これで準備完了です!
f:id:kowakix:20160219234051p:plain


円を描く

円もきちんと認識してくれるのです!
こちらにも画像を貼る予定なのでバツ印を描きます。
f:id:kowakix:20160219234338p:plain


テキストを入れるスペースを作る

テキストを入れたい場所には3本ラインを描きます。
f:id:kowakix:20160219234557p:plain


テキストが入りました!
右側に出てくるバーでフォントサイズも自由自在です!
f:id:kowakix:20160219234906p:plain


今までご紹介したような工程を繰り返すとこのようになります!
Webサイトっぽくなってきましたね!
いわゆるワイヤーフレームという状態になりました。
f:id:kowakix:20160219235156p:plain


これからは装飾をしていこうと思います!


画像を貼る

ただバツ印がついただけでは画像っぽく見えないしできれば実際に画像を貼りたいところですよね!
そんなときは画像を入れる部分をダブルタップします。
すると下から写真を選択する画面が立ち上がります。

f:id:kowakix:20160220000554p:plain

自分の写真フォルダからの選択もできますし、Adobe Stockから画像を引っ張ってこれたりもします!
※今回はサンプルということでAdobe Stockから透かし入りの画像を拝借しています。

画面もぴったりですね!!
f:id:kowakix:20160220005940p:plain


色を変える

ヘッダーもフッターもグレーのままでは雰囲気がでませんね。
というわけで設置したオブジェクトの色を変えてみましょう!

色を変えたいオブジェクトを選択します。
f:id:kowakix:20160220010533p:plain

下部ツールバーの左端をタップするとカラーピッカーが立ち上がります!
好きな色に変えちゃいましょう!
f:id:kowakix:20160220010652p:plain


文章を書く

さてさてかなりWebサイトっぽくなってきましたが
アタリで入れたテキストではちょっとイメージしずらいですよね。
というわけで中にきちんと文章を打ち込んでみましょう!


編集したいテキスト文をタップするとキーボードが立ち上がります。
好きな文字を打ち込んでみましょう!
f:id:kowakix:20160220012332p:plain


また、下部ツールバーの「T」アイコンでフォントの大きさや種類を変えることができます。
f:id:kowakix:20160220012930p:plain


大見出しを作る

ちょっと大きめの見出しを作成したい場合は上部ツールバーの「T」をタップします。
f:id:kowakix:20160220013038p:plain


フォントを変える

通常の文章と差をつけたいので見出しはフォントを変えることにします。
f:id:kowakix:20160220013043p:plain


完成!

このような作業を繰り返していきこちらが完成になりました!

f:id:kowakix:20160218222917p:plain


ここまで所要時間30分!慣れてくればもっと早くできるようになると思います!
レイアウトの勉強をしたい時や出先でいいレイアウトを思いついた時にサッと描けちゃうんです!本当に便利!
Adobe Cleative Cloudを契約している方だとphotoshop,illustlatorなどへの書き出しや
Adobe Typekitでダウンロードしたフォントが使えたりとできることがグッと増えます!

iPadを持て余しているWebデザイナーさんがいたら是非活用してみてください〜。


僕自身もkindleで読書を始めたこともありIpadを持ち歩く率がグッと高まりました。

kindleについてはこちら
kowakix.hatenablog.com

広告を非表示にする