Lステップの回答フォームカスタマイズ

投稿日 2025年7月13日
著者 shigi
カテゴリー LINEデザイン編
カテゴリー第4章コンテンツ制作

回答フォームデザインの基本

Lステップの回答フォームには、【カラー/デザイン設定】を使った簡易的なカスタマイズと、
CSSを使用したより詳細なカスタマイズの2つのアプローチがあります。

【カラー/デザイン設定】を使った簡易カスタマイズ

ボタンカラー・背景カラー・フォーム背景カラーの変更

【カラー/デザイン設定】では、フォームの基本デザインを簡単に変更できます。この設定メニューを使って、フォーム部分や背景、ボタンの色を簡単にカスタマイズできます。また、フォーム全体のイメージを手軽に調整したい場合に便利です。

ヘッダー画像/背景画像の設定

ヘッダー画像や背景画像をURLで設定できます。

カスタムCSSによる詳細カスタマイズ

カスタムCSSの使用方法

「カスタムCSS」オプションを有効にすると、CSSコードを入力できるフィールドが表示されます。ここにコードを記述することで、フォームのレイアウトやデザインを自由に調整できます。

実際にカスタムCSSを入れてみよう

実際にカスタムCSSを使用して、回答フォームをデザインしてみましょう。

こちらは、実際にプロのデザイナーがデザインした回答フォームです。

以下の手順で、簡単にこちらのデザインを実装することができます

手順：

１番上の要素にヘッダー画像をURLで指定する。

ヘッダー画像は、ご自身で用意ください。サンプルでは1040px ✕ 533pxとなっていますが、どのようなサイズでも見きれないコードになっています。

２つ目以降の要素に質問項目を入力する

【カラー/デザイン設定】で、背景カラーを指定する

カスタムCSSフィールドにカスタムCSSコードをコピー＆ペーストする

カスタムCSSサンプル

これで、先ほどのサンプルの回答フォームが実装されます。

サンプルのカスタムCSSをさらに調整してみよう

サンプル回答フォームを、さらにカスタマイズする方法を説明します。

サンプルをそのまま使用しても問題ありませんが、自社のブランドイメージに合わせてデザインを変更したい方は、以下のコード内容と調整方法を参考にしてください。

フォントを変更しよう

Googleが提供している無料のGoogleフォントサービス(https://fonts.google.com)を使用することで、フォームのフォントを変更できます。

フォントを変更するには、2つのステップがあります：

まず、使いたいフォントをインターネットから取り込みます。
次に、そのフォントを実際にフォームに適用します。
まず、使いたいフォントをインターネットから取り込みます。

最初の2行（@importで始まる行）は、Googleからフォントをダウンロードするためのものです。

これだけでは、まだフォントは変更されません

@import url('<https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap>');
@import url("<https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap>");

次に、そのフォントを実際にフォームに適用します。

14行目に、bodyという部分があります。これは、ウェブページ全体に対して指示を出す場所です。ここでフォントを指定すると、ページ全体のフォントが変わります。

body {
 font-family: 'Noto Sans JP', sans-serif;
}

この部分の説明：

bodyは、ウェブページの本文全体を指します。

font-familyは、使用するフォントの名前を指定するためのものです。

'Noto Sans JP'は、Googleから取り込んだフォントの名前です。

sans-serifは、もし’Noto Sans JP’が使えない場合の代替フォントです。

Googleフォントを使用するためのコード取得方法：

a. 使用したいフォントを決める

Googleフォント(https://fonts.google.com)で、Japanese（日本語）フィルターをかけると、利用できる日本語フォントの一覧が表示されます。

（例では「Noto Sans Japanese」と、「Tangerine」というフォントを使用。）

b. 「Get font」でフォントを選ぶ

使用したいフォントが決まったら、ページ右上にある「Get font」をクリックします。

c. 「Get embed code」でコードを取得する

次に「Get embed code」というボタンをクリックすると、フォントを読み込むためのコードが表示されます。

d. @importコードをコピーしてCSSに貼り付ける

「Embed code in the <head> of your html」という指示文の下にある、@importから始まるコードをコピー。

このコードをCSSコードの一番上に貼り付けます。

これで、CSSファイル上でフォントを適用する準備ができました。

※ <style></style>は不要。このタグは、「ここからCSSコードがはじまりますよ」という意味のタグですが、CSSファイルでは必要ありません。

e. 読み込んだフォントを適用する

Googleフォントのページに戻り、フォントを適用するためのコードをコピーします。

このコードを使って、実際にフォントを適用します。

body {
 font-family: 'Noto Sans JP', sans-serif;
}

これで、Noto Sans Japaneseというフォントに変更することができました。

フォントを変更するだけで、印象が大きく変わります。ブランドやサービスのイメージに合ったフォントを選んでみましょう。

中見出しの背景色を変更しよう

サンプル回答フォームの２つ目の要素では、中見出しを使用しています。

この中見出しの背景色を変更してみましょう。

サンプル回答フォームのコードでは、以下の部分になります。

h4.description-md-title.text-break {
    margin: 0;
    background: #C3A48D;
    width: 100%;
    text-align: center;
}

この部分の説明：

.description-md-titleは、中見出しのデザインを変更するためのクラスです。クラスとは、ウェブページの特定の部分に付ける名札のようなもの。回答フォームでは、すべての中見出しにこの名札が付いているので、{}の中の指示に従ってすべての中見出しのデザインをまとめて変更できます。

marginは、中見出しの外側の余白（スペース）を設定するためのものです。デフォルトで入っている余白を0にリセットしています。

backgroundは、中見出しの背景を設定するためのものです。上記の例では、「#C3A48D」（薄い茶色）というカラーコードを指定しています。

widthは、中見出しの幅を設定するためのものです。上記の例では、100%を指定し、中見出しが幅いっぱいに広がるように指定しています。

text-alignは、テキストの水平方向の配置を指定するためのものです。上記の例では、centerを指定し、中見出し内の文字が中央に配置されるように設定されています。

つまり、「 background: #C3A48D;」のカラーコードを変更することで、中見出しの背景色を変えることができます。

カラーコードとは？

色を表す6桁の文字列です。例えば、#C3A48Dは薄い茶色を表します。

カラーコードを調べるには、いくつかの方法があります：

カラーピッカーツール：Googleで「カラーピッカー」と検索すると、色を選んでそのカラーコードを表示してくれるツールが利用できます。

AIを活用する方法：ColorMagicというサイトでは、雰囲気やイメージのキーワードを入力するだけで、AIが配色を提案してくれます。カラーコードも同時に表示されるので、好みの色を簡単に見つけられます。

【参考】ColorMagic

ColorMagic | AI Color Palette Generator

雰囲気やイメージのキーワードから、配色を提案してくれます。

その他の要素もカスタマイズしてみよう

さきほどは、中見出しの変更方法をお伝えしましたが、他の要素もクラス名を指定することで、デザインを変更することができます。

以下は、回答フォームで使用されているクラス名の一覧です。

クラス名	要素の名前
`.description-md-title`	中見出し
`.description-title`	小見出し
`.control-label`	質問の項目名
`.label-danger`	必須項目ラベル
`#submit-button`	送信ボタン

Example

以下のコードは、サンプル回答フォームの送信ボタンのコードです。

button#submit-button {
  border-radius: 0;
  border: double 3px #f5f4f2;
  padding: 14px;
  background: #5F5F5F;
  width: 80%;
  margin: 0 auto 4em;
  position: relative;
}

この部分「background: #5F5F5F;」のカラーコードを変更することで、ボタンの色を変えることができます。

以下のコードは、サンプル回答フォームの必須項目ラベルのコードです。

.label-danger {
  background-color: #c3a48d;
}

この部分「background-color: #c3a48d;」のカラーコードを変更することで、必須項目ラベルの色を変えることができます。

一から回答フォームカスタマイズをするのは大変ですが、サンプルコードを少し調整するだけで、自社のブランドイメージに合ったデザインに簡単に変更できます。ぜひチャレンジしてみてください！