【他の構築者に差をつける】Lステップ回答フォーム×CSSカスタマイズ方法

【他の構築者に差をつける】Lステップ回答フォーム×CSSカスタマイズ方法

【他の構築者に差をつける】Lステップ回答フォーム×CSSカスタマイズ方法

9 件のレビューがあります
平均スコア 5.0


はじめに

はじめまして。

普段はサロン系のLステップ構築を行っている、ゆきと申します。

このBrainは、Lステップの回答フォームをCSSで自由にカスタマイズするためのテクニックを、そのコードと共に解説しています。


本コンテンツのコンセプトは、

・基本的なカスタマイズはコードをコピペするだけ
・各項目毎に違ったカスタマイズが可能
・自分好みの背景色やサイズへ簡単に変更が可能

となっております。


そのため、下記のような方におすすめしています。

・お客様を感動させる回答フォームを作成したい方
・こだわりのカスタマイズを加えたい方
・他の構築者に差をつける回答フォームを作成したい方
・CSSに詳しくなくてもオリジナリティのある回答フォームを作成したい方
・Lステッパーにオファーできるようになりたいデザイナーの方


逆におすすめしない方は

・コピペだけで回答フォームを完成させたい方
・コピペ以外の作業は行いたくない方


本コンテンツは数十種類にも及ぶデザインパターンを掲載しているわけではありません。

あくまでも、ご自身の作成する回答フォームに合わせて、色やサイズ、その他の項目についても修正していただくことを前提としております。

そのため、ご自身でコードを修正することに抵抗のある方は、本Brainを購入されないことをおすすめします。


本Brainの特典について

【特典①】無料サポート

専用のLINE公式アカウント内にてサポートさせていただきます。


【特典②】無料アップデート

新たにコンテンツを作成した場合、無料で本Brainに追加いたします。


【特典③】チェックボックス・ラジオボタンの装飾コード(選択時のアニメーション付き)をプレゼント

中(小)見出し以外にも、チェックボックスなどをカスタマイズしたい!という需要もあるのではないかと思い、特典としてお付けいたしました。



【特典④】回答フォーム作成依頼時の指示書をプレゼント

回答フォームを外注する際の指示書を、特典としてプレゼントいたします。

もちろん、デザイナーの方が受注する際にも使用できると思います。

特徴

●発注側、受注側のどちらでも利用可能
●どのような回答フォームにも対応
●スプレッドシートなので、共有が簡単



【特典⑤】クロス分析スプレッドシートをプレゼント

スタートプランでもクロス分析が可能なスプレッドシートをプレゼントいたします!

特徴

●設定するタグはいくつでも自由に設定
●別のスプレッドシートに結果を出力
●基準となるタグを設定できる(例:CVした人だけで性別×年代をクロス分析する、など)
●結果を表とグラフ(選択式)で表示





1.Google Fontsを読み込ませる方法

Google Fontsを読み込ませることで、アカウントの雰囲気に合わせたフォントへ変更できます。

下記サイトで、任意のフォントを選択することが可能です。

https://fonts.google.com/?subset=japanese


ここでは「よく使われている」または「おすすめのフォント」をご紹介いたします。


下記のコードをコピーすることで、回答フォーム全体に反映させることが可能です。


特定の項目のみに反映させたい場合は、"font-family~~"のコードをクラス内に貼り付けてください。

文字の太さは、下記を参考にしてください。

font-weight: 100;font-weight: 200;font-weight: 300;font-weight: 400;/* normal*/font-weight: 500;font-weight: 600;font-weight: 700;/* bold*/font-weight: 800;font-weight: 900;



Noto Sans Japanese

https://fonts.google.com/noto/specimen/Noto+Sans+JP


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');body { font-family: 'Noto Sans JP', sans-serif; font-weight:bold;  /*文字の太さはお好みで変更してください*/}


Noto Serif Japanese

https://fonts.google.com/noto/specimen/Noto+Serif+JP


@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');body { font-family: 'Noto Serif JP', serif; font-weight:bold;  /*文字の太さはお好みで変更してください*/}


Josefin Slab

https://fonts.google.com/specimen/Josefin+Slab

@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab&display=swap');body { font-family: 'Josefin Slab', serif; font-weight:bold;  /*文字の太さはお好みで変更してください*/}


Comorant Garamond

https://fonts.google.com/specimen/Cormorant+Garamond

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');body { font-family: 'Cormorant Garamond', serif; font-weight:bold;  /*文字の太さはお好みで変更してください*/}


Lato

https://fonts.google.com/specimen/Lato

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');body { font-family: 'Lato', sans-serif; font-weight:bold;  /*文字の太さはお好みで変更してください*/}


Montserrat

https://fonts.google.com/specimen/Montserrat

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');body { font-family: 'Montserrat', sans-serif; font-weight:bold;  /*文字の太さはお好みで変更してください*/}


Caveat

https://fonts.google.com/specimen/Caveat

@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');body { font-family: 'Caveat', cursive; font-weight:bold;  /*文字の太さはお好みで変更してください*/}


Dancing Script

https://fonts.google.com/specimen/Dancing+Script

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');body { font-family: 'Dancing Script', cursive; font-weight:bold;  /*文字の太さはお好みで変更してください*/}



2.中(小)見出し毎にデザインを変える方法

Lステップの回答フォームでは、タイトルやテキストのデザインを変更すると、全ての見出しや項目に反映されてしまいます。

そこで、項目毎にデザインを変える方法をご紹介します。


この続きを見るには購入する必要があります

この記事を購入する

この記事のレビュー

9 件のレビューがあります
平均スコア 5.0
Kenji

回答フォームの可能性が広がりました!

追加CSSで少し装飾するぐらいの感覚でしたが、このBrainを見て「ここまでできるのか」と驚きです! あとは独自でアレンジを加えればいろいろなことができそうだなと、回答フォームの可能性が広がる盛りだくさんな内容でした✨
こうき

回答フォームのデザインの幅が広がりました!

CSSデザインを簡単に変更できて、かついくつかのデザインの参考があるので他のデザインへの参考にもなりそうです! 自分で0からデザインを考えるのが億劫なだけに重宝しそうです。また、特典も魅力的だったので迷わず購入しました! 今後のアップデートも楽しみです!
AK

回答フォームの可能性が広がる!

やってみたかった装飾や、こんなこともできるのかと思えるテクニックが盛り沢山なのと、コードと一緒に丁寧にまとめられているので分かりやすいです! まだアウトプットしていませんが、とても有益で購入して良かったです! 部数制限あったので即買いしました。
ダイ

回答フォームを制するものはLステップを制す

アカウントの見栄えはアカウント自体の高級感を演出する上でとても重要ですが、そのための一つのキーポイントが回答フォームです。 ゆきさんのcssを使えばその回答フォームで他とは一味違う演出をすることが可能になります お客様にも喜んでいただけること間違いなしの大満足な一品です。 そして特典も豪華でこれだけで販売が成立しそうなくらいの大出血サービスにビックリ✨
まめなす

Giveの神様ゆきさん デザイナーに新しい可能性を与えてくださり感謝!

こちらの内容を活用いただくのはもちろんですが、ぜひゆきさんのLINEにも登録してみてください。私は厚かましく質問をさせていただき、お忙し中、とても親切に対応くださいました!初めはデザイナーさんだと思っておりましたら、ゆきさんはLステッパーさんでした。Twitterでも有益情報発信しておられますので、Lステッパーさんは要チェックです。 【ゆきさんへ】 ゆきさんのお陰様で渾身の回答フォームを作りましところ、クライアントさんが非常に感激くださいました!(コラボ商品のため公開不可・・・いつかゆきさんにご覧いただきたい) 結果、そのクライアントさんのデザインチームに参画できることになりそうです。本当にありがとうございます! 今後とも、どうぞよろしくお願いいたします!
ふじぴょん

作ってみたいカスタマイズ方法満載

回答フォームのCSSカスタマイズについて、 情報があまりない中、 作ってみたいカスタマイズ方法がたくさんあって、とても有益でした!
ぴーすけ

カスタマイズできる幅が広がる

回答フォームのCSSで出来るカスタマイズの見方が変わりました!さっそくいろいろなバージョンを試していきたいと思います♪
ajito

情報量満載✨

予想以上の内容でした! 親切丁寧な説明で、まずはやってみようと意気込んでおります 早速、現場で活かしていきたいです

この記事を購入する