アンケートスタイルと動作
このページの内容:
アンケートスタイルと動作
回答者にアンケートを楽しんでもらうには、アンケートのスタイルが重要です。 スタイルには、アンケートのフォント、色、質問の間隔、追加するカスタムCSSが含まれます。 また、ページ遷移のアニメーションの設定から、質問への回答に沿ったアンケート内の回答者自動誘導に至るまで、アンケートの動きをカスタマイズすることもできます。
フォント
質問と回答の選択肢のフォントは、［見た目と操作性］メニューの［スタイル］セクションで変更できます。 フォントの書体を変更するには、［フォント］ドロップダウンをクリックし、書体を選択します。
アンケートのフォントサイズをカスタマイズすることもできます。 フォントを太くしたり、アンケートの質問と回答のフォントサイズを変えたりできます。
フォントサイズを変更するには、フォントサイズボックスに希望のフォントサイズ（ピクセル単位）を入力します。 フォントサイズの右にある［B］のアイコンをクリックすると、テキストが太くなります。
デフォルトのフォント
フォント選択のドロップダウンには、［デフォルト］のフォントのオプションがあります。 選択したレイアウト (英語)によって、デフォルトのフォントは異なります。
- ［ フラット］のレイアウトでは、 Poppinsをフォント書体として使用します。
- ［ モダン］のレイアウトでは、 Open Sansをフォント書体として使用します。
- ［ クラシック ］のレイアウトでは、 Helvetica Neueを書体として使用します。
色
アンケート内のアイテムの色は、［見た目と操作性］メニューの［スタイル］セクションで変更できます。 このセクションでは、アンケートの原色と二次色をカスタマイズできます。
原色
アンケートの原色は、アンケートの主要な要素に適用されます。 アンケートのレイアウトによって異なりますが、通常はプログレスバーや質問の強調表示などの機能の色に適用されます。
二次色
アンケートの二次色は、アンケートのマイナーな要素に適用されます。 アンケートのレイアウトによって異なりますが、通常は［次へ］や［戻る］ボタンなどの機能に適用されます。
カスタムCSSの追加
クリックして簡単に変更できるフォーマットオプションの範囲を超えて、アンケートの見た目と操作性を変更したい場合があります。 アンケートのレイアウトのコーディング技術のあるユーザーのために、カスタムCSSを追加するオプションをご用意しています。
CSS（Cascading Style Sheets）とは、ウェブサイトのページのスタイルを決めるためのコーディング言語です。 ［カスタムCSSを追加］機能では、独自のCSSをCSSエディターに直接入力したり、オンラインでホストされているCSSファイルを指定したりできます。
アンケートにカスタムCSSを追加するには：
- アンケートの編集中に、［見た目と操作性］メニューを開きます。
- ［スタイル］セクションをクリックします。
- ［カスタムCSS］ボックスに独自のCSSを入力します。
ヒント： CSSを作成するためのスペースがさらに必要な場合は、［カスタムCSS］ボックスの下にある［編集］をクリックして、CSSエディターを表示します。
- オンラインでホストされているCSSを使用する場合は、オンラインホストのURLを［外部CSS］ボックスに入力します。
- ［適用］をクリックします。
ヒント： 以下の小さなコードで、テーマのデフォルトロゴを削除できます。 以下のCSSコードをカスタムCSSエディターにコピーします。
html .Skin #Logo \{display: none;\}前景コントラスト
前景コントラストは、前景（テキスト、テキストボックスなど）と背景画像の間のコントラストのレベルを設定します。 コントラストは［低］、［中］、［高］から選べます。 アンケートの背景に対してテキストが読みづらい場合は、前景コントラストを上げることで読みやすさが向上する場合があります。
これを決定するために、WCAGに準拠した適切なコントラスト比4.5に準拠したグレースケールカラーを選択します。 テキストと背景のコントラストを上げるには、これを［中］または［高］に変更します。 ［高］では常に白または黒になります。 適切な前景色を決定する際は、背景画像とオーバーレイの色／不透明度も考慮します。 この設定は、［背景］セクション (英語)にある［前景コントラスト］と同じです。
質問の間隔
［質問の間隔］で、アンケートの質問を区切るスペースの量を調整できます。 ［コンパクト］、［ちょうど］、［長め］の3種類のスペーシングを選択できます。 アンケートの質問の間隔を変更することで、アンケートの長さを調整できます。 たとえば、質問の間隔を狭めれば、1ページに収まるアンケートを作成しやすくなります。
見た目と操作性とリッチコンテンツエディター
フォントや文字色の編集には2つの方法があります。 グローバルとローカルです。 グローバルスタイルの変更は、［見た目と操作性］メニューで行い、すべての質問や回答のテキストに影響します。 ローカルスタイルの変更は、その特定の質問や回答の選択肢に対して、リッチコンテンツエディターで行います。 ローカル変更はグローバル変更よりも優先されるため、質問のリッチコンテンツエディターで変更を加えると、［見た目と操作性］でのどの設定にも代わって、その設定が表示されます。
［フォーマットを排除］を使用すると、選択した質問からすべてのローカルフォーマットをすばやく削除し、グローバル変更を一律に反映させることができます。
フォーマットを排除するには
- 最初の質問をクリックして、一番下までスクロールし、Shiftキーを押しながら、最後の質問をクリックすることで、すべての質問を選択します。 選択された質問には、質問番号の横にマークされたチェックボックスが表示されます。
- ［ツール］に移動します。
- ［ レビュー］にカーソルを合わせて、［フォーマットを排除］を選択します。
ページ遷移
［動作］セクションの［ページ遷移］オプションでは、回答者がアンケートのページを移動する際の遷移動作を指定できます。
ページ遷移の各タイプの概要は以下のとおりです。
- なし： ページ遷移は働きません。 アンケートの各ページは、通常のWebページのように読み込まれます。
- スライド： 回答者が［次へ］または［戻る］ボタンをクリックすると、後続のページが横から画面にスライドして表示されます。
- フェード： 回答者が［次へ］または［戻る］ボタンをクリックすると、後続のページがフェードインし、前のページがフェードアウトします。
- 反転： 回答者が［次へ］または［戻る］ボタンをクリックすると、ページが「反転」して次のページが表示されます。
オートフォーカス
［動作］セクションの［オートフォーカス］機能は、回答者が現在見ている質問以外のすべてのアンケートをフェードアウトさせます。 これにより、アンケート回答者が前後のアンケートの質問に気を取られないようにできます。
オートアドバンス
［動作］セクションの［オートアドバンス］設定は、回答者が質問に答えるのにしたがって、自動的にアンケートを進行させます。 アンケート回答体験を制御するために、複数の設定が使用可能です。
- 質問のオートアドバンス： このオプションにより、回答者はページをスクロールすることなく質問を進めることができます。 回答を選択するとすぐに次の質問に進みます。 ［質問のオートアドバンス］が有効になっていると、自由回答欄や複数選択の多肢選択式など、特定の質問タイプの後に［完了］ボタンが表示されます。 回答者がこのボタンをクリックすると、次の質問に進むことができます。
ヒント： 他のオートアドバンス機能を使用するには、この設定を有効にする必要があります。
- 自動入力ボタンを非表示にする： このオプションを有効にすると、［質問のオートアドバンス］が有効な場合に表示される［完了］ボタンが非表示になります。
- ページのオートアドバンス： このオプションにより、回答者は［次へ］ボタンをクリックせずにページを進めることができます。 代わりに、そのページの最後の質問に対する回答を選択するとすぐに、次のページに移動します。
ヒント： ［ページのオートアドバンス］では、［アンケートオプション］で［戻る］ボタンが有効になっていない場合でも、アンケートに［戻る］ボタンを組み込むことができます。
オートアドバンスを有効にすると、アンケートのすべてのページで有効になります。 オートアドバンスは、［戻る］ボタンと両立できます。