ペースト出来ないID/パスワード欄 4つに分割されてるクレジットカード番号入力欄 入力した後で記号は使えませんとか言ってくるパスワード欄 あと一つは?
白栁隆司@エンジニアカウンセラー @ShirayanagiRyuj @assialiholic すみません。 何故悪いフォームなのかが理解できないのです。 普通のフォームだな、と思ってしまいます。 お手数ですが、解説をお願いできますでしょうか? 歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic @ShirayanagiRyuj 主に ・カードのブランドは選択させる必要がない(カード番号から判別できるため) ・カード番号入力欄が4つに分かれている(おまけに4桁入力したら勝手に次に遷移するので、修正が面倒です。入力欄は1つでOK) ・有効期限に独自の並び、形式を使用している(ここでめっちゃハマりました) です! 白栁隆司@エンジニアカウンセラー @ShirayanagiRyuj @assialiholic なるほど! それは、幾つかの知識がないと「
こんにちは。転職ドラフトでWebアプリケーションエンジニアをやっている@iwtnです。 転職ドラフトでは自社開発企業に特化したエージェントサービスを始めました。 agent.job-draft.jp そこでサービスの申し込みフォームを作ったのですが、その中に生年月日の入力がありました。 生年月日ということは日付の入力。 ブラウザの実装もリッチになってきて、デフォルトでinputタグの type="date" を使うだけでカレンダーまで表示されます。素晴らしいですね! しかしこの実装の問題は多くの人が指摘しています。実際あまりよいUIとは言えません。 動作はバラバラ、特にスマホでは入力しにくい 実装はブラウザに依存します。なので統一したUIをユーザーに提供できません。 caniuse.com もちろん普段使っているブラウザで慣れていればそれがその人にとってのベストのUIにはなりえます。 しか
こんにちは、 id:hogashi です。 masawada Advent Calendar 2022 - Adventar の 2日目です。 目次 目次 OTP 入力フォーム まずベストプラクティスを見る それでは本題です ちなみに ちなみに2 むすび OTP 入力フォーム なぜか id:masawada さんとたまにワンタイムパスワード (OTP) の話をする印象があります。偶然生成された「ホホンドホド」という文字列*1が TOTP で出そうな見た目じゃん、とか。 最近もまた微妙に使いづらい入力フォームに出会いました。そこで、世に存在するベストプラクティスとそれに沿わないフォームを見て、ベストたる所以をなんとなく感じてみる回をお送りします。結果的に GitHub がなんかむずい感じになっているという記事になりましたが、もちろん各サービスそれぞれ良いと思ってやっているはずなのであくまで個
はじめに CX事業本部IoT事業部の佐藤智樹です。 今回はAWSイベントの申し込みフォームを1passwordで自動化してみます。AWSセミナーは新しいイベントがあるたびにフォームの入力が必要です。所属会社/組織が変わらない限り、変更のない項目もあるため今回はこちらの自動化を実践します。 入力補完の内容 対象となるWebサイトのURLは以下で設定しています。 登録するwebサイトのURL 1passwordに登録する項目を一覧で記載していきます。本来であれば1passwordのexport機能を利用して共有したかったのですが、export機能で抽出されている内容が何なのか公開されていないため、今回は全て表に記載します。以下の表の値を1passwordの「ラベル」と「新規フィールド」に設定してください。また、このidを使えば1password以外でも入力を補完できるはずです。これがおそらく最
酒類の小売業を手掛けるカクヤスは11月1日、ECサイト「カクヤスネットショッピング」について、クレジットカード情報8094件が漏えいした可能性があると発表した。原因は採用していた入力フォーム最適化「フォームアシスト」の脆弱性。不正アクセスにより、同ツールのソースコードが不正に改ざんされたという。 7月19日から29日にかけてECサイトにカード情報を入力した人のクレジットカード番号、有効期限、セキュリティコードが漏えいした可能性がある。不正アクセスは7月28日に発生。カクヤスは29日にツール提供元のショーケース(東京都港区)から報告を受け、フォームアシストの利用を停止した。 10月24日には漏えいした可能性のある件数を特定。ECサイト本体のシステムからの漏えいがなかったことなどを確認できたことから発表に至った。すでに詳細は個人情報保護委員会や所轄警察署に報告済み。カクヤスは対策として、ECサ
作りました。簡単に説明を書いておきます。 github.com モチベーション クレジットカードの入力フォームは、ちゃんと作ろうとすると意外とめんどくさいものです。 すでにGitHubには先人がいくつかのライブラリを公開していますが、下記を満たせるものがなかったので自分で作ることにしました。 カードブランドごとのカード番号フォーマットに対応している サポートするカードブランドを設定できる 有効期限の年月の単一フォームに対応している バリデーションのエラーが細かい CustomViewではなくロジックを提供している テストコードがある 以下は補足説明です。使い方はリポジトリの方を見てください。 カードブランドごとのフォーマットとバリデーションに対応 カード番号のフォーマットは4桁 * 4 = 16桁が多いですが、実はカードブランドごとに異なります。 Brand PAN format Secu
入力フォームがあって、Enterを押して入力したテキストをリストに追加したいとしましょう。↓こちらでお試しできます。 ここに追加されるよ こういう感じで実装できます。簡単ですね。 (() => { const list = document.querySelector("#list_1"); const input = document.querySelector("#input_1"); input.addEventListener("keydown", (e) => { if (e.key !== "Enter") { return; } e.preventDefault(); const text = e.target.value; const li = document.createElement("li"); li.textContent = text; list.appendC
お問い合わせや資料請求、サインアップからデータの登録まで...フォームのUI設計は、ビジネスの成果を上げるために最も重要な要素の一つであるといえます。 本記事では、入力フォームのUIデザインにおける基本とUXを改善するために必要な20のUI設計ルールについて、ご紹介していきたいと思います。
入力フォームを作る上で注意したい12のポイント 1. 可能な限り項目数を減らす 良い例:PayPay(アプリ) – 初回入力に必要な情報がかなり絞られています。 新規登録や申し込みの段階で必ずしも必要でない項目や、わざわざユーザーが入力する必要のない項目は削除しましょう。登録後に別途取得するなどの工夫ができるかもしれません。特に「任意」となる項目はこれに該当する可能性があります。 2. 関連のあるラベルと入力欄はグループ化する 良い例:出前館(サイト) – ラベルは入力欄のすぐ左上に、氏名や住所など関連のある項目は間隔を狭くしてグループに見えるようにしています。 ラベルと入力欄は等間隔に並べず、入力欄のすぐ近くにラベルを設置したり、視覚的にグループであることが分かるようにしましょう。対応する入力欄の特定が困難だと、ユーザーは入力に通常よりも時間を要し、離脱に繋がってしまうこともあります。
本日は真面目な方には縁のないブログです みなさん・・・ぶっちゃけ、ブログっていつ、どこで書いてますか? 「そんなん、家のパソコンからに決まってるじゃん!!」 はい!! そんなあなたには今日のブログは無縁・不要となっております・・・。 実はわたくしtuyokiはですね・・・。 仕事中にパソコンをシークレットモードにしてこっそりブログをしたためております・・・(すみませんすみませんすみませんすみません)。 『シークレットモードだから、職場の上司にバレない、バレない♪』 なんて思って毎日はてなブログにログインしてました。 するとある日から大問題が発生したんですよ!! そう!! 自動入力フォームに、はてなのID(私の場合「tuyoki」)が勝手に候補として入力されちゃう問題!! 自動入力フォームって、ネットとか利用してると、会員番号だとか、パスワードだとか、入力しなくてもフォーム入力画面をクリック
こんにちは、LIGのゴウです。 突然ですが、すごくイラっとする入力フォームってありますよね。そういうのに出会ったときってめっちゃイライラしませんか? 俺はします。 LIGでもお問い合わせフォームをずっと作ってきていますが、使い勝手の良いフォームというのはなかなかノウハウが必要で、非常に奥深いです。 今回はそんな「入力フォーム」に焦点を当てて、逆説的にめちゃくちゃ使いにくいフォームを作ってみようと思っています。そうすることで、なぜそれが使いにくいのか、が見えてくることでしょう。 今回協力していただくのは、5,000フォーム以上のWebサイト改善をしてきた株式会社ショーケースの上級ウェブ解析士である、樫木厚二さん。 普段は、企業の入力フォームの最適化を支援している方なのですが、今回は逆に「めちゃくちゃ使いにくいフォーム」をつくるために頑張っていただきました。なんかすいません。 上級ウェブ解析士
ウェブアプリケーションの使い勝手を向上させる上で、入力フォームの操作がスムーズかどうかは、非常に重要なポイントです。 スムーズに入力できないフォームは、ユーザーにたくさんのストレスを与える可能性があります。その中でも、特にストレスとなりやすいのが入力エラーです。 「入力を終えて登録ボタンを押した直後、エラーメッセージが表示されてイライラした」こんな経験は、誰しもあるでしょう。見方を変えれば、入力エラーを制すれば入力フォームの使い勝手を制することができる、といっても過言ではありません。 そもそも、エラーはユーザーに起こさせない仕組みであるのが理想です。つまり、エラーが発生しないUIに工夫したり、エラーを自動的に修正する機能を実装したり、といったことです。 しかし、UIの工夫だけでエラーを完全に回避することは難しいですし、自動化するにも現在のウェブの技術ではまだまだ限界があります。エラーが発生
リンク Wikipedia 寿限無 『寿限無』(じゅげむ)は、落語の代表的な前座噺。長い名前を言い立てる早口言葉で知られる。上方落語では古くは別題を『長名の伜(ながなのせがれ)』という。『長い名の子』タイプの民話と落語『寿限無』は類話である。 生まれた子供がいつまでも元気で長生きできるようにと考えて、とにかく「長い」ものが良いととんでもない名前を付けた、という笑い話。縁起のいい言葉を幾つか紹介され、どれにするか迷った末に全部付けてしまった、という筋の場合もある。 生まれた子供にめでたい名前を付けようとして、お寺の和尚さん(人物が異なる場合も 48 users 195 リンク Wikipedia パブロ・ピカソ パブロ・ルイス・ピカソ(Pablo Ruiz Picasso, 1881年10月25日 - 1973年4月8日)は、スペイン・マラガ生まれの、フランスで制作活動をおこなった画家である
「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか? HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟に対応することが求められます。 だがしかし!この日付入力フォームのカスタマイズはなかなか曲者でして、苦戦している方も少なくないでしょう。 Chromeではうまく表示されても、IEでうまくいなかったり、ちょっと見た目をいじったら動かなくなってしまったり。 今回はそんな悩める日付入力難民の皆様のために、日付入力フォームをどんな端末から見ても同じ見た目・動きになるようカスタマイズする方法について書きました。少しでもお役に立てればなによりでございます。 ※結論から言うと「日付入力フォームのカスタマイズなら、プラグイン(datepicke
2020/01/23 (更新日: 2020/06/04) 【excel】vba初心者向け『入力フォーム』の作り方”オブジェクト作成編” ExcelVBA こんにちは、Fujiya(@fujiya_xyz)です。 今回は、エクセルの「VBAプログラミングをやってみたい人向け」に、実用的な自動化ツールの作り方を説明しています。 別の記事でも書きましたが、VBAを習得する上でメチャクチャ大事なのは自分で作ってみること。 実は僕も1番最初に作ったのは入力自動化ツールで、入門用の練習プログラムとしては最適だと考えています。 僕はエンジニアやプログラマーではないのでプロのセオリーからは外れていますが、初めての人にもわかりやすく作っており、複雑なコードは使用しません。そして、出来るだけ専門用語は使わずに、説明を入れつつツールを作っていきます。 今回はユーザーーフォームの”見た目”を作ることに特化した内容
EFO(入力フォーム最適化)とは EFO(Entry Form Optimisation)とは、入力フォーム最適化のこと。Webサイトの入力フォームは、問い合わせや資料請求、会員登録、無料トライアルなどさまざまな目的で設置されています。入力フォームをユーザーが使いやすくなるように改善する施策のことをEFOと呼びます。 BtoBマーケティングにおけるEFOの重要性EFOは、コンバージョン直前の離脱を防ぐ施策なので、短期間で成果が上がりやすい改善策の1つです。 一般的に、BtoBでは入力フォームの通過率は25〜30%が最適化の目安です。裏を返せば、75%以上のユーザーは申し込むつもりで入力フォームを閲覧したものの、離脱してしまうわけです。目の前の魚を逃しているようで、もったいないですね。 ※入力フォームの通過率:フォーム経由のコンバージョン数をフォーム到達セッション数(訪問者数)で割った数値の
概要 入力する項目が多い入力フォームは離脱率を考えると、1ページにまとめるよりも複数ページに分割したほうが良いとされています。 ではReactで、以下のように複数ページに分割し、進捗を表示するフォームを作成するにはどうすれば良いでしょうか。 設計 自分なりに考えた結果、以下のような設計になりました。 render hooksパターンを使用 今回の要件では、親コンポーネントでフォームのページ数を管理し、小コンポーネント側でフォームの状態を保持させる必要があります。 フォームのページ数が必然的に複数ページに分かれてしまうため、通常であればuseContextやRedux,Recoilなどのグローバルで状態を管理できるライブラリを使ってフォームの状態を保持させることになります。 そこで思いついたのが、hook自体がコンポーネントを返却するrender hooksパターン。 複数のページコンポーネ
こんにちは、ちょっと株式会社の久保田です。 Webサイトを開発する工程の中に、お問い合わせやエントリーなどを受け付ける「入力フォーム」を設置することがあります。 一見するとテンプレ的に単純作業に思われがちですが、デザイナーが考えるポイントは意外と多く、必要に応じて時間を掛けて作り込むものだったりします。 そんな入力フォームを作る際に意識しておきたいポイントを、自身への教訓も込めてまとめてみました。 視点の移動とグループを意識したレイアウトスムーズに視点移動させる並べ方まずは大枠のレイアウト。ザッとテーブルのように組んでしまいがち。 サクッと5分くらいで組んじゃうラフレイアウトこれでも大きな問題ありませんが、少し踏みとどまって考えてみます。 改善したいのはラベル(項目名)と入力欄の位置関係。 表組のように横並びの関係にするのではなくて縦並びの関係にしてみます。 ラベルと入力欄が横並びになって
2020/01/24 (更新日: 2020/06/04) 【エクセル】vba初心者向け『入力フォーム』の作り方”コード記述編” ExcelVBA こんにちは、Fujiya(@fujiya_xyz)です。 この記事では”デジタルDIY”ということで、エクセルの「VBAプログラミングをやってみたい人向け」に、実用的な自動化ツールの作り方を説明しています。 そして、今回は前回作業『オブジェクト作成編』の続きとなっています。 オブジェクト編で作った入力フォームですが、現状は全く作動しない状態です。 プログラムコードを記述することで、自分の思った通りの動作させます。 「プログラミング」というと、文字がたくさん並んでいるイメージの人が多いと思いますが、この文字は「命令文」です。 例えば、ボタンを押したらA1のセルに「あ」と入力する。 この動作を行うようにコードを使って命令をしていきます。 今回作成する
メールアドレス入力欄でiPhone/Androidのキーボードがemail状態にならずに@とか.の入力にイラッとするパスワード入力欄が英数字限定・文字数が8文字限定とかになっててChromeとかの自動パスワードが使えない独自のパスワード入力フォームになってて表示させながら入力ができない郵便番号入れるのに住所が補完されない 住所の番地等が全角数字限定でスマホからどうやって入力して良いかわからない 読み仮名入力が半角カナ限定でスマホからどうやって入力して良いかわからない 住所の入力欄にやたら短い文字数制限がかかっていてマンション名が長くて入らないチェックボックスが「メールを希望しない」にチェックになってて否定の否定は理解できないことを理解してないクレカ入力欄が4つに分割されてて自動入力したら最初のところに全部入力される 「送信」を押さないと未入力とか異常値入力を教えてくれないし元の画面に戻ると
サービス開始時のユーザー登録フロー、クチコミやレビューといったユーザー投稿などユーザーに何か情報入力してもらう際、入力してもらう項目が増え、画面が長くなってしまうことがあります。そんな場合、長くなっても分割せずに1画面にする(図1a)のか、それとも画面を分割して複数画面にする(図1b)のか、その構成がユーザー体験に大きく影響してしまう場合があります。どちらにするべきか悩んだ経験がある方が多いのではないでしょうか。 図1 同じ項目で、分割せず1画面にした場合(a)と、分割して複数画面にした場合(b)の違い 今回はどういったときに分割するか/しないかの考え方の事例をもとに、私の判断軸を紹介します。この記事を読んだあと、みなさんの迷いが少しでも解消しやすくなり、ユーザーにとってスムーズな設計ができるようになればと思っています。 分割するかしないかの基準 分割する/しないどちらが良いかは一概には言
コンバージョン改善を目的として、入力フォームの最適化を図るEFO(Entry Form Optimization)ツールが注目されている。「デジタルマーケターズサミット 2021 Summer」に登壇したシェアNo.1*1のEFOツールを提供するショーケースの上級ウェブ解析士*2、樫木厚二氏は、そのトレンドや考え方、分析・改善の勘所などについて、EFOツール「フォームアシスト」のコンサルタントとしての経験や事例を踏まえつつ解説した。 *1 出典:ITR「ITR Market View:メール/Webマーケティング市場2021」 *2 WACA認定 上級ウェブ解析士資格 入力フォームを最適化する「EFOツール」でコンバージョン率を向上させるWeb施策における集客からコンバージョンまでの経路を考えたとき、入力フォームはコンバージョンの直前に位置する。つまり、申し込み意欲が高いユーザーが集まるペ
こんにちは、Microsoft MVP(Azure / Business Applications)の松本典子です。 前回第22回の記事では、グラフィカルに情報を表示することが可能な「アダプティブ カード」の作り方と、Power Automateから送信するアクションについてご紹介しました。 今回は、Power Automateのトリガーとしてアダプティブ カードを利用する方法をご紹介します。 1. ワークフローの全体図 今回はMicrosoft Teamsコネクタのトリガーを利用して、Teams上で入力フォーム形式のアダプティブ カードを表示し、そこに入力されたデータをメール送信するというシンプルなワークフローを作成します。 なお後述するとおり、TeamsからPower Automateのトリガーを実行するために、Teamsに「Workflows」アプリを追加する必要があります。また前回
入力フォームには1つのページで完了するシンプルなものから複数のページを介して完了するものまでいろいろな形があります。本文書ではvue.jsを使ってマルチステップフォームを作成するための手順を説明しています。 各ステップにバリデーションが入っていないため実用的ではありませんが、マルチステップフォームを作る上での基本的は考え方とコンポーネントの理解を深めることができます。 作成するマルチステップフォームの概要 作成するフォームは4つのステップに別れ、1つのステップに1つのコンポーネントが対応します。最後のステップは確認画面のため入力フォームがあるのは3つのステップです。 1つ目のステップの入力フォームでは名前(firstName, lastName)を入力、2つ目のステップの入力フォームではEmail、電話番号を入力、3つ目は誕生日を入力するシンプルなものです。4つ目は確認画面なので1〜3で入
投稿日:2021年9月13日 先日のブログ で紹介した、郵便番号から都道府県と住所を自動入力するjQuery ajaxzip3 と、ふりがなを自動入力するautoKana をContact Form 7 で作成したフォームに実装したいと思います。 ▲Contact Form 7 インストールして有効化します。 ▲有効化するとメニューにお問い合わせが表示されるので、新規追加を選択します。 ▲タイトル名を任意につけ、ショートコードを利用してフォームの項目を作ります。 青地箇所のショートコードを固定ページにペーストし、表示設定でホームページとして設定します。 今回はコーディングも含め下記のような記述にしました。 <span style="color:red">※</span>は必須 <label> 氏名<span style="color:red">※</span> [text* your
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く