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

アクセシビリティ:画像とギャラリーを準備する

9分
視覚的な制約事項を持つ訪問者は、スクリーンリーダーなどの支援技術を使用してサイトを閲覧することがあります。代替テキストを使用して画像やギャラリーに説明を追加し、訪問者がアクセスできるようにしましょう。
代替テキストは、サイトのメディアに関する情報を提供し、検索エンジンやスクリーンリーダーがメディアを「読む」ために役立ちます。
Wix はどこで情報を入手しますか?

エディタで代替テキストを追加する

代替テキストを使用すると、スクリーンリーダーを使用する訪問者がサイトのコンテンツにアクセスして理解できるようになります。そのため、Wix ストアや Wix ブッキングなどのアプリに表示されるメディアを含む、関連するすべての画像に代替テキストを追加することをおすすめします。

単独の画像に追加する

「設定」パネルから、サイトビルダー(Wix エディタおよび Wix Studio エディタ)の画像に代替テキストを追加しましょう。
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします
  2. ページ上の画像をクリックします。
  3. 設定」アイコン  をクリックします。
  4. 画像の説明」下でテキストを入力します。
  5. キーボードの Enter キーを押して保存します。
エディタの画像設定パネル。代替テキスト欄が入力され、カーソルがその上にマウスオーバーしています。

ギャラリーに追加する

サイトのメディアマネージャーを使用して、ギャラリー画像に代替テキストを追加します。
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします
  2. ページ上のギャラリーをクリックします。
  3. メディアを管理」または「画像を追加・管理」をクリックします。
  4. 画像をクリックして選択します。
  5. 右側で画像のタイトルを入力します。
  6. (Wix プロギャラリーのみ)画像のタイトルと異なるものにしたい場合は、「代替テキスト」下で画像の代替テキストを編集します。
  7. 完了」をクリックします。
メディアマネージャー内のプロギャラリー。代替テキスト欄がハイライトされます。
ヒント:
代替テキストを反映させるには、必ずサイトを公開してください。
注意:
現在、画像やギャラリーに代替テキストを一括で追加することはできません。この機能をご希望の場合は、機能リクエストに投票してください。

アクセシビリティウィザードで代替テキストを追加する

アクセシビリティウィザードでサイトを確認している際、画像に代替テキストを追加するように求められる場合があります。ウィザードのタスクを使用して、サイト訪問者に短く明確な説明を提供することができます。
Wix エディタ
Wix Studio エディタ
ウィザードを使用して、サイト画像と Wix ストアやブッキングアプリに表示される画像に代替テキストを追加します。

サイト画像に代替テキストを追加する方法:

  1. エディタにアクセスします
  2. 画面上部の「設定」をクリックし、「アクセシビリティ設定」を選択します。
  3. 右側のアクセシビリティウィザードパネルで「サイトをスキャン」をクリックします。
  4. 代替テキスト」と表示されているカードを選択します。
  5. 代替テキストをここに追加」欄に画像の説明を入力します。
  6. 代替テキストを設定」をクリックします。
画像の代替テキストカードが開いている様子。代替テキストが入力され、カーソルが「代替テキストを設定」をクリックしています。

アプリ画像に代替テキストを追加する方法:

  1. エディタにアクセスします
  2. 画面上部の「設定」をクリックし、「アクセシビリティ設定」を選択します。
  3. 右側のアクセシビリティウィザードパネルで「サイトをスキャン」をクリックします。
  4. ショップ」または「ブッキング」ドロップダウンを選択します。
  5. 代替テキスト」と表示されているカードを選択します。
  6. (ショップのみ)各商品の画像、または商品バリエーションの画像を選択します。
  7. 代替テキストをここに追加」欄に画像の説明を入力します。
  8. 代替テキストを設定」をクリックします。
  9. 完了する」をクリックします。
ストアの商品画像の代替テキスト欄が入力されています。「代替テキストを設定」ボタンと「完了」ボタンがハイライトされています。

AI で代替テキストを生成する

Wix Studio エディタでサイトを構築する場合、アクセシビリティウィザードの AI ツールを使用して代替テキストを生成することもできます。特定の画像に対して代替テキストを生成するか、ページ上のすべての画像に対して代替テキストを生成するかを選択します。
重要:
  • AI が生成した代替テキストが常に完全に正確であることを保証することはできません。そのため、生成されたテキストを確認し、必要に応じて編集することをおすすめします。
  • SVG または GIF 画像は、AI 代替テキストツールではサポートされていません。これらのファイルの代替テキストは手動で入力する必要があります。

AI で代替テキストを生成する方法:

  1. エディタにアクセスします
  2. エディタ左側の「サイトチェッカー」  をクリックします。
  3. アクセシビリティの問題を修正」を選択します。
  4. サイトをスキャン」をクリックします。
  5. 検出された問題」タブを選択します。
  6. 該当するページのドロップダウンを開きます。
    • (代替テキストが設定されていない画像がある場合)「今すぐ始める」をクリックします。
    • (以前にすべての画像に代替テキストを追加している場合) 「編集」をクリックします。
  7. 実行する操作を選択します:
    • シングル画像の代替テキストを生成する:
      1. 該当する画像の横にある「編集」アイコン  をクリックします。
      2. Generate(生成する)」をクリックします。
    • すべてのページの画像の代替テキストを一括で生成する:「自動生成する」をクリックします。
  8. 生成されたテキストを確認し、必要な変更を加えます。
  9. 適用する」をクリックします。
一括編集を使用している場合:
このツールは、装飾としてマークされている画像や、すでに代替テキストを含む画像に対して代替テキストを生成することはできません。
ページ上の代替テキストのアクセシビリティウィザードパネル。カーソルが「生成」ボタンにマウスオーバーしています。
注意:
AI ツールがページ上の画像の代替テキストを生成できないことがあります。必要に応じて「再試行する」をクリックできます。

画像を装飾用としてマークする

装飾画像とは、デザインや装飾目的のために使用する画像のことで、サイトのコンテンツとは直接関係しません。
サイト上の画像が装飾的で文脈に関連していない場合は、代替テキストを追加する必要はありません。アクセシビリティウィザードで画像を「装飾」としてマークして、検索エンジンとスクリーンリーダーが自動的に画像をスキップするようにしましょう。
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします
  2. 画面上部の「設定」をクリックし、「アクセシビリティ設定」を選択します。
  3. 右側のアクセシビリティウィザードパネルで「サイトをスキャン」をクリックします。
  4. 代替テキスト」と表示されているカードを選択します。
  5. この画像は装飾用であり、説明は必要ありません。」横のチェックボックスを選択します。
アクセシビリティウィザードで装飾画像オプションがチェックされているスクリーンショット。
参考:
リンクを含む画像には代替テキストが必要です。装飾としてマークせず、代替テキストを追加してください。

画像内のテキスト

これは写真やテキストを含む画像を指します。
画像内のテキストは、検索エンジンやスクリーンリーダーで「読む」ことはできません。ただし、画像が必要で、テキストにサイトへの文脈がある場合は、画像の説明に追加できます。
テキストにコンテキストがない場合、またはサイトのコンテンツに貢献していない場合は、画像の説明に追加する必要はありません。
画像の説明に追加すべき画像テキストと追加すべきでない画像テキストの詳細については、以下のオプションを選択してください。

テキスト画像

テキスト画像にはテキストのみが含まれ、その他の画像要素は含まれません。たとえば、フォントの画像やテキストのみを含むロゴなどがあります。
これらは「実際の」テキスト要素ではないため、テキストの画像を検索エンジンやスクリーンリーダーで読み取ることはできません。サイトの SEO とアクセシビリティを向上させるために、可能な限りそれらを避け、実際のテキスト要素に置き換えることをおすすめします。
次のステップ:
アクセシビリティチェックリストに戻り、サイトのアクセシビリティを向上させましょう。
エディタの画像設定パネル。代替テキスト欄が入力され、カーソルがその上にマウスオーバーしています。
メディアマネージャー内のプロギャラリー。代替テキスト欄がハイライトされます。
画像の代替テキストカードが開いている様子。代替テキストが入力され、カーソルが「代替テキストを設定」をクリックしています。
ストアの商品画像の代替テキスト欄が入力されています。「代替テキストを設定」ボタンと「完了」ボタンがハイライトされています。
ページ上の代替テキストのアクセシビリティウィザードパネル。カーソルが「生成」ボタンにマウスオーバーしています。
アクセシビリティウィザードで装飾画像オプションがチェックされているスクリーンショット。