GitHub - yubinbango/yubinbangoYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
フォーム送信後を考える：【送信完了ページ】で作る、より良いユーザー体験 | UI改善ブログ by f-tra
フォームの改善というと、成績に直結する入力完了に至るまでの画面、つまり入力ページや完了ページに対してばかり注力しがちです。 しかしそれらに加えてフォームの送信完了後のコミュニケーションにも気を配ることができれば、それがより良いユーザー体験をうみだし、満足度の向上やを引き上げ率やリピート利用率の増加などの間接的な影響を与える可能性があるのではないでしょうか。 送信完了後のコミュニケーションは大きく３種類 送信を完了したあとのコミュニケーションとしては、下記などが挙げられると思います。 送信完了ページ メール 電話など とくに「1.完了ページ」はどんなフォームにも必ずあるものですね。 また「2.メール」の有無はフォームの形にもよりますが、かなりのフォームがメールアドレスを尋ねることが多く、その場合必ずといっていいほどサンクスメールを飛ばしていると思います。 本記事から2回に渡り、これらの改善方
無料＆商用利用可能！CGI、PHPのメールフォームまとめ | まめー
Webサイトにおいて、お問い合わせフォームやアンケートフォームを作る機会は多いでしょう。 フォームは一般的に、CGIやPHPのようなプログラム言語で作られ、ゼロから作るとなるとデザイナーやコーダーのようなWeb制作者は、ちょっと苦手だったりましますよね。 そんな時に重宝するのが、素晴らしき技術者によって提供されている無料＆商用利用可能なメールフォームです。 htmlとcssの知識があれば、容易にデザインをカスタマイズしてサーバーに設置できます。 今回は、そんなサーバー設置型のメールフォームをCGI版とPHP版に分けてまとめました。 サーバーや要件によって、使えるものとそうでないものがあると思います。いろいろと試してみてください。 ※無料＆商用利用可能でも、著作権者表示が必要なものもあります。 ※自動返信、確認画面、入力必須設定、デザインカスタマイズなど、基本的な機能はどのフォームにも付いて
メールフォームプロ
無料の高機能で作り方も簡単なメールフォームプロCGIです。複数送信やアンケートフォームや応募フォームとして利用できます。文字コードUTF-8対応でレスポンシブWebデザインでスマートフォンにも対応。MTでもWordPressでも使えるショッピングカート機能付き高機能無料メールフォームCGIです。中国語や韓国語への対応やクレジット決済機能も。Googleスプレッドシートとの連携も可能。 メールフォームプロCGIの概要Perlで書かれたアンケートフォームや応募フォームとして無料で利用できるメールフォーム（エントリーフォーム）のCGI高機能版です。高機能と言うことで、DOMを駆使した確認画面と一般的なメールフォームにたぶんあまり付いていない効果計測機能が実装されております。簡単設置の概念を幾分抑え、全ての設定をCGI側に設定する必要がある点が大幅な変更点となります。 もちろんスマートフォンへも完
徹底図解 入力フォームのデザイン・UXを高める15の方法 - ポップインサイト
サインアップ画面やデータ入力画面の「フォーム」は、サイトやアプリ設計において最も重要な要素の1つです。本記事では、入力フォームデザインのUXを高める15のルールをご紹介します。 ポップインサイトでは、ユーザーリサーチのファクトにもとづいたWEBサイト改善を支援しています。WEBサイトのUX改善に課題がある方はお気軽にご相談ください。⇒UXデザイン/UXリサーチについて相談する ※紹介資料の無料ダウンロードはこちら ※関連記事：【EFOとは？】入力フォーム最適化施策8選：CVR（コンバージョン率）改善のコツ ※この記事はuxdesign.ccの記事を許可のもと翻訳・編集したものです。 翻訳元記事：Design Better Forms (2016/7/5) 著者：Andrew Coyle
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
名前とフリガナを一発入力！ちょっとした工夫でフォームを改善する方法
2014年3月18日 10:20 今回は森野が担当です。 入力フォームを改善して入力完了率を上げる！ エントリーフォーム最適化15カ条 | Web担当者Forum の【第12条】にあるように入力の手間を省いた方がユーザーの負担を減らすことができますよね。では、郵便番号以外ではどうなのかな？と思っていたところにこのフォームを発見。 ご利用規約とお客様情報の登録｜カルピス（株）オンラインショップ 姓名を入力するとカナまで自動で入力されてしまう優れものです。 こりゃすごい！というわけでグランフェアズの藤田さんに聞いてみました。 実は昔からあった 2008年くらいに一回話題になったのを覚えてますが、当時は prototype.js （ライブラリ）依存だったので使用することがなかったのですが、いつの間にか jQuery版が作られていたようですね。 という回答が。 2008年って・・・。自分の知識の少
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
HTML5 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
超簡単！たった2行だけで郵便番号から住所自動表示する方法：ajaxzip3
あなたのウェブサイトの郵便番号入力フォームは、入力しても住所が自動入力されず、お客さまにとって使いづらいフォームになってしまっていませんか？ そこで、郵便番号を入力したら住所が自動表示されるギミックを採用することが重要です！フォームのユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。事実、フォームの平均離脱率は60%を超えていると言われ、その理由の多くが「入力が多い・面倒・分かりづらい」です。 より多くの集客に力を入れることも重要ですが、入力フォームを使いやすくし、購買プロセスまで至ったお客様に対して確実にコンバージョンしてもらうことのほうが費用対効果も圧倒的に高いですよね。 そこで今回は、その離脱の原因の一つである「入力が面倒」を未然に防ぐ「たった2行で郵便番号から住所を自動入力する方法」をご紹介します！ そもそも郵便番号から住所を自動表示とは？ 郵便番号から住所を自
コンバージョン率アップ！入力フォーム最適化(EFO)14のポイント
あなたのサイトの入力フォームは、お客様にとって使いづらいフォームになっていませんか？フォームはお客様のストレスを最大限に減らし、快適で分かりやすいフォームにしなければなりません。フォームの使いやすさ、つまりユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。 そしてフォームのユーザビリティを上げるには、入力フォーム最適化(EFO)をする必要があります。フォームの最適化をすることでユーザビリティが向上し、コンバージョン率の向上に繋がります。そこで今回は、具体的にどのような入力フォーム最適化をすれば良いのか、改善例を元にご紹介します！ そもそも入力フォーム最適化(EFO)とは？ 入力フォームからのコンバージョン率が低い場合、まずはコンテンツやデザインを見直します。しかし、あなたは入力フォームを見直したことがありますか？コンテンツやデザインの見直しも重要ですが、コンバージョンに
【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題 (ユーザビリティ実践メモ)
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
フォームのラベルと入力欄を縦一列に配置するとより速く書きこめる三つのポイント
フォームのラベルと入力欄を縦一列に配置すると、横一行に比べてユーザーがより速く書きこめる三つのポイントを紹介します。 Why Users Fill Out Forms Faster With Top Aligned Labels 下記は各ポイントを意訳したものです。 visual fixation visual direction vertical space まとめ visual fixation 「visual fixation」は一点（面）をみつめる固視のことで、上記の五つ入力項目があるフォームでは、横一行：10箇所、縦一列：5箇所になります。 縦一列は一つの入力項目に対して、半分の固視ですみます。 visual direction 「visual direction」は視方向です。横一行は水平・垂直方向の二つを必要とし、縦一列は水平方向の一つのみです。 vertical space
味気ないデザインを一新！使いやすい検索ボックスを作る6つの方法
2017年6月29日 Webデザイン, ユーザビリティ ついついデザインはあとまわしになりがちな検索ボックス。少し手を加えるだけで素敵なデザインに！またユーザビリティについてもちょっとした工夫でもっと使いやすくなります。ユーザビリティ向上のためのコツとデザインの素敵な検索ボックスを紹介します！ ↑私が10年以上利用している会計ソフト！ 検索ボックスをもっと使いやすくする 1. 誰が見てもすぐ見つかる場所に ヘッダーやサイドバーの一番上など、ページを開いたときにすぐ見つかる場所に設置すると見つけやすいです。特に意図のない場合はコンテンツに混ぜたりフッターに設置するのは避けた方がよさそうです。 2. テキストボックスの背景色 デフォルトのテキストボックスの色が白のため、背景色はつけず白にしておいたほうがユーザーにとっては見つけやすいです。背景が白の場合はボーダーに線を入れたり、目立ように違う背
入力フォームでの「郵便番号」の意外な盲点 (ユーザビリティ実践メモ)
登録や申し込みページの入力フォームにおいて、郵便番号を入力すると住所欄が自動入力される機能は、ユーザの入力負荷を軽減する便利な機能です。実はこの機能、正しく郵便番号を入力してもある条件下ではエラーとなってしまうことがあることをご存知でしょうか。今回は入力フォームでの「郵便番号」の意外な盲点についてご紹介します。 ただ、「会社」で用いられている郵便番号は一般的な郵便番号と異なる場合があります。 郵便番号は、特定の企業（１日の配達量が一定量を超えるような事業所）に対して「大口事業所個別番号」という事業者向けの郵便番号を割り当てており、該当する企業はこの割り当てられた郵便番号を使用しています。 しかし、郵便番号から「住所を自動入力する機能」が参照している郵便番号は必ずしもこの「大口事業所個別番号」に対応しているわけではありません。入力された郵便番号が対応していない「大口事業所個別番号」であった場
無効なURLです
無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。
[(X)HTML] フォームのユーザビリティ・アクセシビリティについて1 | Blog | Development Reference
最近は年度末ということもありフォームを大量に制作していたが、あがってくるワイヤーやデザインを見ていると、フォームのユーザビリティ、アクセシビリティについて考えることが多かった気がする。なので、確認の意味で要点をメモする。今回は主に入力項目について記載する。 項目数はなるべく少なくする あまりに入力項目が多いと、ユーザは入力ページを見ただけでフォームから離脱してしまう ケースが多い。入力を求める項目については設計段階で十分に精査し、ひとつのページに配置する入力項目は必要最低限にするのが良い。重複する内容の入力項目が存在するのはもってのほかである。また、どうしても項目数が増えてしまう場合は、タスク毎にページを分割するなどの配慮が必要となる。操作の実行に複数のステップを踏まえる必要がある場合は、段階的にユーザーを誘導すると良い。 sample 必須項目は最小限にする 上記「項目数はなるべく少なく
都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
