Adobe(アドビ)製品のことなら、お気軽にお問い合わせください。

大塚商会 インサイドビジネスセンター

0120-434-466(平日 9:00~17:30)

注目度「高」デザインコミュニケーション実例と作業効率化をご紹介

実践ソリューションフェアの注目セミナーをダイジェスト版でお届け

デザインコミュニケーションを行う際のIllustrator、Photoshopの活用法を多くの実例を交えながらご紹介します。

注目度「高」デザインコミュニケーション実例と作業効率化をご紹介

この動画は音声が含まれます。再生時は音量がオフになっています。再生中に動画プレーヤーの音量を調節してください。[動画再生時間:56分37秒]

この動画の内容をテキストでご紹介

本日は多くの実例を交えながらデザインコミュニケーションを行っていく際、AdobeのPhotoshopやIllustratorといった代表的なアプリケーションをいかに使っていくのかをご紹介します。

Creative Cloud(以下CC)製品を中心にご紹介をしていきます。CCには印刷やデザインにまつわるアプリケーションだけではなく、写真の加工やモバイル、そしてユーザーエクスペリエンスやユーザーインターフェイスと呼ばれるユーザーの方に求められるコンテンツを提案するような技術・アプリケーションがあります。

Adobe Senseiで不足した背景色を自動で塗りつぶす

Adobe Senseiを使えば、中途半端な画像サイズであっても素早く最適なサイズにすることができます。今回はA4のチラシのサイズを想定し、切り抜きツールを使ってドラッグしながらサイズを変更してみましょう。回りの部分が透明な状態になりましたが、ここにも背景色を載せたいので選択しておきます。

「編集」から「コンテンツに応じた塗りつぶし」というメニューを選びます。こちらに人工知能の機能が搭載されており、自動で透明な部分が塗りつぶされました。フォークやキッチンツールの使わない部分は選択範囲から除外しておきます。

CC ライブラリのパネルに完成した画像をドラッグ&ドロップで放り込みます。作成した画像がクラウド経由でパネルに保存され、Illustratorで画面をクリックするとA4ぴったりの背景画像として読み出せます。画像を最背面に指定しておきましょう。
配置してみてバランスを変更したい場合は、ダブルクリックしてもう一度元画像を修正します。サイズ違いも思いのままにできるというのがAdobe Senseiのテクノロジーです。

続いて、画像の切り抜きも人工知能に任せてみましょう。「被写体を選択」を押すとあっという間に画像の中から被写体を選択し、鍋だけがセレクトされました。背景を見えない状態にするために「マスクを追加」を押すと切り抜かれます。CC ライブラリにドラッグして放り込みましょう。そして先程のIllustratorに戻り、切り抜かれた画像を任意のサイズにドラッグして配置すれば完成です。

素材はロイヤリティフリーのAdobe Stockから

Adobe Stockというロイヤリティフリーの素材であれば、さまざまな画像を利用でき、さらにAdobe Stockにはテンプレートが用意されているため、施工後のイメージやはめ込み画像などを簡単に作成することが可能です。

今回は化粧品のパッケージデザインイメージを作成してみましょう。キーワードを入力し、フィルタリングから目的に合った画像に絞っていきます。
ロイヤリティフリーの素材といってもライセンスが発生します。サンプルでダミーテキストを入れてみて実際に訴求できるかどうか試してみたい場合は、低解像度で透かしの入ったプレビュー版のデータをダウンロードいただけます。

パッケージデザインなどのサンプルを作りたい場合「テンプレート」に画像をはめ込むだけでオリジナルデザインが作成できます。
ラベルデータをダウンロードしてみましょう。「ここにデザインが入ります」と書かれている箇所をダブルクリックするとウィンドウが表示されます。既に作成されているデータやロゴなどを配置し上書き保存します。ウィンドウを閉じると先程のラベルに反映されていることが分かります。

テンプレートは一つ一つフォルダーにアイテムに分かれています。必要なアイテムのフォルダーを選択しCC ライブラリにドラッグ&ドロップすると登録できます。またWeb用に素材として使いたい場合やPowerPointなどに張り込みたいといった場合、右クリックしてPNGに書き出します。

PowerPointでも利用できるようにプラグインが用意されています。挿入メニューの「アドイン」からAdobe Stockのアドインを取得します。ここから必要なイメージを検索し、PowerPointの画面に配置します。
画像の調整などもPowerPoint上で行えるため、スキルに自信がない方でも使いたい画像さえ見つければすぐにお使いいただけます。

Adobe Fontsで文字にもこだわり、動きのあるデザインに

Adobe Fontsでは欧文書体で15,000フォント、日本語書体も200フォント近くものさまざまな書体をご用意しています。用途に合わせたフォントパックもご用意しています。
インストールした書体はIllustratorやPhotoshop以外のさまざまなアプリケーションでご利用いただけます。

「文字タッチツール」ツールを使って、一部分のテキストを少し小さくし、チラシイメージに動きを付けてみましょう。クリックするとバウンディングボックスが表示されますので、ドラッグしてサイズ変更して角度なども調整します。あっという間に動きのあるタイトル・題字に仕上がりました。

CCライブラリは同じプロジェクトのメンバーであれば、ロゴや切り抜いた画像を共有することも可能です。
「フォルダー共有」を押すとブラウザーが立ち上がります。共有相手のメールアドレスまたはAdobe IDを入力し、相手は閲覧のみなのか編集可能なのか選択します。

ファイルのストレージをご紹介します。デスクトップツールから「ファイル」、「フォルダーを開く」を押します。ここで立ち上がったフォルダーの中身は、ご契約いただいているCCのストレージと一対一でひも付いている状態です。
手をつないでいるアイコンのフォルダーは「複数の人とこのフォルダーを共有している」という証しになります。共有方法はライブラリと同様、右クリックをしてファイル共有から行えます。権限を削除すれば相手の環境からデータはなくなります。モバイル端末とも同期ができますので移動中にデータを送ることもできます。

CCだけではなくAdobeではさまざまなPCやモバイル端末と同期して利用できるアプリケーションを数多くご用意しています。
例えば、手書きで起こしたイラストやロゴデータの写真を撮ると自動的にトレースして、Illustratorなどで使えるベクターデータに変換するAdobe Captureというアプリなどがあります。

3Dデータと合わせてさらに見栄え良く

Adobe Dimensionを利用すると、3Dデータと組み合わせて見栄え良く訴求力の高いパッケージデザインを内製できます。今回は景観シミュレーションのデータを作ってみたいと思います。
PhotoshopやIllustratorで背景画像を用意し、クリックするだけでアートボードに画像を配置できます。「カメラのパースを合わせる」にチェックを入れOKを押せば配置した画像のパースを自動検出し、それに合わせてDimensionのパースも設定できました。

赤い車を配置してみます。変形ツール、拡大縮小ツールを選択し、Shiftキーを押しながら任意のサイズに調整しましょう。この駐車場にピッタリ合うように回転させます。
操作に慣れてくればショートカットキーをご使用いただければと思います。

金属のポールを配置しテクスチャーやマテリアル情報も変えてみましょう。真ちゅうのポールにしようと思ったら真ちゅうマテリアルをドラッグして配置するだけで変更できます。CC ライブラリにAdobe Stockから3Dモデルやマテリアル情報を事前にダウンロードしておけば、その情報をドラッグ&ドロップで反映させることも可能です。

この車にブランドのロゴ、シールなどの塗装を施しましょう。
ライブラリパネルに登録したデータをドラッグ&ドロップすると、映り込みや角度などの情報も反映された状態で画像をマッピングできました。カメラのアングル位置なども登録しておけますので、環境光の強度なども調整してより自然に仕上げられます。

Photoshopで作った3Dデータは、3D PDFとして書き出せます。バッグの3Dデータ・objデータをPhotoshopにドラッグ&ドロップして読み込みます。360°さまざまな角度から見たり、色や布のテクスチャーを変更したりといったカスタマイズも可能です。

プレゼン用途として使う場合は3D PDFとして書き出しし、PDFにしましょう。書き出されたPDFをダブルクリックしてAdobeのAcrobatで表示します。画面で見るだけではただの画像ですが、オプションをクリックしてこのバッグの部分をもう一度クリックすると、3Dデータが埋め込まれている状態になりました。

もう一つ新しいアプリケーション「Adobe XD」をご紹介します。Adobe XDとはWebやアプリケーションのユーザーインターフェイス、ユーザーエクスペリエンスを開発するためのアプリです。

Excelデータをそのままコピー&ペーストしてXDに持ってきます。グラフがない状態のものとグラフがある状態にした二つの画面を「自動アニメーション」機能でつなぐと、あっという間にグラフが伸びるというアニメーションが作成されました。

最後に少し高度なアニメーションの作り込みをご覧ください。
画面をタップすると切り替わりますので、専門知識がなくてもXDであればさまざまなアニメーションが作れます。作ったアニメーションはAfter Effectsなどの動画アプリケーションでより細かく作り込むことも可能です。

本動画でのご紹介サービス

PhotoshopやIllustratorをはじめ、Adobe XD、Dimensionなどのクリエイティブ制作に役立つアプリケーション一覧です。

素材のAdobe Stock、フォントのAdobe Fontsなど制作アプリケーションの環境をさらに便利にするサービス一覧です。

Adobe(アドビ)製品 導入事例をご紹介