6月20日5 分

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

最終更新: 6月23日

アドビのデザインアプリ「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

編集チーム