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

Wix Studio エディタ:ベクターアートとベーシックシェイプを操作する

5分
印象的なベクターアートとベーシックシェイプを使用すると、サイトのデザインを強化することができます。これらのイラストやアイコン(SVG ファイル)は、どのような画面サイズでも画質が維持されるため、レスポンシブなサイトに最適です。ベクターアートとベーシックシェイプは、Wix Studio エディタから無料のものを選択するか、クライアントのサイトに合わせて独自のものをアップロードすることが可能です。
ヒント:
ベクターアートとベーシックシェイプはともに SVG ファイルですが、ベクターアートが複数の色で構成されるのに対し、ベーシックシェイプは単色で構成されます。

ベクターアートとベーシックシェイプを追加する

ベクターアートとベーシックシェイプを使用して、クライアントのサイトを装飾したり、魅力的な CTA を作成しましょう。これらは、Wix Studio エディタから無料のものを選択することも、独自のものをアップロードすることも可能です。
詳細については以下のオプションをクリックしてください。
ベクターアートの「おすすめ」のカテゴリーに、Wix が提供する無料のベクターアートが表示されている様子を示したスクリーンショット。

ベクターアートとベーシックシェイプをデザインする

ベクターアートまたはベーシックシェイプの色、不透明度、影などを編集して、これらの要素のデザインをカスタマイズします。
注意:
利用可能なカスタマイズオプションは、ベクターアートが単色、複数の色、またはグレースケールで構成されているかによって異なります。

デザインをカスタマイズする方法:

  1. エディタに移動します
  2. 該当するベクターアート要素、またはベーシックシェイプ要素を選択します。
  3. エディタ右上の「要素設定パネルを開く」アイコン  をクリックします。
Wix Studio エディタで「要素設定パネル」を開いているスクリーンショット。
  1. 利用可能なオプションを使用して、ベクターアートまたはベーシックシェイプをデザインします:
    • ベーシックシェイプ:塗りつぶし色、不透明度・色を変更し、枠線を追加して影を適用します。
    • ベクターアート:塗りつぶし色を変更し、不透明度を調整して、影を適用します。
      注意:ベクターアートの色ごとに、個別に不透明度を変更することはできません。
独自の SVG ファイルをアップロードした場合:
SVG ファイルの色が認識されない場合は、エディタで色をカスタマイズすることができない可能性があります。
要素設定パネルの「色を選択」セクションに、ベクターアート用に 6色のオプションが表示されている様子を示したスクリーンショット。

ベクターアートとベーシックシェイプの設定を調整する

ベクターアートとベーシックシェイプの設定は、好みに合わせて調整することができます。リンクを追加したり、代替テキストで要素をアクセシブルにしたり、装飾要素として設定したりすることができます。また、サイズを変更した際に、縦横比を維持するかどうかを選択することもできます。

設定を調整する方法:

  1. エディタに移動します
  2. 該当するベクターアート要素、またはベーシックシェイプ要素を選択します。
  3. 設定」アイコン  をクリックします。
  4. 実行する内容を選択します:
    • ベクターアートまたはベーシックシェイプにリンクを追加します。
    • この要素に代替テキストを追加するかどうかを決定します:
      • 画像の内容を説明:ベクターアートまたはベーシックシェイプの内容を説明するテキストを入力し、SEO やアクセシビリティを向上させます。
      • この画像は装飾的なものです:ベクターアートまたはベーシックシェイプを装飾目的で使用し、スクリーンリーダーにとって重要な情報が含まれていない場合は、このオプションを選択します。
    • 縦横比を維持」トグルを有効にして、要素のサイズを変更しても、元の縦横比が維持されるようにします。
ベクターアートを、装飾目的として使用するように設定した様子。

ベクターアートやベーシックシェイプにリンクを追加して、これらの要素をボタンや特定の行動を促すための CTA として機能させます。サイト内のページ、外部 URL、電話番号など、さまざまな場所にリンクさせることができます。リンクを追加すると、サイト訪問者のインタラクションを促すことができます。

リンクを追加する方法:

  1. エディタに移動します
  2. 該当するベクターアート要素、またはベーシックシェイプ要素を選択します。
  3. リンクを追加」アイコン  をクリックします。
  4. 左側のリストからリンクの種類を選択します。
  5. リンク情報を入力します。
  6. 完了」をクリックします。
ベクターアート要素に、リンクを設定している様子を示したスクリーンショット。