WordPressの診断のデザインをサイトに合わせる — 設定で変えられる範囲と、CSSが要る境目

診断プラグインを検討していると、機能の次に見た目の話が出てきます。サイト全体のトーンは時間をかけて整えてきたのに、診断の枠だけ配色も角の丸みも違う。そういうパーツを1つ抱え込むのは避けたい、という心配です。

先に範囲を引いておきます。色・枠線・影・アイコン・画面に出ることばは、管理画面の設定で変えられます。角の丸みと内側の余白、選択肢が何列で並ぶかは設定項目になく、変えるならCSSの話になる。 境目がどこにあるか分かっていれば、入れる前に見当はつけられる。

この記事では診断シミュレーションProの設定を例に、どこまでが設定で届いて、どこから手を動かす話になるのかを整理します。寄せられるからといって触らないほうがいい場所についても、途中で触れておきたい。

色とことばは設定で届く。角丸と余白は設定に無い

設問セットの編集画面は、デザイン／テキスト／設問管理の3タブに分かれています。見た目に関わる設定はデザインタブ、画面に出ることばはテキストタブ、設問と選択肢そのものは設問管理タブ。サイトのトーンに寄せる作業は、前の2つだけで進みます。

デザインタブで指定できるのは、背景色・文字色・「もう一度診断する」ボタンの色と文字色・「戻る」ボタンの色・進捗バーの色。それに枠線（表示のオン/オフ・色・太さ）と影（オン/オフ）、それから見出しの横に置くアイコンです。

設定側に無いものも挙げておきます。角の丸み、枠の内側の余白、選択肢が何列で並ぶか、書体。このうち書体だけは気にしなくて済みます。診断の枠は自前のフォント指定を持たず、ボタンにも font-family: inherit を当ててあるので、テーマの書体がそのまま乗るからです。

結果コンテンツは、そもそも扱いが違います。あれは通常のブロックエディタで作るものなので、見出しやボタンの見え方にはテーマのスタイルがそのまま効く。診断の枠の中と外で調整の仕方が変わる、という二段構えは最初は戸惑うかもしれません。慣れると、細かく作り込みたい部分を結果側へ寄せられるので、むしろ楽になります。

プリセットを1つ当ててから、浮いたところだけ個別に直す

色を合わせるとき、いきなり1項目ずつ指定していくと決まりません。順番としては、カラープリセットを当てる → 全体を眺める → 浮いている箇所だけ個別の色で直す。これがいちばん早い。

用意してあるプリセットはデフォルト・オーシャン・フォレスト・サンセット・ラベンダー・ローズ・スレート・ダークの8つで、既定はティール系（#0d9488）のデフォルトです。プリセットを選んだあとに色を1つでも触ると、表示は自動でカスタム扱いに切り替わります。プリセットに戻したつもりが戻っていない、という取り違えは起きにくいはずです。

色は単体で選ぶより組み合わせで決めたほうが崩れにくい、というのがこの順番の理由です。ボタンだけをブランドカラーに変えると、今度は選択肢の枠との対比が弱くなる。1か所直すと別の場所が気になり出す、という往復に入りやすいので、まず全体を1セットで当ててしまうほうがいい。

枠線と影も考え方は同じです。サイトの他のカードやボタンが影を持っていないなら、診断だけに影を付けない。要するに、既にサイトにある部品の真似をするだけです。ゼロから決めるより判断が速いし、結果として馴染みます。

テキストタブで直せるのは6つ。開始ボタンの文言は無い

見た目の相談だと後回しにされがちなのがテキストタブですが、読む人の目に先に入るのは色よりことばのほうです。ここで直せるのは次の6つ。

先に断っておくと、開始ボタンや冒頭の案内文は設定項目にありません。 診断は1問目がいきなり出る作りで、スタート画面を挟まないからです。診断の手前に前置きを置きたいなら、ショートコードを貼ったページの本文にそのまま書くことになります。診断の枠の中に出る見出しが欲しい場合は、デザインタブのタイトル欄に入れる。ここはタブをまたぐので、探して見つからずに一度止まりやすいところです。

直しておく価値が高いのは、0件のときの表示です。既定の文面は事実としては正しいけれど、答えきった人に返すことばとしては素っ気ない。相談窓口への一言に差し替えておくだけで、空振りの印象がだいぶ変わります。

揃えるほど、揃えないほうがいい場所がはっきりする

デザインを揃えていくと、揃えないほうがいい部分が浮かび上がってきます。答える人の操作に効いている部分です。

まず、押せるものが押せると分かる状態。選択肢もボタンなので、背景に馴染ませすぎると、どこを触れば次に進むのか一拍迷います。診断は数問続けて操作してもらう作りなので、その一拍は問題の数だけ積み上がる。淡い配色に寄せるときほど、選択肢の輪郭は残しておきたいところです。

もう1つが進捗バー。これは色しか設定できず、消すスイッチはありません。 常に「1 / 3」のような残り表示とパーセンテージが出ます。すっきり見せたい気持ちは分かるのですが、あと何問なのかが見えないと途中で抜けられやすくなるので、設定から外せる項目にはしませんでした。どうしても消したいならCSSで隠すことになります。その前に、どこで抜けられているかを集計ダッシュボードの設問別離脱率途中でやめて最後まで進まなかった人の割合。診断やフォームでは設問ごとに見ると、どこで止まっているかがわかる。詳しく見るで見ておくほうが確実です。見た目より設問の数と順番のほうが効きやすい、という話は診断の離脱率の直し方にまとめてあります。

アイコンは「なし」を含めて8択、実体は7種類（チェック・矢印・丸・クエスチョン・インフォ・AI・聴診器）です。出る場所はタイトルの横だけで、タイトルを空にしていると一緒に消えます。ただ、診断の印象を決めているのは色とことばのほうで、アイコンを足しても足りない説得力までは埋まらない。装飾を増やす前に、設問の文が短く読みやすいかを見るほうが割に合います。

CSSで触るなら、まず9つの変数の外側を見る

設定でだいたい寄ったあとにも、合いきらないところは残ります。角の丸み、枠の内側の余白、前後のブロックとの間隔あたり。ここから先はCSSで詰めることになります。

構造だけ先に言っておくと、管理画面で決めた色や枠線は --mqs-bg-color --mqs-progress-color --mqs-border-width といったCSS変数として、診断の外枠にインラインで書き出されます。設定から触れる9個はこの経路。一方で、角丸の --mqs-border-radius（12px）と内側の余白 --mqs-spacing（24px、画面幅480px以下では16px）は、スタイルシート側にしかありません。設定項目にしなかったのは、ここを自由にすると選択肢の並びが崩れやすかったからです。CSSで上書きするなら、この2つを狙うのがいちばん素直な当て方になります。

選択肢の並びも覚えておくと事故が減ります。既定では4列のグリッドで、画面幅768px以下で3列、480px以下で2列。長い文言の選択肢を並べると、PCの4列で折り返しが増えて読みにくくなります。列数は設定に無いので、選択肢の文を短くするか、CSSで列数を変えるかの二択です。

いずれにしても、ブラウザの検証ツールで対象の要素を見てから、必要な箇所だけに当てる。広いセレクタで一気に効かせると、別のページで困ります。前後がくっついて見えるだけなら、スペーサーブロックやグループの余白設定で足りることもあるので、CSSを書く前に一度そちらを試すほうが早い。

その前にやっておきたいことが1つあります。公開前に自分のスマホで最後まで答えてみること。PCの4列で成立していた選択肢が、2列になった途端に窮屈になることがあります。設置と公開前の確認は診断を固定ページに設置するにまとめました。

決めた見た目は1本目に閉じ込めて、あとは複製で配る

デザインの設定は設問セットが持っています。つまり、色もことばも、その診断1本にひもづく。複製すればまるごと引き継がれるので、業種別・キャンペーン別に何本も作る予定があるなら、最初の1本でトーンを決めきってから増やすほうが確実です。

順番を逆にすると面倒なことになります。色がバラバラのまま5本作ってから統一しようとすると、5回同じ作業をする。量産の段取りは似た診断を複製して量産するで詳しく書きました。検証環境でデザインを固めてから本番へ移したい場合は、JSON設定やデータを受け渡すためのテキスト形式。メモ帳でも開けるが、Excelで表として開くものではなく、主にツール同士のやり取りやバックアップに使う。で書き出して読み込ませる手もあります。

手順を1行にすると、プリセットを1つ当てる、テキストタブの6項目を自社の言い方に直す、残った違和感にだけCSSを当てる。設定で届く範囲は思っているより広く、境目は「色とことば」と「角丸・余白・列数」のあいだにあります。機能と動作環境は診断シミュレーションProで確認できます。