UXを向上させるリアルタイム・パスワード強度チェッカー
入力されたパスワード強度を視覚的に分かるUI 概要 ユーザーが入力するパスワードの強度をリアルタイムで視覚的にフィードバックするUIコンポーネントです。 強度メーターと条件チェックリストにより、ユーザーは安全なパスワードを直感的に作成できます。セキュリティ向上とUX改善に繋がり、会員登
ナレッジサイト
ログイン
入力されたパスワード強度を視覚的に分かるUI 概要 ユーザーが入力するパスワードの強度をリアルタイムで視覚的にフィードバックするUIコンポーネントです。 強度メーターと条件チェックリストにより、ユーザーは安全なパスワードを直感的に作成できます。セキュリティ向上とUX改善に繋がり、会員登
一覧機能で「特定の日付」や「特定の値」「ログイン中のユーザー名」などが、最初から入力されていたら便利だと思ったことはありませんか？ 本記事では、一覧機能の“裏ワザ”第五弾として、一覧画面にアクセスした時点で検索項目に初期値をセットする方法をご紹介します。 反映イメージ ▶ デモサイトはこちら 上記の例で...
一覧機能では、初回アクセス時の表示件数はデフォルトで「10件」に固定されています。 しかし、ちょっとした工夫で「100件」や「1000件」など、任意の件数を最初から表示させることが可能です。 本記事では、一覧機能の“裏ワザ”第六弾として、初回アクセス時の表示件数を
本記事では、フォーム入力の進捗度を可視化するプログレスバーの実装方法を紹介します。 プログレスバーを設置するだけで、入力の現在地がひと目で分かり、離脱抑止と完了率向上に寄与します。軽量で既存フォームに簡単に組み込み可能です。 ポイント: 視覚的な進捗提示は入力ストレスの低減に有効 導入効
一覧機能の検索で、日時をカレンダーで指定できたり、チェックボックスをプルダウン形式に変えられたら便利だなと思ったことはありませんか？ 本記事では、一覧機能の“裏ワザ”第四弾として、検索項目の入力タイプを変更する方法をいくつかご紹介します。 ※本方法を適用するにはxslファイルを
SPIRALのフォームでエラーサマリーを表示するJavaScriptをご紹介します。 機能としてはエラーメッセージをカウントし内部リンクによってエラー位置に遷移するというシンプルなものですが、どこでエラーが起きたかを一目で把握でき、エラー位置までクリッ
一覧上でステータスを「未完了」から「完了」に更新することはよくあります。 ですが、「完了」にした後は「未完了」に戻せないようにしたい、と思ったことはありませんか？ 本記事では一覧機能の“裏ワザ”第三弾として、ステータスの値に応じて一覧編集モードを非活性にする方法を紹介します。 ※本方法
SPIRALからxの投稿を取得する方法。 概要 Webフォームから指定したX (旧Twitter) ユーザーIDの投稿を取得し、任意で指定したキーワードを含む投稿を絞り込んで表示するPHPツールです。 X、SPIRALとの連携を実現することで、キャンペーン等で応募者が指
データ行がないときに、一覧のヘッダーだけが表示されて「これを消したい」と思ったことはありませんか？ 本記事では一覧機能の“裏ワザ”第二弾として、データ行がないときに一覧のヘッダーを非表示にする方法を紹介します。 ※本方法を適用するには、xslファイルのソースを一部編集する必要があります。
APIを使用して一覧表からデータ更新時にメールを送信する方法をご紹介します。 概要 一覧表から一括でステータスの更新等を行うことはよくありませんか？ 単票と違って一括で更新できるので便利ですよね。 ただ、フォームを使用せず更新するためサンクスメールが使えない落とし穴があります。 即時で送る
一覧上で「完了」したものと「未完了」のもの、重要な項目などをひと目で区別したい場合があります。 本記事では一覧機能の“裏ワザ”第一弾として、値に応じて一覧項目の背景色を変える方法を紹介します。 ※背景色を変更するには、xslファイルのソースを一部編集する必要があります。編集前にはバックアップを取るこ...
フローティングラベルを使用してSPIRALのフォームの入力体験を向上させる方法をご紹介します。 フォームのデザインテンプレートも用意いたしましたので、ダウンロードして試してみてください。 フローティングラベルとは？実装するメリット まずはデモサイトを
フォームを入力するユーザーのPC、ブラウザの環境によってライトモードとダークモードを自動で切り替える方法をご紹介します。 デモサイトをご用意しました。 デモサイト フォームのデザインテンプレートも用意いたしましたので、ダウンロードして試してみてください。 ダークモー
View Transition APIを使用してSPIRALのフォームでスムーズなページ遷移をする方法をご紹介します。 View Transition APIとは View Transition APIはLPのような単一ページアプリケーションにおけ
SPIRALフォームにおけるメールアドレス入力欄にドメイン部分のサジェスト機能を追加する方法について紹介いたします。 はじめに メールアドレス入力欄にドメインのサジェスト機能を実装する方法として、以下の2種類の方法があります。 1. サジェストするドメインを全てソース内で管理