アンケートスタイルと動作
このページの内容
アンケートのスタイルとモーションについて
回答者にアンケートを楽しんでもらうには、アンケートのスタイルが重要です。スタイルには、アンケートのフォント、色、質問の間隔、追加するカスタムCSSが含まれます。また、ページ遷移のアニメーションの設定から、質問への回答に沿ったアンケート内の回答者自動誘導に至るまで、アンケートの動きをカスタマイズすることもできます。
注意:新しいアンケート回答エクスペリエンスでは、アクセシビリティとモバイルファーストデザインのサポートを強化するために、これまでとは異なるページ構造を使用しています。そのため、カスタムCSSの機能が通常と異なる場合があります。このエクスペリエンスを有効にすると、カスタムCSSの要素(例: html、CSSクラス、ID)が正しく機能するように更新する必要があります。
フォント
質問と回答の選択肢のフォントは、［デザイン］メニューの［スタイル］セクションで変更できます。フォントの書体を変更するには、フォントドロップダウンをクリックして書体を選択します。
アンケートのフォントサイズをカスタマイズすることもできます。フォントを太くしたり、アンケートの質問と回答のフォントサイズを変えたりできます。
フォントサイズを変更するには、フォントサイズボックスに希望のフォントサイズ（ピクセル単位）を入力します。フォントサイズの右側にあるBアイコンをクリックすると、テキストが太字になります。
デフォルトのフォント
フォント選択のドロップダウンには、デフォルトフォントのオプションがあります。選択したレイアウトによって、デフォルトのフォントが異なります。
- フラットレイアウトでは、フォント書体として Poppinsを使用します。
- モダンレイアウトでは、フォントの書体として Open Sansを使用しています。
- クラシック レイアウトでは、書体に Helvetica Neueを使用しています。
色
［デザイン］メニューの［スタイル］セクションで、アンケート内のアイテムの色を変更できます。このセクションでは、アンケートの原色と二次色をカスタマイズできます。
原色
アンケートの原色は、アンケートの主要な要素に適用されます。アンケートのレイアウトによって異なりますが、通常はプログレスバーや質問の強調表示などの機能の色に適用されます。
二次色
アンケートの二次色は、アンケートのマイナーな要素に適用されます。アンケートのレイアウトによって異なりますが、通常は［次へ］や［戻る］ボタンなどの機能に適用されます。
カスタムCSSを追加
注意: 以下のコードは現状のまま提供されるものであり、実装にはプログラミングの知識が必要です。Qualtricsサポートでは、カスタムコーディングに関するサポートやコンサルティングを提供していません。その代わり、クアルトリクスXMコミュニティの経験豊富なユーザーにいつでも質問できます。
注意:新しいアンケート回答エクスペリエンスが有効になっている場合、カスタムCSSの要素(html、CSSクラス、IDなど)を更新して、正しく機能させる必要があります。
クリック操作で変更できる簡単な書式設定オプションだけでは、アンケートのルック＆フィールを思うように変更できない場合があります。アンケートのレイアウトのコーディング技術のあるユーザーのために、カスタムCSSを追加するオプションをご用意しています。
CSS（Cascading Style Sheets）とは、ウェブサイトのページのスタイルを決めるためのコーディング言語です。［カスタムCSSを追加］機能では、独自のCSSをCSSエディターに直接入力したり、オンラインでホストされているCSSファイルを指定したりできます。
アンケートにカスタムCSSを追加するには：
ヒント：CSSを構築するためにより多くのスペースが必要な場合は、カスタムCSSボックスの下にある［編集］をクリックしてCSSエディターを起動します。
ヒント：以下のコードを使用すると、テーマのデフォルトのロゴを削除できます。以下のCSSコードをカスタムCSSエディターにコピーします。
html .Skin #Logo {display: none;}
前景コントラスト
ヒント：新しいアンケート回答エクスペリエンスが有効になっている場合、このオプションは利用できません。
前景の対比は、前景(テキスト、テキストボックスなど)と背景画像の対比レベルを決定します。コントラストは［低］、［中］、［高］から選べます。アンケートの背景に対してテキストが読みづらい場合は、前景コントラストを上げることで読みやすさが向上する場合があります。
これを決定するために、WCAGに準拠した適切なコントラスト比4.5に準拠したグレースケールカラーを選択します。テキストと背景のコントラストを上げるには、これを［中］または［高］に変更します。［高］では常に白または黒になります。適切な前景色を決定する際は、背景画像とオーバーレイの色／不透明度も考慮します。この設定は、［背景］セクションにある［前景の対比］と同じです。
表示テキスト幅
ヒント：このオプションは、新しいアンケート回答エクスペリエンスが有効になっている場合にのみ 利用できます。
表示テキストの幅は、質問文がページ上でどのように表示されるかを決定します。デフォルトのテキスト幅またはフルテキスト幅のいずれかを選択できます。デフォルトの幅ではすべての質問が同じ幅になりますが、全幅では長い質問をページ上でより広く表示できます。質問が長い場合、この設定を使用すると、より多くの質問をページに収めやすくなります。
質問の間隔
質問の間隔は、アンケートの質問間のスペースの量を決定します。［コンパクト］、［ちょうど］、［長め］の3種類のスペーシングを選択できます。アンケートの質問の間隔を変更することで、アンケートの長さを調整できます。例えば、質問間のスペースを狭くすると、1ページに収まるアンケートをデザインしやすくなります。
質問のスタイルオプション
アンケートで新しいアンケート回答エクスペリエンスを使用している場合、複数の質問スタイルオプションを利用できます。これらのオプションは、アンケート回答者がアンケートに回答する際のエクスペリエンスに影響します。質問のカスタマイズオプションには、以下が含まれます。
![[デザイン]の[スタイル]セクションにある質問のスタイルオプション](https://www.qualtrics.com/sites/default/files/styles/standard_xl_retina/public/migrations/dsx/content/question-style-options.png.webp?itok=-XEXK_Kq)
多肢選択式の質問にラジオボタンを表示：有効にすると、多肢選択式の質問の回答選択肢は、完全にクリック可能なボタンの代わりにラジオボタンを使用します。
例：以下の最初の画像では、このオプションが無効になっているため、回答の選択肢は完全にクリック可能なボタンとして表示されます。
2つ目の画像は、代わりにラジオボタンのオプションを有効にした同じ質問を示しています。
NPSの質問でモバイルのボタンを縦に表示：有効にすると、モバイルデバイスでアンケートに回答するユーザーに対して、NPSの質問が縦に表示されます。
例：下の最初の画像では、このオプションが無効になっているため、すべてのアンケート回答者に対してNPSの質問が横長の形式で表示されます。
2つ目の画像は、モバイルアンケートの回答者向けに縦型オプションを有効にした同じ質問を示しています。
デザイン vs. リッチコンテンツエディター
フォントとテキストの色は、グローバルとローカルの2つの方法で編集できます。グローバルスタイルの変更は、[デザイン] メニューで行い、すべての質問や回答のテキストに反映されます。特定の質問または回答の選択肢に対するローカルスタイルの変更は、リッチコンテンツエディターで行います。ローカルでの変更はグローバルでの変更よりも優先されます。そのため、質問のリッチコンテンツエディターで変更を加えた場合、[ルックアンドフィール] で設定されている内容ではなく、その質問で設定した内容が表示されます。
書式設定の解除を使用すると、選択した質問からすべてのローカル書式設定をすばやく削除し、グローバルな変更を均一に反映させることができます。
フォーマットを排除するには
ページ遷移
[モーション]セクションの[ページ切り替え]オプションでは、回答者がアンケートのページ間を移動する際に再生される切り替え効果を指定できます。
ページ遷移の各タイプの概要は以下のとおりです。
- なし：ページトランジションは再生されません。アンケートの各ページは、通常のWebページのように読み込まれます。
- スライド：回答者が［次へ］または［戻る］ボタンをクリックすると、次のページが画面の横からスライドして表示されます。
- フェード：回答者が［次へ］または［戻る］ボタンをクリックすると、前のページがフェードアウトし、次のページがフェードインして表示されます。
- めくる：回答者が［次へ］または［戻る］ボタンをクリックすると、ページが「めくられて」次のページが表示されます。
オートフォーカス
［モーション］セクションのオートフォーカス機能を使用すると、回答者が現在表示している質問以外のすべてのアンケート質問がフェードアウトします。これにより、アンケート回答者が前後のアンケートの質問に気を取られないようにできます。
オートアドバンス
［動作］セクションの［オートアドバンス］設定は、回答者が質問に答えるのにしたがって、自動的にアンケートを進行させます。アンケート回答体験を制御するために、複数の設定が使用可能です。
質問の自動進行：このオプションを使用すると、回答者はページをスクロールせずに次の質問に進むことができます。回答を選択するとすぐに次の質問に進みます。質問の自動前進が有効になっている場合、自由回答や複数選択式の多肢選択式質問など、特定の質問タイプの後に完了ボタンが表示されます。回答者がこのボタンをクリックすると、次の質問に進むことができます。
ヒント：他の自動進行機能を使用するには、この設定を有効にする必要があります。
- 自動進行ボタンを非表示にする：このオプションを有効にすると、質問の自動進行が有効な場合に表示される［完了］ボタンが非表示になります。
ページの自動進行：このオプションを使用すると、回答者は [次へ] ボタンをクリックせずにページを進めることができます。代わりに、そのページの最後の質問に対する回答を選択するとすぐに、次のページに移動します。
ヒント：ページでの自動進行を有効にすると、［戻る］ボタンがアンケートのオプションで有効になっていなくても、アンケートに表示されます。このボタンは無効にできません。
オートアドバンスを有効にすると、アンケートのすべてのページで有効になります。自動進行は「戻る」ボタンに対応しています。
ヒント：新しいアンケート回答エクスペリエンスで自動進行が有効になっている場合、回答者はアンケートの最後に「アンケートの終了」というテキストを含む最終ページを目にします。[送信] を選択して終了します。
ヒント：アンケートの招待にインラインメール質問を含め、アンケートの質問が1つしかない場合、自動進行機能はアンケートを次のページに自動で進めたり、アンケートを送信したりしません。これを実現する方法については、インラインメール質問をすぐに送信するを参照してください。
互換性のある質問
自動進行は、特定の質問機能にのみ適用されます。
- 旧エクスペリエンスでは、自動進行は以下に適用されます。
- 互換性のある従来の機能に加えて、新しいアンケート回答エクスペリエンスでは、次の項目で自動進行を使用することもできます。
FAQs
アンケートの背景やテーマを変更するにはどうすればよいですか？
アンケートの背景やテーマを変更するにはどうすればよいですか？
アンケートのフォントがすべて異なっているのはなぜですか？修正方法を教えてください。
アンケートのフォントがすべて異なっているのはなぜですか？修正方法を教えてください。
全体的なフォントの変更は見た目と操作性メニューで行い、部分的なフォントの変更は特定の質問または回答の選択肢のリッチコンテンツエディターで行います。
ローカルフォントの変更はグローバルフォントの変更を上書きするため、両方のタイプの変更を行った場合、質問にはグローバルフォント設定とローカルフォント設定が混在することになります。以下の手順に従って、すべてのローカル書式設定をクリアし、グローバルな変更を均一に適用します。 「見た目と操作性」で行ったグローバルな変更は、「アンケート」タブには表示されませんのでご注意ください。変更とスタイル設定を表示するには、アンケートをプレビューする必要があります。
静的テーマの更新または問題の報告はどのように行いますか？
静的テーマの更新または問題の報告はどのように行いますか？
素晴らしい！ フィードバックありがとうございます！
フィードバックありがとうございます！