header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image
この記事では下記を説明します:
  • 画像のフィットモードを選択する
  • 画像をクロップする
  • 画像の焦点を設定する
  • 画像をシェイプでマスクする
  • Wix フォトスタジオで画像を編集する
  • 著作権保護のためにウォーターマークを追加する

Wix Studio エディタ:画像を編集・カスタマイズする

7分
この記事内
  • 画像のフィットモードを選択する
  • 画像をクロップする
  • 画像の焦点を設定する
  • 画像をシェイプでマスクする
  • Wix フォトスタジオで画像を編集する
  • 著作権保護のためにウォーターマークを追加する
Wix Studio エディタのパワフルな編集・カスタマイズオプションを使用して、クライアントサイトの画像を強化しましょう。画像のサイズを調整し、主要な詳細にフォーカスしたクロップや焦点を設定して、最も重要な箇所がすべての画面サイズで常に表示されるようにします。フォトスタジオを使用して高度な編集を行い、作品を保護するためのウォーターマークを簡単に追加することができます。
ヒント:
画像にはフィルパララックスとフィルリヴィールというユニークなスクロールアニメーションがあり、サイト訪問者の体験をよりダイナミックにするのに役立ちます。

画像のフィットモードを選択する

Wix Studio エディタでは、すべての画像にレスポンシブコンテナのように機能するバウンディングボックスがあります。これらは、画像の周りに表示される青い枠で表されます。バウンディングボックス内での画像の表示方法を選択することができます(例: 拡大、フィットなど)。

画像のフィットモードを選択する方法:

  1. 該当する画像を選択します。
  2. 設定」アイコン  をクリックします。
  3. 表示モード」ドロップダウンからオプションを選択します:
ブレイクポイントを操作する場合:
画像に選択した表示モードは、すべてのブレイクポイントに適用されます。

画像をクロップする

ブレイクポイントごとに画像のクロップ(切り抜き)方法を選択できます。これにより、仕様に合わせて画像をさらにカスタマイズできるだけでなく、すべてのデバイスの訪問者に理想的な体験を提供できます。

画像をクロップする方法:

  1. Wix Studio エディタ上部で該当するブレイクポイントをクリックします。
  2. 画像を選択します。
  3. クロップ」アイコン  をクリックします。
  4. ニーズに合わせてクロップをカスタマイズします。
  5. 適用」をクリックします。
Wix Studio エディタで画像をクロップしています
ヒント:
画像のクロップを解除したい場合は、「設定」アイコン  をクリックし、「画像をリセット」をクリックすることでリセットできます。

画像の焦点を設定する

ブレイクポイントごとに画像の焦点を選択できます。 これにより、異なる画面サイズの異なるブレイクポイントでサイズが変更されたときに、画像のどの部分を表示するかを選択できます。
ヒント:
主な顔が検出されると、自動的に画像の焦点として設定されます。必要に応じて焦点を変更または調整できます。

画像の焦点を設定する

  1. エディタ上部で該当するブレイクポイントをクリックします。
  2. 画像を選択します。
  3. 焦点」アイコン  をクリックします。
  4. サイズ変更時に表示したい画像の範囲を選択します。
Wix Studio エディタで画像の焦点を選択しています

画像をシェイプでマスクする

画像マスクを使用すると、画像をさまざまなシェイプに簡単にクロップできるため、デザインにシームレスにフィットする柔軟性が得られます。数千ものユニークなデザインから選択するか、独自の SVG ファイルをアップロードしましょう。

画像をマスクする方法:

  1. 該当する画像を選択します。
  2. マスク」アイコン  をクリックします。
  3. シェイプを選択します:
    • パネルで利用可能なシェイプを確認します。
    • 追加」アイコン  をクリックして、他のデザインを参照するか、自身のファイルをアップロードします。
  4. (オプション)「シェイプの比率にリセット」をクリックして、画像をシェイプの元のアスペクト比に合わせます。
    注意:これにより、画像のサイズが変更される場合があります。
Wix Studio エディタで画像に異なるマスクを適用しています
気が変わりましたか?
パネルの上部にある正方形のシェイプをクリックします。これにより、以前に画像に適用されたマスクが削除されます。

Wix フォトスタジオで画像を編集する

Wix フォトスタジオを使用して、エディタを離れることなく美しい画像を作成しましょう。フォトスタジオでは、すでにアップロードした画像をカスタマイズし、新しく編集したバージョンをメディアマネージャーに保存することができます。
フィルター、回転、オーバーレイなど、さまざまな編集オプションが用意されているため、その場で画像を一新することができます。
ヒント:
サムネイル画像下の「クロップ・編集」をクリックして、メディアマネージャーから直接画像を編集することもできます。

画像を編集する方法:

  1. エディタで該当する画像を選択します。
  2. 設定」アイコン  をクリックします。
  3. 調整」をクリックします。
  4. (フォトスタジオで)利用可能なオプションを使用して画像を編集します。
  5. 追加」をクリックします。
次のステップ:
Wix フォトスタジオが画像ソースに変更を加えると、新しく編集されたバージョンはすべてのブレイクポイントで自動的に置き換えられます。ただし、キャンバス上で行った変更(画像デザインまたはクロップ)は、現在のブレイクポイントにのみ適用されます。
Wix フォトスタジオで画像を編集しています

フォトスタジオでウォーターマークテキストを追加してサイトの画像を保護しましょう。テキストはクライアントに合わせてデザイン・カスタマイズが可能で、ダウンロードしてもファイルから削除することはできません。

画像にウォーターマークを追加する方法:

  1. エディタで画像を選択します。
  2. 設定」アイコン  をクリックします。
  3. 調整」をクリックします。
  4. (フォトスタジオで)「要素を追加」下で「テキスト」をクリックします。
  5. テキストスタイルを参照し、クリックして画像に追加します。
  6. ウォーターマークのメッセージテキストを入力します。
  7. (オプション)「デザイン」をクリックしてテキストをカスタマイズします。
  8. 追加」をクリックします。
Wix フォトスタジオで画像を編集しています

Helpmate

こんにちは、さん

さらにヘルプが必要ですか?
この記事の概要
Unlock personalized helpLog in to get the most out of Helpmate.