Designare cafe

Step1 アートボードについて知ろう

Adobe社のアートボードの紹介ページです。
動画を見るだけでも、機能についてしっかり理解できるかと思います。

https://helpx.adobe.com/jp/photoshop/how-to/design-with-artboards.html

つまり、これはなんなのかと言いますと、複数のデバイス、もしくは複数の案を同じキャンバス上で作成することができる機能なんです！

Step2 実際に作成してみよう

例として作成しましたが、左がPC用、真ん中がタブレット用、右がスマホ用、といった形で編集することが可能です。
更にこのアートボード、左右の大きさを自在に変形、また、上下左右にあるプラスを押すと今編集しているアートボードと同じ高さや幅のサイズのアートボードが作成されます。もちろん、アートボード内で幅などを調整することができますので階層ページなどに使ってもOKです。
これだけでも、わざわざ新規アートボードを作成して、PCサイズ、スマホサイズに合わせて云々をする手間がなくなったのでとても便利になりました！
更に、レイヤー内の名前を変更することでよりわかりやすくなると思います。おすすめはコーディングも想定して名前ごとに横幅(width)を書くと視認しやすいのでコーディングやレイアウトをする際とても楽かと思います。
こんな感じです。
その他にも、要素によって切り替わる表示などもアートボードに記しておけばよりわかりやすいかもしれませんね。

Step3 スマートオブジェクトで反映させてみよう

さて、大元であるPC版のデザインもできてきて、次はスマホ版。
普通であれば、ここで別のファイルを新規作成してスマホ版用にページを作成していたかと思います。今度からはそんなことをする手間は必要ありません。隣のアートボードに追加すればいいだけです。
例として前回作成したWebサイトをもとに進めていきます。
foodの中にあるチョコレートパンケーキの画像をスマホサイトに移したいと考えている時、その画像を選択してコピーしながらドラッグ&ドロップすればいいだけです。楽チン！
注意点としては、きちんと指定したアートボードの中に入っているかということ。
ドラッグしている時に、どのアートボードに選択されているのか、というのがぱっと見わかるように表示されますが、誤ると別のアートボードに移動されたり、きちんと動作しなかったりしてしまいます。

Adobe Illustrator CC 2015もお持ちの方はイラストレーターで作成したデータをスマートオブジェクトから編集することができます。やり方は、レイヤーの画像の部分をダブルクリックするだけ。
先ほどコピーした内容そのままのものを持って来れば、そのコピーした画像もスマートオブジェクトの編集後に反映されるので、一つ一つ直す必要がありません。
以下、分かりやすく図で説明します。

はい、このような形で、スマートオブジェクト化されているので、編集もとても楽になりましたね。
一つや二つならともかく、複数の画像を沢山変更するとなるとかなりの時間と労力です。
時間短縮できるところはしていきましょう！