【デザイン歴10年のデザイナーが作る】Lステップ回答フォームカスタムCSSテンプレートコード集

おかげさまで、インフルエンサーの方含め、合計100名以上（他社サービスでの販売含む）にご購入いただいております！

ツイートでも多数ご紹介やレビューをいただき、ご購入者からは「自分で簡単に回答フォームの制作が完結するようになったことで、外注費をカットできるようになった」と大変好評をいただいております。

● 自己紹介

初めまして、デザイナー歴10年のだーうえ（@dauead）と申します。

まずは簡単に自己紹介をさせていただきます。

2022年5月現在32歳、web制作会社を経営しておりますが、社員はいないのでフリーランスみたいな働き方をしております。

前職でマーケターをしていた先輩や弟を誘ってデザイナーに育て、前期まではチームで年間200本程LPを納品しておりました。

現在は、脱毛やジム、美容系のLPをメインに制作しております。

パチンコや車業界のデザインを制作してきたので、

おしゃれなデザインというよりは本Brainのサムネイルのような目を引くデザインが得意です。

● 販売しようと思った理由

今回、なぜコンテンツを販売しようかと思ったかというと、2ヵ月程前に迫さんのツイートを見てググったところ、Lステップの回答フォームのテンプレートで全体の調整を行えるものが見当たらなかったからです。

https://twitter.com/yuki_99_s/status/1509393522545524736

というか、そもそも回答フォームのカスタムCSSに関して出ている情報が少なすぎて、CSSの部分に関しては実際にLステップを契約して1から全部調べていきました。

当初は「まるごとコピペのテンプレート10種類」を作って販売しようかとも考えたんですが、回答フォームの用途が、ブログ、アンケート、LPなど多岐にわたるため、テンプレートを購入するとよくある「10種類中1種類しか使えなかった」みたいなことになりかねないなと思い、「汎用性を持たせたカスタマイズテンプレート集」を作る方向に切り替えました。

そのおかげでコンテンツ設計が複雑になり制作に時間がかかったんですが、汎用性を持たせたことで今までにないかゆいところに手が届くテンプレート集が完成しました。

コーディングの知識が全くない方でもサクッとコピペでデザインできるような内容になっております。

しかも、組み合わせは自由自在なので、一度ご購入いただくと、数分で簡単に何パターンものデザインが作成できます。

● 本コンテンツをおすすめする方

・Lステップの回答フォームを使われる方

・CSSの知識がないけど回答フォームのデザインを自分で行いたい方

・カスタムCSSを自力で頑張ったけど、上手くできなかった方

・回答フォームのデザインを行うことが多く、手軽にデザインパターンを増やしたい方

上記すべての方におすすめです。

本コンテンツは、CSSの知識がない方にもサクッと簡単に回答フォームのデザインが作成できるというメリットと、デザイン制作にかかる時間を減らすというメリットがあるので、対象者は幅広いんじゃないかなと思います。

● 本コンテンツをおすすめしない方

・Lステップを使わない方

・Lステップの回答フォームを作ることができない方

・完全にオリジナルのデザインを作成したい方

もちろんですが、Lステップを使わない方は必要がないと思います。

また、回答フォームを作ることができない方には、CSSを触ることは難しいため、ご購入はお控えいただければと思います。

見出しのデザインは50種類以上用意していますが、全てネット上にまとめられてあるものをLステップ用に最適化したものになりますので、完全にオリジナルのデザインを求めている方には向いていません。

オプションの組み合わせ次第で全体の印象を変えることができるため、購入者同士でデザインが被ることも少ないかと思います。

● 基本的な使い方

どのような工程でデザインが仕上がるのかをご覧いただこうと思います。

まずは、回答フォームをご用意ください。

コード右上に表示されている「Copy」ボタンをクリックするとCSSがコピーされます。

Lステップ管理画面の回答フォームページにある「カスタムCSSを使用」にチェックを入れると出現するテキストエリアに貼り付けをしてください。

必要なコードを下に追記していってください。その際にコードの一部を上書きしないようにご注意ください。

※上書き対策のためにすべてのコードの末尾に改行を2つ入れております。

やることは以上です。

簡単ですよね？この作業ならできない人はいないだろう。くらいまで作業を簡略化しました。

● 現在用意している項目

全部で設定項目を14用意しているので、痒いところにも手が届く内容になっております。

とりあえずキレイに見えればいいという方は01～05の項目をコピペするだけで整った回答フォームが完成するようになっておりますので、ご安心ください。

それでは、14個の設定項目を1つずつご紹介します。

01.カラー設定

お好きな色を選択後に見出しやボタンの色を設定できるコードをコピーいただけます。

見出しとボタンの色はそれぞれ別の色に設定可能です。

02.ヘッダーデザイン（7パターン）

デザインが大変なヘッダーのデザインも7パターンご用意しております。

文字入りの画像をそのまま表示させるためのコードや、文字が入っていない画像をヘッダーに使いたい場合、画像なしでメインカラーで塗り潰した場合のコードなどをご用意しております。

03.中見出しデザイン（54パターン）

見出しデザインを54パターンご用意しております。

回答フォームの仕様上、見出しは「中見出し」と「小見出し」の2種類になっております。

見出しに豊富なデザインパターンを用意することで、ブログ、アンケート、LPなど、それぞれの用途に対応可能となっております。

04.小見出しデザイン（59パターン）

中見出しとは別のデザインが設定可能です。

05.ボタンデザイン（13パターン）

デザイン性が高いボタンデザインを13パターンご用意しております。

後述するアイコンやアニメーションと組み合わせることで、ボタンの目立たせ具合を調整することができます。

06.ボタン用アイコン（25パターン）

メール、電話、資料請求など、用途に合わせた様々なアイコンをご用意しております。

07.ボタンアニメーション（12パターン）

アニメーションは12パターンご用意しております。

htmlの都合やボタンデザイン、アイコンとの兼ね合いで、ボタン自体が動くアニメーションのみとなっております。

08.見出しのテキスト色

見出しをメインカラーに合わせる項目です。デザインの微調整として、お使いください。

中見出し、小見出しで別々に設定が可能です。

09.見出しのスタイル（3パターン）

見出しを斜体にしたり、角丸にしたり、見出しの背景を画像にしたりと、デザインの微調整が行えます。

10.左右の余白（3パターン）

左右に余白を設けることで、他の回答フォームの見せ方と差別化することが可能です。

余白部分にはお好きな色が設定できるので、世界観を作るのに最適です。

画像と見出しの左右の余白をなくすコードも用意しております。

11.コンテンツの区切り（4パターン）

コンテンツの区切り方を調整できます。

左右の余白同様、他の回答フォームの見せ方と差別化することが可能です。

見出し、画像、説明文を囲うパターンと、コンテンツの下部を線で区切るパターンをご用意しております。

12.フォント

回答フォーム全体の書体を明朝体に変更できます。

13.見出し下のスペース

見出し下のスペースをなくして、見出しと画像とくっつけることが可能です。デザインの微調整にお使いください。

中見出し、小見出し別々に設定できます。

14.画像の角丸

画像を角丸に切り抜くことで柔らかい印象にできます。

以上です。

CSSの知識がない方はもちろんですが、

CSSが触れる方もテンプレートを少しいじるだけで細かい調整ができるので、制作の時短になりますし、

このテンプレート集を駆使すれば、コーディングはできないけど画像だけ作れるよって方でも、十分仕事として回答フォームのデザインを請け負うことが可能だと思います。

自分も今後Lステップの回答フォームの制作が入ったら、このテンプレートをベースに制作する程のクオリティには仕上がっています。

また、本コンテンツは、アップデートできるように会員サイトで配布いたします。ご要望やご意見をいただければ随時更新していきますので、設定できる項目も増えていく予定です。

● ご使用時の注意点

本コンテンツは、CSSの知識がない方にもカンタンにお使いいただけますが、コピペ作業を行っていただくというコンテンツの性質上、作業時のミスが発生するリスクがあります。

なので、正常に動かなかったときに解決する方法を先にお伝えしておきます。

※コンテンツに不備がある可能性もございますので、不備を発見された際はお手数ですがご連絡いただけますと優先して対応させていただきます。

・閉じタグ（CSSの一部）を上書きしてしまった

・追記する順番が間違っている

・コンテンツの不備

・閉じタグ（CSSの一部）を上書きしてしまった場合

対応策は下記の2通りになります。

1. 最初からもう1度コピペし直す

2. 自分でタグを修正する

特にCSSの知識がない方はCSSの基本形だけ知っておけば、正常に動かない場合の原因特定がカンタンにできるようになります。

カンタンなので、ぜひ覚えておいてください。

CSSの基本形

.form-top {  width: 100%;  height: 100%;}.form-bottom {  width: 100%;}

構造としては下記の通りになります。

セレクタ01 {  プロパティ: 値;  プロパティ: 値;}セレクタ02 {  プロパティ: 値;}

コピペミスで不具合が起きる例

セレクタ01 {  プロパティ: 値;  プロパティ: 値;セレクタ02 {  プロパティ: 値;}

上記の例では、セレクタ01末尾の「}」が消えてしまっています。

そうすると、セレクタ02以下のコードが全て読み込まれなくなり、思い通りのデザインが表示されないので、セレクタ01末尾に「}」を追加してあげると問題なく動作するようになります。

・追記する順番が間違っている場合

このコンテンツは、01から順番に追記することで、上書きされることなくちゃんとデザインが表示されるようになっています。

ですので、順番が入れ替わっていないかをご確認ください。

・コンテンツに不備がある場合

お手数ですが、サポートまでご連絡ください。

● 料金と紹介料について

料金は、メンテナンスでアップデートしていっているため、コンテンツボリュームに応じて値上げを行います。

現在の価格が一番安い金額になります。

紹介料は、紹介料目当ての過剰なレビューをされることで、クレームが発生するリスクを減らすため、一律20%に設定させていただいております。

● ご購入者特典

1. 半永久サポート

コンテンツの使い方が分からない方には、TwitterのDMもしくはリモート会議でのサポートを行います。

※Lステップの使い方は対象外です。

2. 無料アップデート

コンテンツは専用の会員サイトで配布いたしますので、ご要望やご意見をいただければ今後も不定期に内容をアップデートしていく予定です。