Lステップの運用成果を上げるスキルが学べるビジネススクール「イノベ大」とは

オープンイノベーション大学(通称:イノベ大)」をご存知でしょうか?

 

Lステップ開発企業のソーシャルデータバンク株式会社(旧: 株式会社Maneql)が運営する「起業したい人やフリーランスの人が、ビジネスで結果を出すために必要なスキルがすべて学べるコミュニティ」です。

 

今回ビジネス映像メディア「PIVOT」にて、イノベ大の概要や魅力を紹介するコンテンツが公開されました。

✅Lステップについて学びたい
✅構築の成果を上げるためのスキルを身につけたい
✅協業できる仲間に出会いたい

どれかに当てはまる人は必見です。ぜひ上部より動画をご覧ください。

イノベ大で学べることを簡単に解説

イノベ大はもともと、Lステップのご契約者様を対象としたコミュニティで、成果の出るLステップ構築をする上で必要なスキルを、体系的かつ網羅的に学べるのが特徴です。

 

具体的には、以下のスキルが学べます。

  • Lステップの使い方
  • マーケティング
  • コピーライティング
  • Webデザイン
  • 動画編集

 

上記以外にも、Web広告の始め方やオンライン講座の作り方、今話題のChatGPTについてなど合計10個のコースがあり、すべて無料で受講いただけます。

 

どのように受講するのか?ですが、LINE上でいつでもどこでも学習できる仕組みです。


イノベ大のLINE

Lステップ イノベ大のLINE

 

自分の適性を知るヒントに「コース診断」がありますので、何から学ぶか悩まれた場合は、ぜひ診断を活用してみてください。

 

個人で黙々と学習するスタイルのLINEコンテンツ以外にも、現役のプロ講師から直接講義を受けられる実践会や、各界の著名人を招いた1Dayセミナー(不定期開催)など、リアルタイムで学ぶ場も多数ご用意しています。

 

オープンイノベーション大学 ゲスト登壇者

 

ITスキルだけでなく、これからの働き方や生き方など、人生観を変えるきっかけになるような学びを得られるのもイノベ大ならでは。なお、ゲストセミナーへの参加も無料です。

イノベ大はなぜ無料?

イノベ大創設者の田窪は

 

無料の方が価値がある

と考えているからです。

 

田窪社長
田窪

例えばLステップがうまくいったのは、イノベ大があったからだと思っています。

 

Lステップの価値を上げるためには、利用者の方々に成果を上げていただく必要がありますが、ダメなマーケティング方法でLステップを組んでも成果は出ません。

 

成果を上げるには、利用者自身にマーケティングやライティングなどのスキルを身につけていただく必要があり、イノベ大はLステップを効果的に使っていただくための学びの場、トレーニングの場として役立っています。

 

イノベ大で学んだ知識やスキルによって結果が出ても、お客様は「Lステップのおかげで成果が出た」と話していただけるので、結果的にLステップの利用者数増加につながります。

 

また、Lステップを運用する中ではマーケティングやライティングの他にも、画像制作や動画制作が必要になる場面もあります。イノベ大ではデザインや動画編集も学べますが、1人ですべてのスキルを習得して対応するのは困難です。

 

コミュニティには「マーケティングを学びたいデザイナー」のような、何かしらスキルを持った人も多く、自分にはないスキルを持った人とつながる場でもあるので、協業できる仲間が見つけられる。すると、より成果につながりますよね。

 

元々は有料で提供していたカリキュラムなんですが、無料にした方が学べる人が多く、中長期的にみると無料の方がメリットが大きいと判断し、無料での提供にしました。

イノベ大への参加資格

年齢や経歴といった参加資格は設けていません。必要なのは「起業家マインド」と「貢献マインド」の2つのみ。挑戦したい意欲のあるすべての方を歓迎しています。

 

「起業家マインド」とは、成長する意欲や行動力を持つ人を指します。誰かに自分を変えてほしいと願う他力本願な人ではなく、自ら変わろうと行動できる人を求めています。

 

起業家マインドの構図

 

「貢献マインド」とは、Giveの精神を持つ人を指します。講師や仲間に配慮し、敬意を払える人にご参加いただきたいと思っています。

 

人間の6つのステージ

さっそくイノベ大で学習を始めよう

イノベ大の参加方法は次の通りです。

 

  1. 「オープンイノベーション大学通信」のLINEに登録
  2. 不定期で配信されるセミナーや実践会などの案内を確認
  3. 興味があるセミナーや実践会に参加表明をする
  4. 参加する

 

LINEに登録後は、2〜4の繰り返しです。

 

「オープンイノベーション大学通信」のLINEは、以下よりご登録いただけます。

 

 

セミナーや実践会のご案内が届くまでの間はぜひ、「学び放題@LINE」をスキルアップにご活用ください。

LINEの友だち非表示はバレる?ブロックとの違いや解除・削除方法を解説

LINEの友だちを非表示にして整理したくありませんか?

 

考えている様子
  • 非表示にするとどうなるの?
  • 非表示を元に戻したい!
  • 非表示するときに気をつけることは?

 

そんな疑問をお持ちの方に向けて、LINEの友だちを非表示する方法や仕様を解説します。

 

ぜひ本記事を参考に、友だちの非表示機能を活用してみてください。

友だちの非表示とは

LINEの友だち非表示とは、友だちリストから見えない状態にすることです。

 

削除するわけではないので、相手からのメッセージは届く状態を維持します。

 

非表示リストを確認すれば、非表示にしているアカウントを確認したり、元に戻したりできます。

 

ただし、トーク履歴や非表示リストからも削除してしまうと、再度友だち追加するか相手から連絡が来るまでコンタクトが取れません。

 

そのため、一時的に非表示にしたいだけの場合は注意が必要です。

ブロックとの違い

非表示かブロックの選択画面

 

ブロックと非表示の違いは、コミュニケーションを取れるか否かという点です。

 

非表示の場合は、相手からメッセージが届けば通常通り受け取れます。

 

一方ブロックをすると、相手が電話発信してもメッセージを送っても、自分には届きません。また、自分からのメッセージ送信も不可です。

 

相手と連絡を取りたいかどうかでブロックか非表示を選択すると良いでしょう。

友だちの非表示・解除方法

友だちの非表示方法と解除方法を解説します。

友だちを非表示にする方法

LINEの友だちを非表示にする方法は以下の通りです。

 

「ホーム」タブから対象の友だちを左にスライド※>「非表示」>ポップアップ「非表示」

 

※iPhoneの場合:対象のアカウントを左にスライド
※Androidの場合:対象のアカウントを長押し

友だちリストから非表示にする画面

 

以上で友だちを非表示にできます。

友だちの非表示を解除する方法

「ホーム」タブの「設定」>「友だち」

友だち設定画面

 

「非表示リスト」>該当のアカウントを「編集」>「再表示」

非表示リストからの再表示画面

※非表示リストで削除すると、相手から連絡が来るまで待つか、再度友だち追加が必要になるのでご注意ください。

 

以上で友だちの非表示が解除されます。

LINEで友だちを非表示にするとどうなるのか?

LINEで友だちを非表示にすると以下のようになります。

 

  • 自分の友だちリストから消える
  • LINEスタンプやギフトをプレゼントできない

 

それぞれ詳しく解説します。

自分の友だちリストから消える

友だちを非表示にすると、LINEの友だちリストから消えます。代わりに、非表示リストに表示されます。

 

友だちリストから非表示にしても、トーク履歴は表示されたままです。

 

つまり、友だちリストの整理をする機能ということです。あわせてトーク履歴も整理したい場合は、以下の記事をご参照ください。

 

LINEスタンプやギフトをプレゼントできない

友だちを非表示にすると、LINEスタンプやLINEギフトをプレゼントできなくなります。

 

ただし、グループトークに非表示にした友だちがいる場合はプレゼントができます。

 

LINEギフトを送る方法を知りたい方は、以下の記事をご参照ください。

 

非表示のリスクについてよくある質問

非表示のリスクに関するよくある質問に回答します。

LINEで非表示にしたら通知オフになる?

友だちを非表示にしても通知オフにはなりません。

 

通知をオフにしたい場合は、通知設定をオフにしましょう。

 

非表示にすると相手に通知される?

非表示にしても相手には通知されません。相手の友だちリストから消えることも、メッセージできなくなることもないので、基本的にバレることはないでしょう。

 

非表示にしているかどうかも相手は確認できない仕様になっています。非表示は友だちリストに表示されないだけで、その他の機能に影響はありません。

 

メッセージも通話もできるので、現在のLINEの機能で調べる方法はないです。

非表示にするとトークできなくなる?

相手がメッセージを送れば通常通り届くので、既読して返信ができます。

 

メッセージが送られてくるとトークルームの非表示が解除され、非表示にしていないときと同様に一番上に表示されます。

 

表示されたら再度設定をしない限り、非表示にはなりません。

 

また、友だちリストを非表示にしてもトーク履歴はそのままなので、トークは通常通り利用できます。

非表示からも削除する方法は?

非表示リストからも削除すると、完全にプロフィール情報が消されます。操作方法は以下の通りです。

 

「ホーム」タブの「設定」>「友だち」

友だち設定画面

 

「非表示リスト」>該当のアカウントを選択して「編集」>「削除」

非表示リストから削除する画面

友だちを非表示するリスクは少ない

友だちリストから非表示にしても引き続きトークができて、通知されることもないのでリスクは少ないといえます。

 

友だちが増えすぎて整理したいと思っている方は、非表示機能を利用して使いやすくしてみてください。

パソコン用

予約の無断キャンセルやドタキャンを防止する方法【美容院・歯科医院必見】

店舗に限らず、オンライン開催のレッスンやセミナー、個別相談などでも、予約の無断キャンセルに悩む事業者は多いのではないでしょうか。

 

困惑している顔
  • 無断キャンセルによる機会損失が多い
  • 人件費や材料費の無駄を防ぎたい
  • ドタキャン対策には何が有効?

     

    本記事ではこのような課題や疑問を抱えている方向けに、予約の無断キャンセルやドタキャンを防止する方法について解説します。

    予約忘れは「美容院」と「歯科医院」に多い

    当メディアが全国の男女1,000人を対象に実施した調査データをみると、予約を忘れた経験がある人の割合は18.8%、約5人に1人が予約忘れの経験があると回答しています。

    予約を忘れた経験がある人の割合

     

    中でも「美容院」と「歯科医院」の予約忘れが多いことがわかっています。

     

    予約を忘れた経験がある人の割合アンケート

     

    さほど大きな数字ではないと思われた方もいるかもしれませんが、No show(無断キャンセル)の経済的なインパクトは非常に大きなものです。

     

    サービス産業の高付加価値化に向けた外部環境整備等に関する有識者勉強会による、飲食店における無断キャンセルへの対策をまとめた「No show対策レポート」をみると、

     

    No showが飲食業界全体に与えている損害は、年間で約2,000億円とも言われている。さらに、通常の予約のうち、1日前、2日前に生じるキャンセルも加えるとその発生率は6%強に達し、被害額は約1.6兆円にも及ぶと推計される。

    と説明されています。飲食業界だけでも年間2,000億円の損害ですから、全業界で考えれば膨大な損害になっているでしょう。

    予約の無断キャンセルが起こる理由

    なぜ無断キャンセルは起こるのでしょうか?理由をみていきましょう。

    とりあえず行動による予約忘れ

    無断キャンセルでまず考えられるのは、単純な予約忘れです。

     

    人気店なので早めに予約を入れておいたり、気になったオンラインセミナーに申し込んでおいたり、”とりあえず”の行動を取る人は少なくありません。

     

    とりあえず押さえておいて、日程が近づいたら考えようと思い放置し、そのまま忘れてしまうわけです。

    無断キャンセルをしてもペナルティがない

    予約を覚えていながら来ない、あるいは思い出したけれど来ない、いわゆるバックレもあります。

    • 気分が乗らなくなった
    • 悪天候で行くのがめんどくさくなった
    • 忘れていて他の予定を入れてしまった

    など、事情はさまざま考えられますが、予約が優先されないひとつの理由は、キャンセルしてもペナルティがないからでしょう。

     

    事前にお金を払っていなければ損はしませんし、後日取り立てに来ることもないため、いい加減な対応をする人もいます。

    予約の変更やキャンセルがしづらい

    予約の変更やキャンセルがしづらいのも、無断キャンセルにつながるひとつの要因です。

     

    例えば、予約の変更やキャンセルは営業時間中に電話のみ受付だと、都合がつかず連絡が難しい場合もあります。

     

    また電話ができたとしても、混み合っていてつながらなかったり、忙しいためかいくら鳴らしても出なかったりすることも。

     

    このような利便性の悪さが、無断キャンセルにつながっている可能性も考えられます。

    やむを得ない無断キャンセルもある

    無断キャンセルは予約忘れやバックレなど、顧客側に落ち度があるケースが多いですが、中にはやむを得ない事情もあります。

     

    例えば、予約当日に事故に遭ってしまった、突然体調が悪くなり病院に運ばれていたなど、確率は低いですがあり得る話です。

     

    すべての無断キャンセルに悪意があると疑うのではなく、やむを得ない場合を考慮する姿勢も大切です。

    予約の無断キャンセルやドタキャンを防止する方法

    ここからは、予約の無断キャンセルやドタキャンを防止する方法を解説します。

    キャンセルポリシーを決めて明示する

    キャンセルポリシーとは、店側が定める予約がキャンセルになった場合のルールです。

     

    例えばレストランをオンライン予約する際に、次のような表記を見かけたことがある人もいると思いますが、これがキャンセルポリシーです。

    【ご予約のキャンセルについて】

    ご予約のキャンセルにつきましては、前日までにご連絡をお願いします。

     

    【キャンセル料について】

    コース予約のキャンセルには、以下のキャンセル料が発生する場合があります。

    • 前日キャンセル  :50%
    • 当日キャンセル  :80%
    • 無断キャンセル  :100%

    【予約時間の遅刻について】

    ご予約の時間に遅れる場合は、お早めに店舗へご連絡をお願いいたします。

     

    予約時間を15分以上経過しても来店されない場合は、次のお客様を優先いたします。なお無断遅刻が繰り返された場合、次回のご予約をお断りすることがありますのでご了承ください。

     

    キャンセルポリシーを明示すれば、無断キャンセルやドタキャンの抑止力になりますし、万が一キャンセルがあっても料金の徴収がしやすくなります。

    決済システムを導入する

    キャンセルポリシーを明示しても、予約時に名前と電話番号しか確認していなければ、無断キャンセルの後追いは難しいでしょう。着信拒否されてしまったら追えなくなるからです。

     

    無断キャンセルによる金銭的な損失を最小限に抑えるには、決済システムの利用がおすすめです。

     

    決済システムを導入し、予約を確定する際にクレジットカード情報の入力を必須とすれば、無断キャンセル・ドタキャンの抑止力になりますし、仮に無断キャンセルがあったとしても料金はきっちり請求できるため、店舗側の不利益は最小で済みます。

     

    「ホテルの宿泊料金のような、請求額が確定している場合は事前決済がしやすいけど、席のみ予約の場合はどうすればいい?」

     

    席のみ予約でもキャンセル料の請求は可能です。平均客単価から転用可能な材料費などを引いた額、平均客単価の50〜70%×人数が妥当なキャンセル料と言われています。

     

    キャンセルポリシーの設定と明示、そして決済システムの利用で、無断キャンセル・ドタキャンは大幅に減らせるでしょう。

    予約の変更・キャンセルを容易にする

    厳格なキャンセルポリシーの設定や、予約時にクレジットカード情報の入力を求めるのは抵抗がある方もいるでしょう。

     

    歯科医院や眼科のような医療機関の保険診療に関しては、キャンセル料の請求自体が難しいため、決済システムの導入は現実的ではありません。

     

    そのような場合は予約管理システムを使うなどして、予約の変更・キャンセルを容易にするのがおすすめです。

     

    Web上でいつでも変更・キャンセルができれば、夜中や電車での移動中など、予定がわかった時点ですぐに対応できので、連絡忘れや連絡遅れの解消が期待できます。

    予約のリマインド配信を行う

    予約のうっかり忘れを防止するには、リマインド配信(予約の確認通知)を行うのも効果的です。

     

    オンラインで飲食店や宿泊施設を予約すると、前日や3日前くらいに、日時やアクセス情報などがメールで送られてくると思いますが、それがリマインド配信です。

     

    当メディアが全国の男女1,000人を対象に実施した「リマインドに関する調査データ」をみると、57%がリマインドによって予約を思い出した経験があると回答しています。

     

    LINE リマインドに関する調査データ

    また、リマインドは「あると助かる」「予約日までに期間がある場合はしてほしい」と回答した人を合わせると95.7%、「なくてもよい」と回答したのはわずか4.3%でした。

     

    LINE リマインドに関する調査データ

     

    予約のリマインドは効果があり、ユーザーのニーズもあるので、取り入れる価値は十分あると言えます。

    無断キャンセル対策をする際の注意点

    無断キャンセルは運営側にとって、金銭的にも精神的にも大きなダメージとなるため、厳しく対応したくなるのは当然です。

     

    ただ、無断キャンセルをするのは一部の人で、大半の人はきちんと予約を守っていることを忘れてはいけません。

     

    キャンセルポリシーを全面に押し出したり、表現が高圧的だったりすると、予約しづらいと感じて優良顧客に敬遠されてしまう恐れがあります。

    • 電話予約以外の方法も取り入れる
    • Webで予約の変更やキャンセルをできるようにする
    • リマインド配信を行う

    など、予約忘れやドタキャンが起こらない仕組みづくりができると、平和的解決につながるでしょう。

    予約管理なら「Lステップ」がおすすめ

    予約管理システムの導入を検討している方には、LINE公式アカウント※専用のマーケティングツール「Lステップ」の導入がおすすめです。

     

    ※LINE公式アカウントとは、簡単に言うとビジネス用のLINEのことです。私たちが普段使いしているLINEとは違い、友だちに一斉配信ができるなど便利な機能が備わっています。


    Lステップを導入すれば、ユーザーはLINEから新規予約の受付・変更・キャンセルができるようになります。

     

    例えば以下は、整体院のLステップ導入事例です。メッセージ下に「リッチメニュー」というメニューバーを表示し、予約導線を設置しています。

     

    Lステップ導入事例 制退院AKATSUKI

     

    予約画面

    Lステップ導入事例 制退院AKATSUKI 予約画面

    LINEに予約機能を実装し、予約の受付・変更・キャンセルができるようにした結果、営業中の電話対応の大幅削減につながりました。

     

    なお、Lステップにはリマインド配信の機能もあり、例えば予約日の3日前にリマインドが送られるよう設定しておけば、リマインド配信の自動化が可能です。

     

    さらに、来店後のサンクスメッセージ配信やキャンペーン情報の配信など、リピート施策も一貫して行えます。

     

    国内での利用者が多く、情報の到達率が高くリマインドの見落としは少ないLINEは、予約管理に最適なツールです。

     

    予約管理システムの導入に興味がある方は、ぜひLステップをご検討ください。

    まとめ

    今回は、予約の無断キャンセルやドタキャンを防止する方法について解説しました。

     

    キャンセルポリシーの設定と明示に加え、予約忘れやドタキャンが起こらない仕組みづくりを行い、機会損失を防ぎましょう。

    パソコン用

    【Webデザイナー監修】Lステップのリッチメニューをデザインするコツ

    LINE公式アカウント・Lステップに数ある機能の中で、特に人気のリッチメニュー。

     

    ユーザーの目を引くにはどのようなデザインにすればよいか、悩まれる方も多いのではないでしょうか。

     

    悩む人のイラスト
    • ボタンは何個くらいが適切?
    • タブを分けた方がいい?
    • フォントや色の選び方は?
    • 背景画像はあった方がいい?
    • そもそも画像はどうやって作ればいいの?

       

      などなど、リッチメニューを作るにあたって、このような疑問を持つ方は少なくないと思います。

       

      そこで今回は、ソーシャルデータバンク株式会社(旧: 株式会社Maneql)に所属するWebデザイナー監修のもと、Lステップのリッチメニューをデザインするコツについてまとめました。

       

      デザイナーにリッチメニュー制作を依頼する際のポイントについても解説していますので、ぜひ併せて参考にしてみてください。

      リッチメニューはタップされなければ「ただの絵」

      まず、よいリッチメニューとは何か?を定義します。

       

      本記事におけるよいリッチメニューは「使ってもらえるリッチメニュー」です。

       

      使いやすさで重要なのは、何が書いてあるのかが見やすくてわかりやすく、ひとつひとつのボタンがタップしやすいことです。

       

      リッチメニューは背景画像のようにただ眺めるものではなく、タップしてもらい、活用されてナンボ。いくらこだわって作り込んでも、タップされなければ「ただの絵」です。

       

      ご自身で制作する時もデザイナーさんに外注する時も、ユーザーの使いやすさ重視で考えると、よりよい仕上がりになるでしょう。

      デザインをする前にやるべき2つの準備

      ボタンの大きさや配置、色合い、フォント決めなど、デザインに入る前にやるべきことを2つご紹介します。

       

      準備がきちんとできていない段階でデザインに入ると、まとまりが悪くなったり修正が多くなったりしがちです。準備は念入りに進めましょう。

      ユーザーを想像する

      自社アカウントを利用するユーザーは、どのような方が多いでしょうか?

       

      • 10〜20代の女性が多い
      • 50〜60代の男性が多い
      • あらゆる年齢/性別の方がいて偏りはない

      さまざまなケースがあると思いますが、誰が操作するのかによって、使う言葉や文字のサイズ、色合いなどは変わってきます。

       

      デザイナーさんに依頼する場合は特に、操作する人の情報やイメージは非常に重要です。改めて自社ユーザーの特徴を言語化してみましょう。

      情報を整理する

      Lステップのリッチメニューは、ボタンを20個以上作れたりタブ分けができたり自由度が高いため、使い道は多岐にわたります。

       

      「Lステップのリッチメニューを使うからには、いろんな情報を集約したい」と考える方も多いと思いますが、情報量は多ければ多いほどいいわけではありません

       

      むしろ多すぎると見づらくなり、タップ率が下がる場合もあるため注意が必要です。以下を意識して情報を整理しましょう。

       

      1. 載せる項目を厳選する
      2. 集約できるものは集約する
      3. 1番目立たせたい項目を決める

       

      それぞれもう少し詳しく解説します。

      載せる項目を厳選する

      リッチメニューに載せる項目は厳選しましょう。

       

      なんとなく網羅的に情報を設置しがちですが、使いやすいリッチメニューを作る上で項目の絞り込みは欠かせません。

       

      例えば、友だち追加の導線が店舗にしかない場合、ユーザーはすでに店舗の場所を知っているわけですから、アクセス情報は載せなくてもよいと考えられます。

       

      なくても差し支えない項目はどんどんカットしましょう。仮に最終的に残った項目が3つなら、3つでOKです。

       

      情報は少なければ少ないほど見やすくデザインできます。無理に付け足して幅を狭め、本当に重要な情報のアピール力を弱めるくらいなら、3つで進めることをおすすめします。

      集約できるものは集約する

      同じカテゴリーのものはひとつのボタンやタブに集約し、リッチメニュー1枚あたりの情報量を減らせると、見た目がスッキリします。

       

      例えば「最新情報」と「お知らせ」は似た内容なので、一括りにしても問題ないでしょう。

       

      その他、InstagramやYouTubeなどは「SNS」で集約し、SNSボタンをタップしたらリッチメニューが切り替わる、あるいは専用のタブを作ってまとめるのもひとつです。

       

      InstagramやYouTubeリッチメニュー

      ※引用:兵庫トヨタ

       

      載せる項目を決めた後は、項目の集約ができないかチェックしてみてください。

      1番目立たせたい項目を決める

      情報整理の中で最も重要なのは、何を1番目立たせたいかを決めることです。

       

      あれもこれも目立たせようとするとごちゃごちゃして、視認性が悪くなるからです。

       

      Lステップ 診断リッチメニュー 

      すべてを最優先にするということは何も優先していないのと同じで、デザイン的な視点でみてもマーケティング的な視点でみても、イマイチな仕上がりになってしまいます。

       

      上図は記事用に見やすく拡大していますが、実際のサイズ感は次の通り。

       

      Lステップ 診断リッチメニュー 実物サイズ

      ※iPhone13 miniのサイズ感

       

      リッチメニューは主にスマホの小さな画面で見て操作するものですから、目立たせる項目は1つに絞るのが理想です。

       

      目立たせる項目を1つに絞れるとデザインしやすくなりますし、シンプルなデザインでもユーザーの目を引くことができます。

       

      Lステップ ホワイトニングlounge リッチメニュー 実物サイズ

      ※引用:ホワイトニングlounge

      知っておきたい「デザインの4原則」

      リッチメニューをデザインするコツをご紹介する前に、デザイン全般で使える基本知識「デザインの4原則」をご紹介します。

      1.近接:関係する情報を近づける

      近接とは、関係する情報を近づけてグループ化することです。

       

      関係する情報がグループ化されていると、何が何を指しているのかがわかりやすく、ぱっと見で情報を伝えられるのが特長です。

       

      グループ化されている、されていないコーヒーの画面

      2.整列:要素に一体性を持たせて組織化する

      整列とは、関係する要素を一定のルールで配置することです。

       

      リッチメニューに活用する場合は、ボタンの大きさや余白を揃えると視認性が高まり、全体的に見やすくなります。

      3.反復:特徴的な要素を繰り返し、一貫性を持たせる

      反復とは、関係する要素に使う色やフォント、アイコンなどを統一し、デザインに一貫性を持たせることです。

       

      リッチメニューに活用する場合は、アイコン+文字+ボタン枠を1セットとして考え、同じセットを複数使うと見やすさがアップします。

       

      リッチメニュー 反復がない、ある場合

      4. 対比:情報に優先度つけ、違いを明確にする

      対比とは、要素に強弱をつけ、特にみてもらいたい情報を明確にすることです。

       

      リッチメニューに活用する場合は、目立たせたいボタンを大きく目立たせる、あるいは特定のボタンだけ文字を大きくしたり文字色を変えたりすると、強弱が表現できます。

       

      リッチメニュー ワイン専門店エノテカ

      引用:ワイン専門店エノテカ

      リッチメニューをデザインするコツ

      次に、リッチメニューをデザインするコツを解説します。デザインのコツは次の通りです。

       

      1. ボタンだとわかりやすいデザインにする
      2. ボタンの数は6個まで
      3. フォントは2種類まで
      4. 文字数はなるべく少なく
      5. メインの色は1〜2色
      6. 画像素材はシンプルに

      ひとつずつ見ていきましょう。

      ボタンだとわかりやすいデザインにする

      まずはボタンのデザインについてです。ボタンだとわかりやすいデザインにすることで、タップ率の向上が期待できます。

       

      逆にボタンだとわかりづらいと、タップしてもらえない可能性があるので注意が必要です。

       

      ボタンだとわかりづらいデザイン

      Lステップ ボタンコーヒーデザイン

       

      ボタンの隅に矢印を付けたりTAPと表記したり、あるいはボタンを立体的にしたりすると、ボタンだとわかりやすくなります。

       

      Lステップ ワイン専門店エノテカ リッチメニュー

      引用:ワイン専門店エノテカ

       

      Lステップ みんなのコピー

      引用:みんなのコピー

      ボタンの数は6個まで

      リッチメニュー1枚あたりのボタンの数は、6個までを目安にするのがおすすめです。

       

      理由は、7個以上になると「使いづらくなっていく」からです。例えば以下の英語アカウントのリッチメニューはまとまりがよく、見やすいと感じた方もいると思います。

       

      英語アカウント リッチメニュー

       

      ただ実際に操作すると考えたらいかがでしょうか?ちなみに以下は、iPhoneのminiシリーズで表示した場合の画像サイズです。

      英語アカウント リッチメニュー 実物サイズ

      「見やすい=使いやすい(タップしやすい)」とは限りません見やすいだけでなく使いやすさも十分か、同時に確認しましょう。

       

      上図の改善案には例えば、左2列を「実用英語」、右2列を「英語学習」のようなボタンに集約して、それらをタップしたらリッチメニューが切り替わる仕様が考えられます。

       

      カテゴリー(大)でボタンを集約

      英語アカウント 実用英語 英語学習ボタン リッチメニュー

       

      「実用英語」をタップしたらカテゴリー(中)に切り替わる

      英語アカウント 実用英語 タップ後の全体のサイズ リッチメニュー

      Lステップのリッチメニューは、表示の切り替えやタブ分けが容易にできるのが利点です。

       

      何枚も画像を用意したり設定したりするのは手間ですが、使いやすさは結果に直結するので、利点を活かし、使いやすさを重視したデザインを推奨します。

      フォントは2種類まで

      使うフォントを2種類までにすると、デザインに統一感が出て読みやすさが向上します。

       

      代表的なフォントの特徴と、おすすめのフォントをご紹介しますので、フォント選びの参考にしてみてください。

       

      【代表的なフォントの特徴】
      • 明朝体   :上品・女性的
      • ゴシック体 :ビジネス・インパクト
      • 丸ゴシック体:かわいい・やさしい

         

        【おすすめのフォント】
        • Noto Serif JP(明朝体:源ノ明朝)
        • Noto Sans JP(ゴシック体)

           

          おすすめのフォント2つは、まるみがあり、読みやすく美しいのが特長です。

           

          WindowsでもMacでも使えてどのデバイスでも表示され、文字の太さと収録文字数も豊富。フォント選びに迷ったら、おすすめのフォントを使ってみてください。

           

          もちろん上記以外のフォントを使っても問題ありません。特徴的なフォントを使う場合は、文字を大きくして読みやすくする工夫をしましょう。

          文字数はなるべく少なく

          文字数はボタンの大きさによりますが、ボタンが小さい場合は単語のみ、ボタンが大きい場合は文章もOK、と考えるのがおすすめです。

           

          ボタンが小さいリッチメニュー

          Lステップ リッチメニュー フューレック

          引用:フューレック

           

          ボタンが大きいリッチメニュー

          Lステップ リッチメニュー よなよなエール/ヤッホーブルーイング公式

          引用:よなよなエール/ヤッホーブルーイング公式

           

          いずれにせよ文字数はなるべく少なく、ぱっと見で理解できるボリュームを心がけましょう。見えない・読めないボタンは、存在しないのと同じです。

           

          また、文字が見やすくても、理解できなければ意味がありません。例えば「おすすめ」とだけ書かれていたり、英語のみで書かれていたりすると、ぱっと見で伝わらない可能性があるため注意が必要です。

           

          その他、文字のサイズに強弱をつけると、重要な情報が伝わりやすくなります。

           

          Lステップ リッチメニュー ZIGEN

          引用:ZIGEN

          メインの色は1〜2色

          色が多ければ多いほど、デザインの難易度は上がります。メインの色は1〜2色にし、シンプルすぎると感じる場合は「濃淡」で色の少なさをカバーしましょう。

           

          Lステップ リッチメニュー ホワイトエッセンス

          引用:ホワイトエッセンス

           

          【参考:色の持つイメージ】
          • 赤:情熱的・力強さ・アクティブ・警告
          • 青:安心・知的・冷静・静寂・誠実・清潔
          • 黄:好奇心・幸福・光・軽快・エネルギー・希望
          • 橙:活発・好奇心・暖かい・温もり・にぎやか
          • 緑:穏やか・調和・自然・平和・新鮮・やすらぎ
          • 紫:優雅・上品・神秘・知性・気品・魅力的
          • 茶:温もり・安定・素朴・落ち着き・堅実
          • 白:清楚・清潔・潔さ・美しさ・神聖・無垢
          • 黒:高級感・男性的・都会・重厚感・厳粛
          • 金:成功・高級・富・頂点・輝き・豪華
          • 銀:落ち着き・上品・冷静・洗練

          画像素材はシンプルに

          画像やアイコンなどの素材はシンプルでわかりやすく、かつボタンの内容と合うものを選びましょう。

           

          Lステップ リッチメニュー DIOR

          引用:DIOR

           

          Lステップ リッチメニュー SABON

          引用:SABON

           

          素材なし・素材のみで作るとぱっと見でわかりづらいため、素材と文字はセットでの利用がおすすめです。

           

          素材なしのリッチメニュー例

          Lステップ 素材無しリッチメニュー

           

          素材のみのリッチメニュー例

          Lステップ 素材のみリッチメニュー

          よくある失敗ポイントと改善案を具体例で解説

          飲食店・脱毛サロン・歯科医院を例に、よくある失敗ポイントと改善案を解説します。

           

          ノンデザイナーさんでも真似できる、シンプルな内容でまとめていますので、ぜひ参考にしてみてください。

          飲食店(ラーメン屋)の例

          【Before】

          【よくある失敗ポイント】

          他とは違うデザインしたい・個性を出したいという理由から、さまざまな種類の枠やフォント・カラーを使ってしまう

          ❌ 盛り込み過ぎて、デザインの統一感がなく読みにくい

          ❌ ボタンだと認識しにくいため、どこを押していいかわからない

          【After】
          【改善案】

          ⭕ 目立たせたい情報を1つだけ決めて、ボタンを大きくし、ボタン内にイラストを配置する。無駄な装飾がないので読みやすい

          ⭕ 写真はアップで見せるとわかりやすい

          ⭕ ボタンだと分かりやすいデザインに変更

          ⭕ アイコンで目立たせたい部分がしっかり目立つ

          脱毛サロンの例

          【Before】

          【よくある失敗ポイント】

          ❌ 英語でしか書かれていないボタンがある

          ❌ ボタンっぽくない

          ❌ イラストと近くにある文字(RESERVATION)の関連性があまりない

          ❌ お客様が一番見たい情報のボタンが小さい

          【After】
          【改善案】

          ⭕ ボタンだとはっきり認識できるデザインに

          ⭕ お客様が知りたい一番情報を大きく、魅力的に表現

          ⭕ 情報量が多い場合はボタンの中にボタンを配置して、直感的に押したくなる工夫をする

          ⭕ 大きなボタン以外をシンプルにすることで目立たせたいボタンがより際立つ(視線誘導)

          歯科医院の例

          【Before】

          【よくある失敗ポイント】

          ❌ ボタンとわかりにくいボタン枠

          ❌ ボタンの上にイラストが乗っているのでさらにボタンだとわかりにくい

          ❌ 背景写真の影響で文字が見にくい

          ❌  「HP」は「ホームページ」と全員がわかるわけではないので、英語表記はできるだけ避ける

          【After】
          【改善案】

          ⭕ ボタンだと分かるデザインに。リッチメニューでは四角形が最もボタンだとわかりやすい

          ⭕ 歯科医院なので、年配の方も使われる可能性が高い。直感で分かるようにアイコンを大きく(文字を大きくしてもOK)

          ⭕ 背景に写真を配置するデザインは上級者向けです。見やすさ・使いやすさを最優先に考え、無理に写真は使わない

           

          ノンデザイナーさんが作る場合は特に、シンプルで誰でも使いやすいデザインに仕上げるのがおすすめです。

          デザイナーに依頼する時のポイント

          リッチメニュー画像を外注する際、何を準備し、どのように伝えるとよいのか、依頼する時のポイントをまとめます。

           

          依頼の仕方ひとつで完成形は大きく変わるため、外注が視野にある方はぜひ参考にしてみてください。

          こだわりたいなら「お任せ」はNG

          デザインのことはデザイナーさんにお任せするのがいいだろう、と思うかもしれませんが、「お任せで」は「無難で」と伝えているようなものです。

           

          デザイナーとしてはなるべく修正を少なく済ませたいので、「お任せで」と言われたら無難に見やすく・使いやすいデザインに仕上げます。

           

          デザインをこだわりたいのであれば、きちんと要望を整理し、言語化して伝えましょう。

          「誰にどのボタンを1番押してほしいか」を伝える

          リッチメニューに設置するボタンの中で、どれを1番目立たせたいか、そしてどんな人にそのボタンを押してほしいかを伝えましょう。

           

          「ココを強調したい」という要望があるだけでも、無難な仕上がりではなくなります。デザイナーへ依頼する場合も、デザインに入る前の情報整理が肝心です。

           

          情報を整理するの内容を参考に、情報をまとめてみてください。

          イメージを画像でも伝える

          自分のイメージは言葉や文字だけでは伝わりづらいため、参考画像も用意して伝えるようにしましょう。

           

          例えば「おしゃれな感じにしてほしい」と伝えても、人それぞれ何をおしゃれと思うかは違うので、言葉のみでイメージを汲み取るのは至難です。

           

          色も同様で、例えば「青をベースにしてほしい」と伝えても、どんな青を想像しているかまでは伝わりません。

           

          好きなフォントやボタンの形など含め、自分のイメージに当てはまる参考画像をいくつか集めて共有すると、より理想に近いものが仕上がります。

          自分で作成するなら「Lメニュープラス」がおすすめ

          Lステップには、リッチメニューを作成できる「Lメニュープラス」という機能があるのをご存知でしょうか。

           

          Lメニュープラスには30種類以上のテンプレートがあり、当てはめていくだけで簡単にリッチメニューが作れます。

           

          Lメニュプラスで作成したリッチメニュー①

          Lメニュプラスで作成したリッチメニュー

          左上部の写真は外部のフリー素材を使っていますが、アイコンはLメニュープラスに登録されているものを使っています。

           

          また、下図のようなタブ分けデザインも簡単に作成できます。

           

          Lメニュプラスで作成したリッチメニュー②

          Lメニュプラスで作成したリッチメニュー

          シンプルなリッチメニューであれば、Lメニュープラスでも十分作れます。ご自身でデザインしてみたい方には、Lメニュープラスの活用がおすすめです

          まとめ

          今回はソーシャルデータバンク株式会社(旧: 株式会社Maneql)に所属するWebデザイナー監修のもと、Lステップのリッチメニューをデザインするコツをご紹介しました。

           

          最後に、本記事の要点をまとめます。

           

          • リッチメニューは使いやすさ重視で設計しよう
          • 事前の情報整理がデザインの良し悪しを決める
          • ボタン/フォント/文字/色は少ない方がいい
          • デザインは迷ったらシンプルに仕上げよう

           

          本記事を御社のリッチメニュー作りにお役立ていただけますと幸いです。

          【Lステップ】回答フォームで使えるカスタムCSSのコード集

          Lステップの回答フォームで、カスタムCSSを使って装飾したいと思う人は多いのではないでしょうか。

           

          一方で、CSSコードは初心者にとっては使い方がわからず、外注するにも費用が発生するので、結局使わないという方も多いかと思います。

           

          そこで今回は初心者でも簡単に装飾できる、回答フォームで使えるカスタムCSSコード集をご紹介しますので、ぜひ参考にしてみてください。

           

          弊社サポートではCSSに関する質問は完全にお答えしきれない可能性があります。ご了承いただきますようお願い申し上げます。

          カスタムCSSを使う準備

          カスタムCSSを使う前にやっておきたい準備を解説します。

           

          本番用の回答フォームで失敗しないために、最初はテスト用の回答フォームを作成して使うのがオススメです。

           

          テスト用の回答フォームを自分に送信し、表示を確認しながら調整すると良いでしょう。

           

          また、CSSでは背景色など色を変えることができます。

           

          下記のようなサイトを準備しておくと、CSSコードを修正する際に便利なのでオススメです。

           

          CSSコード色見本オススメサイト

           

          CSSコードの使い方

          CSSコードの使い方を解説します。掲示板の投稿方法

          ①CSSを使いたい回答フォームを開き、下部の「カラー/デザイン設定」をクリックします。

           

          ②その下にある「カスタムCSSを使用」にチェックを入れます。

           

          ③CSSコードを入力する枠が表示されるので、ここへCSSコードを入力します。⇒フォーム作成ツールの選び方と活用事例19選をダウンロードする

          CSSコード集

          コピペで簡単に使えるCSSコードを紹介します。

           

          コピぺをする時は、枠の中の全ての文字をコピーして貼り付けしてください。

           

          赤文字になっている部分は、お好みで変更してください。

          ヘッダー画像の設定方法

          ヘッダー画像の設定方法を紹介します。

           

          最初に、設定したい画像を登録します。

           

          「カラー/デザイン設定」の「ヘッダー画像URL」にヘッダーに使いたい画像のURLを入力しましょう。

          Lステップ「カラー/デザイン設定」の「ヘッダー画像URL」

          ※「ヘッダーアイコンを非表示にする」にチェックが入っていない場合は、チェックをいれます。

           

          ーーーーーーーーーーー

          <画像をURLにする方法>

           

          ①Lステップ管理画面の左メニューから「登録メディア一覧」をクリックします。

          Lステップ 管理画面 登録メディア一覧

           

          ②「画像アップロード」をクリックし、回答フォームで使いたい画像をアップロードします。
          Lステップ 登録メディア一覧 画像アップロード
          ③アップロードしたら「ダウンロード」をクリックします。

          Lステップ 登録メディア一覧 画像ダウンロード

           

          ④開いたページのURLが、画像のURLです。このURLをコピーして使いましょう。

          Lステップ 登録メディア画像ダウンロードしたURL

          ーーーーーーーーーーー

           

          次に下記のCSSを入力します。枠の中の全ての文字をコピーして貼り付けしてください。

          /* ▼▼ ヘッダー画像を普通に挿入するCSS ここから ▼▼ */

          .form-top {

          background-position: center center;

          width: 100%;

          height: 150px;  /* スマホでのヘッダー画像の高さはここの数値を変更 */

          }

           

          .form-top .form-top-right {

          display: none;

          }

           

          @media (min-width: 768px) {

          .form-top {

          height: 300px; /* パソコンでのヘッダー画像の高さはここの数値を変更 */

          }

          }

          /* ▲▲ ヘッダー画像を普通に挿入するCSS ここまで ▲▲ */

          ※『 /* スマホでのヘッダー画像の高さはここの数値を変更 */』といったものも、そのままコピペしてOKです。後から編集する時に、どこの数字を変更したら良いかわかりやすいので、このまま貼り付けましょう。

           

          ヘッダー画像の高さは、パソコン表示・スマホ表示でそれぞれ高さが設定できるので、表示を確認しながら変更しましょう。
          Lステップチョコプラ 回答フォーム名前入力欄

          ヘッダー画像内のタイトルを消す方法

          回答フォームにタイトルを入力すると、画面上部が入力したタイトルに変わります。

           

          しかし、ヘッダー内にも同じタイトルが自動で入力されてしまうので、ヘッダー内だけタイトルを消す方法をご紹介します。

          Lステップチョコプラ 特典付きアンケート

          /* ここでプレビューの文字を消しています */

          .form-top .form-top-left  {

              display: none;

          }

          /* ここまでプレビューの文字を消しています */

           

          画面上部のタイトルはそのままで、ヘッダー内だけ消えました。

          Lステップチョコプラ 特典付きアンケート

          中見出しの装飾方法

          中見出しの装飾方法を紹介します。

           

          ①グラデーションLステップ お名前をご入力くださいフォーム

          /* ▼▼ 中見出し16 ここから ▼▼ */

          :root {

          –bg-color-left: #1e90ff; /* グラデーションの左側の色はここのカラーコードを変更 */

          –bg-color-right: #e0ffff; /* グラデーションの右側の色はここのカラーコードを変更 */

          }

           

          h4.description-md-title {

          background: -webkit-linear-gradient(to right, var(–bg-color-left), var(–bg-color-right));

          background:-moz-linear-gradient(to right, var(–bg-color-left), var(–bg-color-right));

          background: linear-gradient(to right, var(–bg-color-left), var(–bg-color-right));

          box-shadow: none;

          color: #ffffff; /* 文字色はここのカラーコードを変更 */

          width: 100%;

          margin: 15px 0 0 0;

          font-weight: 600;

          padding: 15px 15px 15px 15px;

          }

           

          .col-sm-4, .col-sm-8, .col-sm-12 {

          padding: 0;

          }

          /* ▲▲ 中見出し16 ここまで ▲▲ */

           

          ②ラベル
          Lステップ お名前をご入力くださいフォーム

          /* ▼▼ 中見出し10 ここから ▼▼ */
          h4.description-md-title {

          background: #f0e68c; /* 背景色はここのカラーコードを変更 */

          color: #8b4513; /* 文字色はここのカラーコードを変更 */

          width: 100%;

          margin: 15px 0 0 0;

          box-shadow: none;

          font-weight: 600;

          padding: 15px 15px 15px 15px;

          border-radius: 22px 0px 0px 22px;

          }

           

          h4.description-md-title::before {

          content: ‘🏠‘;

           

          color: #ffffff;

          margin-right: 8px;

          }

           

          .col-sm-4, .col-sm-8, .col-sm-12 {

          padding: 0;

          }

          /* ▲▲ 中見出し10 ここまで ▲▲ */

           

          ③ラベル
          Lステップ お名前をご入力くださいフォーム

          /* ▼▼ 中見出し13 ここから ▼▼ */

          h4.description-md-title {

          background: #006400; /* 背景色はここのカラーコードを変更 */

          box-shadow: none;

          color: #ffffff; /* 文字色はここのカラーコードを変更 */

          width: 100%;

          margin: 15px 0 0 0;

          font-weight: 600;

          padding: 15px 15px 15px 15px;

          position: relative;

          }

           

          h4.description-md-title::before {

          position: absolute;

          content: ”;

          top: 100%;

          left: 0;

          border: none;

          border-bottom: solid 15px transparent;

          border-right: solid 20px #3cb371; /* 折り返し部分の背景色はここのカラーコードを変更 */
          f
          }

           

          .col-sm-4, .col-sm-8, .col-sm-12 {

          padding: 0;

          }

          /* ▲▲ 中見出し13 ここまで ▲▲ */

          小見出しの装飾方法

          小見出しの装飾方法を紹介します。

           

          ①二重線
          Lステップ お名前をご入力くださいフォーム

          /* ▼▼ 小見出し03 ここから ▼▼ */

          :root {

            –underline-color-s: #ff1744; /* 下線の色はここのカラーコードを変更 */

          }

           

          h5.description-title {

            border-bottom: 4px solid var(–underline-color-s);

            background: transparent;

            color: #555555; /* 文字色はここのカラーコードを変更 */

            width: 100%;

            margin: 15px 0 0 0;

            padding: 0 0 10px 0;

            box-shadow: none;

            font-weight: 600;

            position: relative;

          }

           

          h5.description-title::after {

            content: “”;

            position: absolute;

            bottom: -8px;

            left: 0;

            right: 0;

            border-bottom: 1px solid var(–underline-color-s);

          }

           

          .col-sm-4, .col-sm-8, .col-sm-12 {

            padding: 0;

          }

          /* ▲▲ 小見出し03 ここまで ▲▲ */

           

          ②点線枠
          Lステップ お名前をご入力くださいフォーム点線枠

          /* ▼▼ 小見出し12 ここから ▼▼ */

          :root {

           –bg-color-s: #db7093; /* 背景色はここのカラーコードを変更 */

          }

           

          h5.description-title {

           background: var(–bg-color-s);

           box-shadow: 0px 0px 0px 7px var(–bg-color-s);

           color: #ffffff; /* 文字色はここのカラーコードを変更 */

           border: dashed 1px #ffffff; /* 点線の色はここのカラーコードを変更 */

           width: calc(100% – 14px);

           margin: 15px 0 0 7px;

           font-weight: 600;

           padding: 15px 15px 15px 15px;

          }

           

          .col-sm-4, .col-sm-8, .col-sm-12 {

           padding: 0;

          }

          /* ▲▲ 小見出し12 ここまで ▲▲ */

           

          ③立体
          Lステップ お名前をご入力くださいフォーム立体

          /* ▼▼ 小見出し09 ここから ▼▼ */

          h5.description-title {

           background: #f0f8ff; /* 背景色はここのカラーコードを変更 */

           color: #696969; /* 文字色はここのカラーコードを変更 */

           width: 100%;

           margin: 15px 0 0 0;

           box-shadow: none;

           font-weight: 600;

           padding: 15px 15px 15px 15px;

           border-left: solid 5px #0000cd; /* 左線の色はここのカラーコードを変更 */

           border-bottom: solid 3px #b0c4de; /* 下線の色はここのカラーコードを変更 */

          }

           

          .col-sm-4, .col-sm-8, .col-sm-12 {

           padding: 0;

          }

          /* ▲▲ 小見出し09 ここまで ▲▲ */

          送信ボタンの装飾方法

          送信ボタンの装飾方法を紹介します。

           

          ①矢印あり
          Lステップ お名前をご入力くださいフォーム矢印あり

          /* ▼▼ ボタン07 ここから ▼▼ */

          :root {

            –btn-bg-color: #ff1744; /* 背景色はここのカラーコードを変更 */

            –btn-font-color: #ffffff; /* 文字色はここのカラーコードを変更 */

          }

           

          .btn-primary, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, .btn-primary.active, .btn-primary:active, .btn-primary:hover,
          .open>.btn-primary.dropdown-toggle {

            color: var(–btn-font-color);

            background: var(–btn-bg-color);

            border: none;

            width: 100%;

            height: 50px; /* ボタンの高さはここを変更 */

            position: relative;

            border-radius: 30px;

            padding: 0 45px 0 25px;

            font-size: 16px; /* 文字の大きさはここを変更 */

            letter-spacing: 0.1em;

            outline: none;

          }

           

          .btn-primary::before {

            content: ”;

            position: absolute;

            top: 50%;

            right: 16px;

            transform: translateY(-50%);

            width: 25px;

            height: 25px;

            background: var(–btn-font-color);

            border-radius: 50vh;

          }

           

          .btn-primary:after {

            content: ”;

            width: 8px;

            height: 8px;

            border: 0;

            border-top: 2px solid var(–btn-bg-color);

            border-right: 2px solid var(–btn-bg-color);

            position: absolute;

            top: 50%;

            right: 26px;

            transform: translateY(-50%) rotate(45deg);

          }

          /* ▲▲ ボタン07 ここまで ▲▲ */

           

          ②立体ボタン
          Lステップ お名前をご入力くださいフォーム立体ボタン

          /* ▼▼ ボタン02 ここから ▼▼ */

          :root {

            –btn-bg-color: #ff1744; /* 背景色はここのカラーコードを変更 */

            –btn-font-color: #ffffff; /* 文字色はここのカラーコードを変更 */

            –btn-shadow-color: #d50000; /* 影の色はここのカラーコードを変更 */

          }

           

          .btn-primary {

            color: var(–btn-font-color);

            background: var(–btn-bg-color);

            border: none;

            width: 100%;

            height: 50px; /* ボタンの高さはここを変更 */

            border-radius: 30px;

            padding: 0 15px 0 15px;

            font-size: 16px; /* 文字の大きさはここを変更 */

            letter-spacing: 0.1em;

            position: relative;

            box-shadow: 0 10px 0 var(–btn-shadow-color), 0 10px 5px #0000004d;

          }

           

          .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {

            outline: none;

            background: var(–btn-bg-color);

          }

           

          .btn-primary.active, .btn-primary:active, .btn-primary:hover, .open>.btn-primary.dropdown-toggle {

            color: var(–btn-font-color);

            background: var(–btn-bg-color);

            border: none;

            top: 5px;

            box-shadow: 0 5px 0 var(–btn-shadow-color), 0 5px 5px #0000004d;

          }

          /* ▲▲ ボタン02 ここまで ▲▲ */

          送信ボタンを削除する方法

          送信ボタンの削除方法を紹介します。

          Lステップ 送信ボタンを削除した回答フォーム 

          /* ▼▼ 送信ボタンを削除するCSS ここから ▼▼ */

          .form-bottom > .form-editor > .row {

            display: none;

          }

          /* ▲▲ 送信ボタンを削除するCSS ここまで ▲▲ */

          送信ボタンを使わないケースとしては、ブログを配信するなど、友だちからの回答内容やフォーム確認を保存する必要がない時に役立ちます。

          Lステップ 構築手順公開 

          ラジオボタンを横並びにする方法

          ラジオボタンを横並びにする方法を紹介します。

          Lステップ 性別ラジオボタン

          /* ▼▼ラジオボタン横並び ここから ▼▼ */

          .form-editor > div:nth-of-type(3) > .form-group > .form-text > .col-sm-8 > span > .radios {

              margin: 0;

              display: flex;

              justify-content: space-between;

              flex-wrap: wrap;

          }

          /* ▲▲ ラジオボタン横並び ここまで ▲▲ */

           

          1行目の『type(3) 』の数字部分は、回答フォームの要素の順番の数字です。

          Lステップ 性別ラジオボタン設定画面 

          横並びにしたい要素の番号に数字を合わせてください。

          カスタムCSSを使った回答フォームの作成例

          紹介したCSSを使った回答フォームの例です。

          Lステップ 住所問い合わせフォーム 

          上記のような住所を入力してもらいたい場合、郵便番号を入力したら、自動で住所が反映される設定もできます。

           

           

          Lステップ 美容院カウンセリングシート

          Lステップ 正社員採用エントリーフォーム

          カスタムCSSを利用する際の注意点

          カスタムCSSを利用する際の注意点をご紹介します。

          テンプレートをそのままコピペする

          CSSコードをコピペする時は、一文字も間違えないようにコピーして貼り付けしましょう。

           

          以下のような文言も含めて、すべてコピペして大丈夫です。

          /* ▼▼ ヘッダー画像を普通に挿入するCSS ここから ▼▼ */

           

          少しでも余計なスペースが入っていたり、一文字でも入力間違いがあったりすると正しく反映されません。

           

          よくある間違いは以下の文字です。

          • セミコロン ;
          • カッコ { }
          • コメントアウト /*

          多くても少なくても反応しないので、正しく貼り付けることが大切です。

           

          貼り付けても何も変わらない場合は、貼り付けする文字が足りなかったり、余分な文字が入っていたりする場合があるので、一度消してから貼り直してみましょう。

          英語・数字・記号すべて必ず半角で入力する

          CSSコードでは全角は使わず、英語・数字・記号すべての文字を、必ず半角で入力しましょう。

           

          全角で入力するとうまく反映されなかったり、文字化けしたりする場合があります。

           

          スペースも半角で入力されているか確認しましょう。

          コードは下に下に貼っていく

          CSSコードを追加していく時は、下へ追加していきましょう。

           

          その時に、前のコードと2〜3行あけて貼り付けすると、コードの区別がついて見やすくなります。

          Lステップ CSSコード

          また、CSSコードのスタイルが重複している場合は、あとから貼り付けされたスタイルが優先されます。

          例えば、中見出しのコードを2種類設定していたとすると、下に貼り付けたほうが適用されます。⇒フォーム作成ツールの選び方と活用事例19選をダウンロードする

          まとめ

          今回は、Lステップの回答フォームで使えるCSSコードをご紹介しました。

           

          今ならLステップご契約者限定プレゼントで、この記事に記載されている以外のCSSコードや、1000種類以上のリッチメニュー画像がもらえます。ぜひダウンロードしてご利用ください。

           

          特典の画像は、Lステップの管理画面上部「サポート」>「使い方動画ガイド」をクリックします。

           

          右側サイドバーの以下より受け取れます。

           

           

          スポコンパソコン用

          【Lステップ】間違えやすいアクション設定の仕組みを解説

          自動化する上で欠かせないアクション設定。シンプルな機能ですが、ある仕組みを理解できていないために、誤った設定をしてしまう方も少なくありません。

           

          そこで今回は、間違えやすいアクション設定の仕組みについて解説します。

          アクション設定とは

          アクション設定とは、友だちの行動に対するLステップの反応を指定できる機能です。

           

          例えば、友だちがアンケートに回答したらリッチメニューを表示する、リッチメニューをタップしたらタグを付ける、といった具合です。

           

          アクション設定は「上から順に実行される」仕組み

          友だちのひとつの行動に対して、アクションは複数設定できます。

           

          例えばアンケートに回答してくれた友だちに、次の3つのアクションを行うよう指定できます。

          1. リッチメニューを表示する
          2. アンケートの回答に応じたタグを付ける
          3. タグによって送信するテキストを変える

          仮に不動産業のアカウントなら「賃貸を探している人」と「戸建てを探している人」で分けて、その後の対応を変える使い方が考えられます。

           

          Lステップ 物件検索 タグ賃貸のアクション設定 アクション設定をする際のポイントは、順番です。

           

          設定したアクションはすべて同時に実行されるのではなく、上から順番に実行される仕組みになっています。

           

          したがって例のように、回答に応じたタグを付けて、タグによって送信するテキストを変える場合、タグを付けるアクションが先に必要です。

           

          もしタグ付けとテキスト送信の順番が逆になっていると、テキスト送信が先に実行されてしまいます。

           

          テキスト送信実行の時点では、送信条件のタグがまだ付いていないため、テキストは送られません。テキストは送られず、タグが付くだけになってしまうわけです。

           

          Lステップ タグ賃貸とメッセージ記入欄 アクションは常に、時系列で設定すると間違いがありません。設定したアクションがうまく作動しない場合は、アクションの順番を確認してみてください。

          不明点がある方は「スポットコンサル」へ

          今回は、間違えやすいアクション設定の仕組みについて解説しました。

           

          設定方法のサポートや、使い方についてのアドバイスを希望される方は、ご契約者様限定サポートの「スポットコンサル」をご活用ください。Lステップの認定サポーターが個別にフォローいたします。

           

          スポコンパソコン用

          【Lステップ】郵便番号を入力したら自動で住所が反映されるようにする方法

          回答フォームはアンケートやカウンセリングシート、お申し込みフォームなど、さまざまな用途で利用されています。ユーザーの住所を伺う場面も多々あるでしょう。

           

          悩む人のイラスト
          • 郵便番号から住所をすべて入力してもらうのって、結構面倒だよね
          • 郵便番号を入力したら、住所が自動的に反映されると便利なんだけど

           

          このように思われている方も多いのではないでしょうか。

           

          実はLステップでは、郵便番号を入力したら自動で住所が反映される仕組みを作れます。

           

          今回は回答フォームで住所を自動入力する方法について解説しますので、ぜひ参考にしてみてください。

          郵便番号を入力したら自動で住所が反映されるようにする方法

          まず、管理画面>回答フォーム>新しい回答フォームの順に進みます。

           

          LINE回答フォーム、入力規則、郵便番号

          ①記述式(テキストボックス)を選択

          ②入力規則から「郵便番号」を選択

           

          これで郵便番号を入力する項目の準備はOKです。

           

          ※必須項目にする場合は「必須」にチェックをつけてください。また、回答を登録する場合は友だち情報欄を作り、回答の登録先から該当の「友だち情報」を選択してください。

           

          Lステップ郵便番号 記述式(テキストボックス)

          次に、住所を入力する項目を作ります。

           

          ③記述式(テキストボックス)を選択

           

          住所項目では入力規則の設定はせず、項目名だけ入力します。こちらも回答を登録する場合は友だち情報欄を作り、回答の登録先から該当の「友だち情報」を選択してください。

           

          なお、住所項目は上図のように分割してもよいですし、ひとつにまとめてもOKです。

           

          Lステップ 住所 自動入力設定

          ④画面下部にある「自動入力設定」をクリック

          ⑤「郵便番号から住所などを自動入力」にチェック

          ⑥反映させる住所項目を選択

           

          住所項目の表示の違いは、次の通りです。

           

          Lステップ 回答フォーム住所入力設定

          不明点がある方は「スポットコンサル」へ

          今回は、回答フォームで住所を自動入力する方法について解説しました。

           

          設定方法のサポートや、使い方についてのアドバイスを希望される方は、ご契約者様限定サポートの「スポットコンサル」をご活用ください。

           

          Lステップの認定サポーターが個別にフォローいたします。

          スポコンパソコン用