フレーム素材でスマホ向けコンテンツ・サービスのビジュアルを簡単に｜Adobe Stock人気素材レビュー 07

デザイン・制作をしていると、もっと雰囲気のある写真がほしい、わかりやすいイラストを入れたい、背景にテクスチャがほしいといった“あと一歩”の素材がほしいときがあります。
グラフィックからweb、映像、アニメーションに至るまで、さまざまなジャンルのデザインアプリケーションを提供しているアドビは、こうした“素材が足りない”という状況をサポートするためのサービス「Adobe Stock」を展開しています。提供している素材は、写真、イラストだけでなく、ベクター、ビデオ、オーディオ、デザインテンプレートまで取り揃え、その数はおよそ2億7千点以上（2021年10月現在）。
特にテンプレートはそのままデザインのベースにするだけでなく、デザインアプリケーションとの組み合わせでかんたんにアレンジすることができ、その活用法は無限大です。
ここではAdobe Stockで提供されている膨大な素材の中から、ダウンロード数が多いものを取り上げ、具体的な使いかたと、素材をアレンジするコツについて紹介していきます。

スマホ“らしさ”をプラスするビジュアル素材

今回紹介するのは「スマホフレーム素材」です。
代表的なスマホのデザインが画面部分が抜けた状態で素材になっているので、中にさまざまなコンテンツをはめ込むことで、スマホ向けサービス、スマホ向けコンテンツとひと目でわかるビジュアルを作ることができるようになっています。

ファイルはAdobe Photoshopのほか、さまざまな画像編集アプリで扱うことができるJPEG形式、Adobe Illustratorで扱うことができるベクターデータ・AI形式、2種類の形式で提供されていますが、こうした素材の中にはフレームの中が抜けていることがわかるように、背景に模様を入れているものがあります。この場合、JPEG形式では模様が残っているケースがあるため、AI形式のファイルを使って、フレーム部分だけを使用します。

今回紹介する素材をAI形式でダウンロードすると、上のようになっています。
背景の市松模様によってフレーム内には色が設定されていない＝中に写真やコンテンツを入れられることがわかります。デザイン上、この模様は不要なので、模様を削除して使用する、またはフレームだけをデザインファイルにコピーしましょう。

フレームの中に写真を入れる、またはスマホのスクリーンキャプチャをフレームの中に入れると上のようになります。操作中のスマホを撮影すると鮮明に仕上がらないことがありますが、フレーム素材を生かした合成なら、中に入れる画像を用意するだけで、すばやく操作画面等を作ることができます。
Illustratorで写真を合成するには、フレームのかたちのオブジェクトを使い、写真にクリッピングマスクを設定するだけです。

クリッピングマスクの作成方法 （Illustrator）
https://helpx.adobe.com/jp/illustrator/kb/224369.html

パソコンのフレーム素材と組み合わせる

合成用のフレーム素材はスマホだけではありません。
Adobe Stockにはタブレットやパソコン等、さまざまな画面合成用素材が提供されています。

たとえば、上のような「ノートパソコンの画面合成用素材」と組み合わせれば、オンラインストアの広告もすばやく作ることができます。

上の画像は、パソコン画面合成用フレームと、スマホ画面合成用フレームを使い、ショッピングサイトの画面を合成したものです。こうしたビジュアルを加えることで、サイトがパソコン、スマホいずれでも利用できることがすぐに伝わるようになります。

イラスト素材と組み合わせて、動きのあるデザインに

フレーム素材をデザインの要素として活かせば、さらにインパクトのあるデザインをすばやく作ることができます。たとえば、イラスト素材と組み合わせて、そこから飛び出すようなレイアウトにすれば、スマホで利用できるサービス・コンテンツであることをさりげなく伝えることができます。

Adobe StockにはこうしたIllustratorやPhotoshopで使える合成用素材が数多く提供されています。自分で撮影するには難しい素材や、製品ロゴのない素材を使いたいときには、「合成用」「フレーム」等のキーワードで検索をしてみましょう。

［今回紹介したAdobe Stock素材］
スマホの画面合成用素材
ノートパソコンの画面合成用素材