WixでAdobe Expressとの連携機能を使い、ホームページの画像を魅力的にデザインしよう

アドビのデザインアプリ「Adobe Express」が、Wix 上で使えるようになりました。Adobe Express は誰でも簡単に、画像や動画コンテンツを編集できるアプリです。無料で始められ、背景削除や画像生成といった AI 機能など様々な機能が利用できます。
本記事では Wix エディタ上で Adobe Express を使って、画像を編集する方法をご紹介します。
\いますぐ Wix でホームページを作成/
Adobe Expressとは
Adobe Express とは、誰でも簡単に魅力的なコンテンツが作れるデザインアプリです。
豊富なテンプレートが用意されていて、ホームページや SNS、Web 広告などで使用するコンテンツ、ロゴやチラシ、プレゼンテーション用の資料、動画などを作ることができ、無料で使えます。
また、高品質な画像やオーディオを提供する Adobe Stock や、数千ものフォントを提供している Adobe Fonts も Adobe Express の編集画面から直接使えます。これらの特長を活かして、様々な素材を組み合わせて思い通りのデザインを作成できます。
なお、Adobe Express にはブラウザで使える PC 版、スマートフォンやタブレットで利用できるアプリ版があります。同じアカウントでログインすれば、PC とアプリでスムーズにデータを共有することも可能です。

まずは Adobe Express に登録

Wix で Adobe Express の編集機能を使うには、Adobe Express のアカウント作成が必要です。すでに Adobe アカウントを持っている方は、お持ちの Adobe アカウントでログインできます。
Adobe Express は無料で利用できますが、有償版のプレミアムプランでは、無料プランよりもさらに多くの魅力的なテンプレートや、Adobe Fonts、Adobe Stock の画像、動画、オーディオ素材、大容量のストレージが使えるようになります。
気になる方はぜひこちらでチェックしてください。
ちなみに、Adobe Creative Cloud のコンプリートプランを契約している方は、Adobe Express のプレミアムプランの機能が利用可能です。
WixでAdobe Expressを使ってみよう
ここから Wix で Adobe Express を使う手順をご紹介します。
今回は Wix の「ブログ記事を作成」から画像を編集してみます。
まずは、「追加」から「画像」を選択し、編集したい画像をアップロード。
画像がアップロードされたら右下の「Adobe Expressで編集」をクリックしましょう。すると Adobe Express のメニューが表示されます。

生成塗りつぶしを使ってみよう
Adobe Express には、簡単なテキストを入力するだけで、画像内に新たなオブジェクトを生成したり、置き換えたりできる「生成塗りつぶし」という機能があります。早速使い方をみていきましょう。
画像を選択して「生成塗りつぶし」メニューをクリックします。
このとき、画像を生成したいエリアをブラシで塗りつぶすと、青いマスクがかかります。
そして生成したいものをテキストで入力します(ここでは「フルーツナイフと白い皿」と入力)。生成ボタンをクリックすると、青いマスク部分に画像が生成されます。

いちどの生成で3種類の画像が生成されますので、一番イメージに近い画像を選択します。生成された画像がイメージと違う場合は、テキストを変えて再度生成してみましょう。
背景を削除してみよう
Adobe Expressでは、ワンクリックするだけで自動で背景を削除できます。
画像を選択し、「背景を削除」をクリックすると、果物以外の背景がすべて削除されます。
「塗りつぶしなし」に設定すると背景を透明にできます。

消しゴムツールを使ってみよう
続いて、「消しゴムツール」を使って、画像の一部を削除してみましょう。
消しゴムツールでは自分で削除したい箇所を選ぶので、先ほど紹介した「背景削除」より細かい調整ができます。
画像を選択し、「消しゴム」をクリックします。ブラシのサイズを指定し、消したいエリアをドラッグすると、画像を消すことができます。

もし消しすぎた場合は「復元」で簡単に元に戻せます。
画像をトリミングしてみよう
Adobe Expressでは「切り抜き」機能を使って、好きな形に画像を切り抜くこともできます。
手順は、画像を選択して「切り抜き」をクリックし、後はトリミングしたい形を選択するだけ。直感的な操作で調整することができます。
トリミングした画像とデザイン素材を組み合わせて、魅力的な画像に仕上げましょう。

テキストをデザインしてみよう
Adobe Express ではテキスト要素を、簡単におしゃれなデザインにすることもできます。「デザイン素材」から好きな素材を選び、テキストを入力してフォントを変更します。「テキストレイアウト」の「ダイナミック」をクリックすると、自動でダイナミックにテキストが配置されます。

ちなみに、1番の「デザイン素材」で選べる素材は簡単に色を変更できます。1番のリボン形の素材はデフォルトでは金色ですが、上記の例では赤色に変更しています。
デザインが思いつかないときは、Adobe Express のさまざまなテンプレートを眺めて、アイデアを探すのもおすすめです。
Adobe Expressで編集したあなただけのデザインを、Wixで作成したホームページで活用しよう
Wix のエディタ上で Adobe Express を使えば、魅力的な画像・動画コンテンツを簡単にデザインし、より魅力的なホームページに仕上げることができます。
Wix と Adobe Express の連携機能を活用して、あなたのブログやホームページを素敵なものにしましょう。
\いますぐ Wix でホームページを作成/

Adobe Express
編集チーム