まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
Yahoo! JAPAN は日本にて検索やニュースといったメディアサービス、e コマース、メールサービスなど、100を超えるサービスを提供している企業です。これらのサービスで利用するためのユーザーアカウントも長年提供し続け、月間のログインユーザーは 5,000 万を超える規模となっています。しかし、このユーザーアカウントを提供する中で、ユーザーアカウントに対しての攻撃を継続的に受けており、また、アカウントを継続利用する上での課題についてユーザーから問い合わせも多く頂いていました。これらの課題の多くはパスワードという認証手段に依存するものでした。また、当時、技術的にもパスワード以外の認証手段を提供するための機能やデバイスの普及が始まりつつありました。こういった背景のもと、Yahoo! JAPAN はパスワードによる認証からパスワードレスな認証へ移行すると判断しました。 なぜパスワードレスか
こんにちは。転職ドラフトでWebアプリケーションエンジニアをやっている@iwtnです。 転職ドラフトでは自社開発企業に特化したエージェントサービスを始めました。 agent.job-draft.jp そこでサービスの申し込みフォームを作ったのですが、その中に生年月日の入力がありました。 生年月日ということは日付の入力。 ブラウザの実装もリッチになってきて、デフォルトでinputタグの type="date" を使うだけでカレンダーまで表示されます。素晴らしいですね！ しかしこの実装の問題は多くの人が指摘しています。実際あまりよいUIとは言えません。 動作はバラバラ、特にスマホでは入力しにくい 実装はブラウザに依存します。なので統一したUIをユーザーに提供できません。 caniuse.com もちろん普段使っているブラウザで慣れていればそれがその人にとってのベストのUIにはなりえます。 しか
はじめに こんにちは。株式会社Flatt Securityの @toyojuni です。自分はもともとWebやUIのデザインを本職としていましたが、大学の同期と共同創業したセキュリティ企業であるFlatt Securityにて経営やDevRelを担っています。 デザインとセキュリティは普段話題が交わることが少ない領域ですが、UI/UXのデザインであればソフトウェア開発と不可分であることは間違いなく、すなわちデザインもセキュリティに無自覚ではいられないでしょう。 そのような観点で、本記事では「パスキー(Passkey)」を取り上げてみようと思います。 本記事は「パスキー」「FIDO」「WebAuthn」といったキーワードに関して以下のような認識を持っている方向けの記事です。 名前も知らない / 聞いたことがない 聞いたことはあるが、ほとんど理解していない はじめに パスキーをなぜ今知るべきか
import { ChangeEvent, FormEvent } from "react"; export default function Form() { const showError = (message: string) => (e: FormEvent<HTMLInputElement>) => { if (e.currentTarget.validity.valueMissing) { e.currentTarget.setCustomValidity(message); } else if ( e.currentTarget.validity.patternMismatch && e.currentTarget.name === "postcode" ) { e.currentTarget.setCustomValidity("郵便番号正しく入力してね"); } else
HTML: ログイン・ユーザー登録フォームの厳選ベストプラクティス11（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/05/24 原著者: Andrey Sitnik（PostCSSとAutoprefixerの作者、首席フロントエンドエンジニア） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ログインフォームやユーザー登録（サインアップ）フォームは、ほとんどのWebサイトで使
今度は「WebOTP」についてFrontend Weekly LT（社内勉強会）でお話しました - BASEプロダクトチームブログ
はじめましての人ははじめまして、こんにちは！フロントエンドエンジニアのがっちゃん（ @gatchan0807 ）です。 今回は社内勉強会 Frontend Weekly LT にて、WebOTP / OTPの概要と使い方について発表をしたので、その内容を皆さまにも共有できればと思って記事にしました。 （以前、同じように社内勉強会での発表内容が記事化された 「Frontend Weekly LT（社内勉強会）で「Vite」について LT しました」の記事もぜひどうぞ） 元々、BASEのどこかに使えないかなぁと思って個人的に調べていた内容を社内共有用にまとめたものなので一部 web.dev の記事をなぞっただけの部分もあるのですが、その内容と共にBASEでのOTPの使い方やWebOTPの利用状況についてのシェアしていければと思います。 イントロ Chrome 93から新機能が追加され、Andr
プロダクトエンジニアリング部の千葉です。 LIFULL HOME'S不動産査定とホームズマンション売却の開発に携わっています。 この記事では、売却査定サービスにおけるアクセシビリティ対応の取り組みについて紹介していきます。 マンション査定シミュレーション input要素 コンボボックス 所在地選択ダイアログ キーボードフォーカス リストボックス 最後に マンション査定シミュレーション マンション査定シミュレーションは、インターネット上でマンションの価格を調べることができる簡易査定の機能です。 売却計画を立てる際や、不動産一括査定サービス利用時の参考として使用することができます。 LIFULL HOME'Sのマンション査定シミュレーションではマンション名、所在階、専有面積、間取りを入力すると参考価格を算出することができます。 まずは、ここの入力欄要素での取り組みについて紹介します。 inpu
お問い合わせフォームの入力を完遂し、送信してもらうために改善しておきたい16のポイントを紹介します。サイトリニューアルの要望でよくある「お問い合わせ数を増やしたい」に応えるために最低限おさえておきたい情報をまとめました。ぜひ参考にしてみてください。 問い合わせ時に必要な項目のみに限定する 「この項目は本当に必要か？」いつも疑うようにしています。お問い合わせ時に必要な情報なのか？その後の打ち合わせで電話番号や住所など聞くことはできないのか？不要な項目を削除し、本当に必要な情報のみに限定することでユーザーも入力しやすくなります。 郵送で資料を送る資料請求フォームは住所は必要です。しかし、質問などメールだけでのやりとりのためのお問い合わせフォームであれば住所の情報は不要なので削除します。クライアントと相談しながら常に減らす意識は持つようにし、ユーザーの手間を省くようにします。 入力欄の数は最低限
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その1）、（その2）の続きです。 おさらい 対象ページ：「アトリエ金工やまぐち」 Basic認証があるので、アクセシビリティ向上日誌１【各種ツール評価編】からたどってください @HeldaForStudy氏に了承を得てアクセシビリティチェックを行っています チェック基準：WCAG 2.1レベルA 文中のSCはSuccess Criteriaの略で達成基準のこと 目的はどうやってアクセシビリティチェックしているのか、チェックしながら何を考えているのかを書き記すことです 制作ページやチェック内容にネガティブなことをいいたいわけではありません チェックに抜け漏れ、誤りがあるかもしれません 仕様等は基本的に日本語訳を当たります では続きに入っていきましょう。 「ABOUT」セクション アクセシビリティチェックの経験がある
web制作の基本中の基本、フォーム作成に付いてのお話です。 TL;DR web制作において殆どの場合避けて通ることができないフォーム作成ですが、今日平然と運用されてるwebサイトの多くがフォームの基本中の基本であるtype属性を適切に設定していない場合があります。 本記事はtype属性を適切に設定することの意義、適切に設定しないことの罪について話していきます。 type属性とは？ type属性とは、その名の通りinputに設定される型であり、デフォルトではtextで定義されます。 ブラウザはこのtype属性を読み取って、フォームの見た目を変化させたり、valueの型を設定したりといった挙動をします。 MDN Docs type属性を設定しない罪 type属性はデフォルトでtextになるという話をしましたが、ではemailやpasswordあるいはurlといった文字列で表される情報を入力する
Vue.jsでサジェスト入力を行う4つの方法
今回は、Vue.jsでサジェスト入力を行う方法を4つ（内1つは自作コンポーネント）紹介します。 サジェスト入力とは、入力途中に候補となるものを予測し、入力項目の下に候補として表示する機能です。Googleの検索窓で何か文字を入力すると、下に候補でてくるあれです。 スポンサーリンク 方法1 HTML5のautocomplete属性を使う HTML5で追加されたautocomplete属性を使うと、Vue.jsでも簡単にサジェスト入力が実現できます。 <input>要素のautocomplete属性は、<input>要素に文字を入力すると、その文字を含む候補を提示して、内容を自動補完することができます。 入力候補のデータのリストをは、 同じくHTML5で追加された<datalist>を使用します。<datalist>は、 フォームの入力欄などで入力候補となるデータリストを定義します。 以下サン
こんにちは。株式会社エニグモにてフロントエンドエンジニアを務めています新井です。 こちらは Enigmo Advent Calendar 2023 および アクセシビリティ Advent Calendar 2023 の 14 日目の記事です。 はじめに：ウェブアクセシビリティとは？ 1. ページ内の見出しの最適化 2. リンクや状態の判別を色の変化だけで行わないようにする 3. キーボード操作時のフォーカスインジケーターは非表示にしない 4. クリッカブルな要素の実装には a タグまたは button タグを使用する 5. 画像の代替テキストの指定と装飾的な画像の取り扱い 6. フォームコントロールには必ずラベルを付与する 7. フォームの入力欄のオートコンプリートを有効にする 8. ラジオボタンやチェックボックスを装飾する際は元の input の隠し方に気をつける 9. アコーディオン
みなさん、二要素認証は実装していますか？ WWDC21にて発表があったとおり、iOS15, iPadOS15, Safari15でのiCloudキーチェーンがTOTPにも対応しました。 従来であれば、Google AuthenticatorやMicrosoft AuthenticatorなどTOTPに対応した別アプリを使用する必要がありましたが、OS自体に組み込まれることでApple製品上ではよりシームレスな認証体験ができるようになります。 すでにTOTPに対応しているサービスでは特別な対応をすることなく、ユーザーはiCloudキーチェーンのTOTPを使用できます。 ですが、ちょっとしたポイントに気をつけるだけで、ユーザーはより便利に使いやすくなります。 本記事では、iCloudキーチェーンを使用するユーザーがより快適に二要素認証を使用する上で、実装上気をつけるべきポイントについてご紹介し
【TextAlive App API】HTML＋CSS+JavaScriptのみで実装するチュートリアル【マジカルミライ2020プロコン】 - Qiita
【TextAlive App API】HTML＋CSS+JavaScriptのみで実装するチュートリアル【マジカルミライ2020プロコン】JavaScriptTextAliveAppAPI はじめに 2020/09/18、初音ミク「マジカルミライ 2020」プログラミング・コンテストの開催が発表され、同時に「TextAlive App API」が一般公開された。未だ人気を誇るコンテンツ「初音ミク」を用いたプロコン（プログラミングコンテスト）ということで、熱意に満ちた同志は多いことだろう。 しかし、一般公開されたばかりのAPIということで公式の文献以外の情報が無いに等しい。しかもサンプルコードもビルドツール仕様がほぼほぼ前提であり、ビルドツールなども何も使わない（つまり、HTML・CSS・JavaScriptベタ書き）&&ローカル環境となると厳しいものばかり。諦めたくなった人も多いのではなか
【ZOZOTOWN UI/UX改善PJ】「改善を自分達で考えて実装・リリースするPJ」の作り方 - ZOZO TECH BLOG
こんにちは、ZOZOTOWN部フロントエンドチームの高橋（@anaheim0894）です。 2020年5月からZOZOTOWN部では、「UI/UX改善プロジェクト」を立ち上げ、小さなUI改善を進めるチームを発足しました。 そこでこのプロジェクトの紹介をしながら、その工夫したポイントをお伝えします。新しいプロジェクトを立ち上げる際の参考になれば幸いです。 なぜプロジェクトを立ち上げたか 現在のZOZOTOWNのWebサイトには大きく以下の2つの問題点が存在していました。 いろいろな機能、仕様、デザイン、宣伝などが盛り込まれ、見づらくなる 大規模案件や新機能に時間を取られ、サイト細部のアップデートが滞ることによりUXが低下する 直近のZOZOTOWN開発チームは、ZOZOSUITやZOZOMATのような大規模案件を中心に開発へ取り組んできました。 これまでも「改善を自分達で考えて実装する」をチ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
Yahoo! JAPAN はパスワードレス認証で問い合わせを 25% 削減、ログイン時間も 2.6 倍速に
最速の生年月日入力フォームを求めて - LIVESENSE ENGINEER BLOG
デザイナー/PdMが今知っておきたいパスキーの基礎知識 - #FlattSecurityMagazine
ほぼJSなしで完璧なReactフォームをつくる
売却査定サービスにおけるアクセシビリティ対応の取り組み - LIFULL Creators Blog
お問い合わせフォーム最適化。改善しておきたい16の項目 | BUILD Journal
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その3） - 水底の血
フォームを作るならtype属性くらい適切に設定してくれ
自社サービスで必ず達成しておきたいウェブアクセシビリティ対応についてまとめました - エニグモ開発者ブログ
iCloudキーチェーンのTOTPを使いやすくするちょっとした気遣い | 株式会社ヌーラボ(Nulab inc.)