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

スイート
Customer Experience Employee Experience Strategy & Research
製品
Qualtrics

このページの内容

アンケート調査について 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を追加するには:

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

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

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

前景コントラスト

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

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

質問の間隔

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

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

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

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

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

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

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

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

最初の質問をクリックし、一番下までスクロールし、shift を押しながら最後の質問をクリックして、すべての質問を選択します。選択された質問には、質問番号の横にマークされたチェックボックスが表示されます。
ツールへ
評価者」にカーソルを合わせ、「書式を取り除く」を選択します。

ページ遷移

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

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

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

オートフォーカス

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

オートアドバンス

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

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

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

Qtip:新しいエクスペリエンスでオートアドバンスが有効になっている場合、アンケートの最後に「アンケートの終了」というテキストが表示されます。Submitを選択して終了します。”
Qtip:アンケートの招待にインラインメールの質問を含め、アンケートの質問が 1 つだけの場合、Autoadvance は自動的にアンケートを次ページへ進めたり、アンケートを送信したりしません。この方法については、「インラインメールの質問を即座に送信する」を参照してください。

互換性のある質問

オートアドバンスは特定の質問機能にのみ適用されます:

FAQs

アンケートの背景/テーマを変更するにはどうしたらよいですか?

私のアンケートでフォントがすべて異なるのはなぜですか?どうすれば直るのか?

Branded Themesの構築、更新、問題の報告はどのようにすればよいですか?

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

この記事は役に立ちましたか

いただいたフィードバックはこのページの改善の目的のみに利用します。

素晴らしい! フィードバックありがとうございます!

フィードバックありがとうございます!