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

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

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

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

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

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

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

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

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

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

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

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などの動画アプリケーションでより細かく作り込むことも可能です。