Skip to main content
Loading...
Skip to article
  • Qualtrics Platform
    Qualtrics Platform
  • Customer Journey Optimizer
    Customer Journey Optimizer
  • XM Discover
    XM Discover
  • Qualtrics Social Connect
    Qualtrics Social Connect

アンケートスタイルと動作


Was this helpful?


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The feedback you submit here is used only to help improve this page.

That’s great! Thank you for your feedback!

Thank you for your feedback!


アンケート調査について Style & Motion

回答者にアンケートを楽しんでもらうには、アンケートのスタイルが重要です。スタイルには、アンケートのフォント、色、質問の間隔、追加するカスタムCSSが含まれます。また、ページ遷移のアニメーションの設定から、質問への回答に沿ったアンケート内の回答者自動誘導に至るまで、アンケートの動きをカスタマイズすることもできます。

注意新しいアンケート調査エクスペリエンスでは、アクセシビリティとモバイルファーストデザインをより良くサポートするために、異なるページ構造を使用しており、カスタム CSS の機能が異なります。このエクスペリエンスを有効にすると、カスタムCSSの要素(HTML、CSSクラス、エクスペリエンスIDなど)が正しく機能するように更新する必要があります。

フォント

見た目と操作性メニューのスタイルセクションで質問と選択肢のフォントを変更することができます。フォントの書体を変更するには、フォントの ドロップダウンをクリックし、書体を選択します。

見た目と操作性のスタイルセクションのフォントオプション

アンケートのフォントサイズをカスタマイズすることもできます。フォントを太くしたり、アンケートの質問と回答のフォントサイズを変えたりできます。

フォントサイズを変更するには、フォントサイズボックスに希望のフォントサイズ(ピクセル単位)を入力します。フォントサイズの右にあるBアイコンをクリックすると、テキストが太字になります。
見た目と操作性で質問文と解答文のフォントサイズと太字を変更可能

デフォルトのフォント

フォントの選択ドロップダウンには、デフォルトフォントのオプションがあります。選択したレイアウトによって、デフォルトのフォントは異なります:

  • フラットレイアウトでは、フォントの書体としてポピンズを使用している。
  • モダンレイアウトでは、フォントの書体としてOpen Sansを使用している。
  • クラシック・レイアウトでは 、書体にHelvetica Neueを使用。

見た目と操作性メニューのスタイルセクションで、アンケート調査内のアイテムの色を変更することができます。このセクションでは、アンケートの原色と二次色をカスタマイズできます。

見た目と操作性のスタイルセクションにあるプライマリーカラーとセカンダリーカラーのオプション。

原色

アンケートの原色は、アンケートの主要な要素に適用されます。アンケートのレイアウトによって異なりますが、通常はプログレスバーや質問の強調表示などの機能の色に適用されます。

プログレスバーと質問の強調表示はこのオプションの影響を受けます。

二次色

アンケートの二次色は、アンケートのマイナーな要素に適用されます。アンケートのレイアウトによって異なりますが、通常は[次へ]や[戻る]ボタンなどの機能に適用されます。
[見た目と操作性]の[二次色]オプション。このオプションが反映された[次へ]ボタン

カスタムCSSの追加

注意以下のコードはそのまま提供され、実装するにはプログラミングの知識が必要です。Qualtricsサポートでは、カスタムコーディングに関するサポートやコンサルティングを提供していません。その代わり、クアルトリクスXMコミュニティの経験豊富なユーザーにいつでも質問できます。
注意新しいアンケート調査を有効にすると、カスタム CSS の要素(HTML、CSS クラス、ID など)を正しく機能するように更新する必要があります。

アンケートの見た目と操作性を、クリックで変更できる簡単な書式オプション以外にも変更したい場合があります。アンケートのレイアウトのコーディング技術のあるユーザーのために、カスタムCSSを追加するオプションをご用意しています。

CSS(Cascading Style Sheets)とは、ウェブサイトのページのスタイルを決めるためのコーディング言語です。[カスタムCSSを追加]機能では、独自のCSSをCSSエディターに直接入力したり、オンラインでホストされているCSSファイルを指定したりできます。

アンケートにカスタムCSSを追加するには:

  1. アンケート調査の編集中に、見た目と操作性 メニューを開きます。
    [見た目と操作性]の[スタイル]セクションに移動して、タブの下部にある2つのCSSオプションを使用する
  2. スタイルセクションをクリックします。
  3. カスタムCSS ボックスに独自のCssを入力します。
    Qtip:CSSを作成するためにもっとスペースが必要な場合は、カスタムCSSボックスの下にある編集をクリックして、CSSエディタを表示させてください。
  4. オンラインでホストされているCssを使用している場合は、オンラインホストのURLをExternal CSS ボックスに入力してください。
  5. 適用]をクリックします。

Qtip:以下のコードでテーマのデフォルトロゴを削除できます。以下のCSSコードをカスタムCSSエディターにコピーします。

html .Skin #Logo {display: none;}.

前景コントラスト

前景対比は、前景(テキスト、テキストボックスなど)と背景画像の対比レベルを決定します。コントラストは[低]、[中]、[高]から選べます。アンケートの背景に対してテキストが読みづらい場合は、前景コントラストを上げることで読みやすさが向上する場合があります。

これを決定するために、WCAGに準拠した適切なコントラスト比4.5に準拠したグレースケールカラーを選択します。テキストと背景のコントラストを上げるには、これを[中]または[高]に変更します。[高]では常に白または黒になります。適切な前景色を決定する際は、背景画像とオーバーレイの色/不透明度も考慮します。この設定は、BackgroundセクションのForeground Contrastと同じです。

[見た目と操作性]の[スタイル]セクションにある前景コントラストオプション

質問の間隔

質問間隔では、アンケートの質問を区切るスペースを指定します。[コンパクト]、[ちょうど]、[長め]の3種類のスペーシングを選択できます。アンケートの質問の間隔を変更することで、アンケートの長さを調整できます。たとえば、質問と質問の間隔を狭くすると、1ページに収まるアンケートを作成しやすくなります。
[見た目と操作性]の[スタイル]セクションにある[質問の間隔]オプション

質問スタイルのオプション

アンケートに新しいアンケート調査エクスペリエンスを使用する場合、複数の質問スタイルのオプションを利用することができます。これらのオプションは、アンケート調査時のアンケート回答者のエクスペリエンスに影響します。質問のカスタマイズオプションは以下の通り:
見た目と操作性のスタイルセクションの質問スタイルオプション

  • 多肢選択式の質問にラジオボタンを表示します:有効にすると、多肢選択式の質問の選択肢は完全にクリック可能なボタンの代わりにラジオボタンを使用します。
    下の最初の画像では、このオプションが無効になっているため、選択肢は完全にクリック可能なボタンとして表示されます。クリック可能なボタンが付いた多肢選択式の質問の場合
    2番目の画像は、代わりにラジオボタンオプションを有効にした同じ質問を示しています。
    ラジオボタンによる多肢選択式の質問の場合
  • NPS の質問のボタンをモバイルで縦に表示する:有効にすると、モバイルデバイスからアンケートに参加するユーザーに対して、Npsアンケートの質問が縦に表示されます。
    下の最初の画像では、このオプションが無効になっているため、NPSアンケートの質問はすべてのアンケート調査参加者に対して横長のフォーマットで表示されます。横書きのNpsの質問
    2 番目の画像は、同じ質問で、モバイルアンケート調査用に縦書きのオプションを有効にしたものです。
    NPSアンケートをモバイル調査向けに縦書きにしたもの。

見た目と操作性。リッチコンテンツエディター

フォントとテキストの色は、グローバルとローカルの2つの方法で編集できます。グローバルスタイルの変更は見た目と操作性メニューで行われ、すべての質問文および/または回答文に影響します。ローカルスタイルの変更は リッチコンテンツエディターを使用して、回答の選択肢に画像を挿入することもできます その特定の質問または選択肢のために。ローカルな変更はグローバルな変更よりも優先されますので、あなたが質問のリッチコンテンツエディターで変更を行った場合、見た目と操作性で設定されたものではなく、それらの設定が表示されます。

を使うことができる。 フォーマットを排除 を使用すると、選択した問題からすべてのローカルフォーマットをすばやく削除し、グローバルな変更を一律に反映させることができます。

フォーマットを排除するには

  1. 最初の質問をクリックし、一番下までスクロールし、シフトを押しながら最後の質問をクリックして、すべての質問を選択します。選択された質問には、質問番号の横にマークされたチェックボックスが表示されます。
    アンケートエディターでの複数質問の選択
  2. ツールへ
    ツールをクリックし、レビューにカーソルを合わせて、[フォーマットを排除]を選択
  3. 評価者」にカーソルを合わせ、「書式を取り除く」を選択します。

ページ遷移

モーションセクションのページ遷移オプションでは、回答者がアンケートのページを移動するときに再生される遷移エフェクトを指定することができます。
見た目と操作性のモーションセクションのページ遷移オプション

ページ遷移の各タイプの概要は以下のとおりです。

  • なし:ページ遷移は再生されません。アンケートの各ページは、通常のWebページのように読み込まれます。
  • スライド:回答者が[次へ]ボタンまたは[戻る]ボタンをクリックすると、次のページが横からスライドして表示されます。
  • フェード:回答者が[次へ]ボタンまたは[戻る]ボタンをクリックすると、次のページがフェードイン表示され、前のページがフェードアウト表示されます。
  • フリップ:回答者が[次へ]ボタンまたは[戻る]ボタンをクリックすると、ページが「反転」して次のページが表示されます。

オートフォーカス

モーションセクションのオートフォーカス機能は、回答者が現在表示しているアンケート以外のすべてのアンケートをフェードアウトします。これにより、アンケート回答者が前後のアンケートの質問に気を取られないようにできます。

オートフォーカスオプションが有効化され、プレビューにオートフォーカス機能が表示されている

オートアドバンス

[動作]セクションの[オートアドバンス]設定は、回答者が質問に答えるのにしたがって、自動的にアンケートを進行させます。アンケート回答体験を制御するために、複数の設定が使用可能です。
見た目と操作性タブのモーションセクションにある3つのオートアドバンスオプション。

  • 質問のオートアドバンス:このオプションにより、回答者はページをスクロールすることなく過去の質問を進めることができます。回答を選択するとすぐに次の質問に進みます。質問のオートアドバンスが有効になっている場合、自由回答文や多肢選択式の質問のような特定の質問タイプの後に、完了 ボタンが表示されます。回答者がこのボタンをクリックすると、次の質問に進むことができます。
    Qtip:他のオートアドバンス機能を使用するには、この設定を有効にする必要があります。
  • オートアドバンスボタンを隠す:このオプションを有効にすると、質問の自動アドバンスが有効な場合に表示される完了ボタンが非表示になります。
  • ページの自動アドバンス:このオプションにより、回答者は次へボタンをクリックせずに過去のページに進むことができます。代わりに、そのページの最後の質問に対する回答を選択するとすぐに、次のページに移動します。
    Qtip:ページのオートアドバンスでは、アンケートのオプションで[戻る]ボタンが有効になっていなくても、アンケートに[戻る]ボタンが表示されます。

オートアドバンスを有効にすると、アンケートのすべてのページで有効になります。オートアドバンスは[戻る]ボタンに対応しています。

Qtip:アンケートの招待にインラインメールの質問を含め、アンケートの質問が 1 つだけの場合、Autoadvance は自動的にアンケートを次ページへ進めたり、アンケートを送信したりしません。この方法については、「インラインメールの質問を即座に送信する」を参照してください。

FAQ

当サポートサイトの日本語のコンテンツは英語原文より機械翻訳されており、補助的な参照を目的としています。機械翻訳の精度は十分な注意を払っていますが、もし、英語・日本語翻訳が異なる場合は英語版が正となります。英語原文と機械翻訳の間に矛盾があっても、法的拘束力はありません。