拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする
iOSのSafariには、 フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままという ありがた迷惑な独自仕様があります。 （ダブルタップやピンチインすると元の倍率に戻せますが、毎回なので煩わしい…） 以前、この現象を回避する方法として viewportでページを拡大できないようにして、フォーカス時に拡大しないようにする方法を紹介したのですが ピンチイン（アウト）での拡大縮小は許可したまま iPhone（iPad）でフォームにforcusしたときズームしないようにする方法もありました！ サンプル ※iPhoneでひらくと動作を確認できます 入力フォームのfont-sizeが関係していた iOS Safariの初期スタイルで、bodyの文字サイズが16pxになっているからでしょうか inputとtextareaの文字サイズが16px以上なら フォーカス時の自動拡
フォームでは、複数カラムのレイアウトを極力避けるべき | UI改善ブログ by f-tra
フォームは基本的には、縦方向の流れで項目が並びますが、時には横方向に、複数列のレイアウトを利用して項目を並べる場合があります。 本日は、そんなフォームにおける複数カラム（＝列）表示について考えてみます。 スペースの有効活用ができる2カラムレイアウト 2カラムや横方向に入力欄を配置することで、フォームで生まれがちな左右の余白を有効活用することができます。 フォームにおいて複数カラム表示や横方向の配置を行うのは、主に下記のようなパターンで用いられることが多いかと思います。 項目の意味合いから横方向に配置する場合 よく見かけるのは姓と名、住所、電話番号、生年月日などのように連続する情報を横方向に配置する方法。 基本的には縦方向の並びで、上記のように部分的に横並びを取り入れるのは、一般的な手法といっても良いでしょう。 なるべくスクロールを少なくするために用いる場合 項目の意味合いとは関係なく、横並
【保存版】スマホサイトの入力フォームで成果を出す10のテクニック | in-Pocket インポケット
（編集部にて一部加筆修正しております。最終更新：2024年6月5日） こんにちは。アイスリーデザインでスマホサイトのデザインを担当している武本です。弊社では大手ECサイトのスマホサイトのデザインを作成することがもっとも多いです。 そこで重要なのが登録・入力フォーム。 登録をしてもらうのはもちろんの事、入力してもらった情報はデータとしても非常に重要。是非とも入力してもらいたい所ですよね。僕が普段、フォームページをデザインする際に「どうしたら登録してもらえるのか」、「どうしたら入力しやすいのか」を考え、気をつけている10個のポイントを紹介したいと思います。 1. 文字はできるだけ少なくする スマホ画面に同じような言葉がたくさん詰まっているのは、そのページを見るだけでページの第一印象が「入力が面倒くさそう...」となってしまいます。ユーザーに一度そう思われてしまうと、絶対といってもいいほどに、登
【保存版】スマートフォンEFO（フォーム改善）のための15カ条 | UI改善ブログ by f-tra
スマートフォンの利用者が年々増加するなか、フォームのスマートフォン対策はもはや必須のものとなりつつあります。 このとき、ただスマートフォン向けにデザインを最適化するだけではなく、スマートフォン特有の制約や特徴をおさえたうえで改善することが大切です。 本日はスマートフォンの特徴をふまえながら、スマートフォン向けエントリーフォーム最適化（EFO）のポイントを「15カ条」にまとめてご紹介したいと思います。 スマートフォンEFO15カ条！ 本日ご紹介する「スマートフォンEFO 15カ条」は以下のとおりです！ 第1条: 表組みにするべからず 第2条: 拡大はオフにするべし 第3条: 項目は大きくするべし 第4条: 余白を充分に保たせるべし 第5条: リンクは極力配置するべからず 第6条: タップエリアとわかりやすくするべし 第7条: 項目数は極力減らすべし 第8条: 負担の少ない入力形式を使うべし
Contact Form 7 の使い方と CSS デザイン・カスタマイズ方法 - Naifix
WordPress でお問い合わせフォームを簡単に設置したいなら、プラグイン「Contact Form 7」がおすすめです。 デフォルトのデザインだと味気ないので、ブログの雰囲気に合わせてカスタマイズしてみましょう。 基本設定やスパムブロックとの連携、CSS によるデザイン変更などのカスタマイズ方法を解説していきます。 WordPress 初心者におすすめの定番プラグイン 8 選 Contact Form 7 の基本的な使い方 まずは Contact Form 7 のインストールからページ作成まで、基本的な使い方を見ていきましょう。 Contact Form 7 – WordPress プラグイン | WordPress.org 日本語 インストール・有効化 プラグイン新規追加画面で「Contact Form 7」を検索し、インストール・有効化します。 フォーム作成 プラグインを有効化する
フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察 | コリス
あなたのフォームは、ユーザーが簡単に利用できますか？ もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 フォームは入力前、入力後の分かりやすさが大切 最近のフォームで見かける問題 1つ目：ラベルとフィールドを上から順番に配置した場合 2つ目：ラベルをフィールドの内側に配置した場合 3つ目：ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
スマホの入力フォームでイラっとすること第1位は？｜モバイルラボ
スマホサイトのEFO、考えていますか？ EFO（エントリーフォーム最適化）とは、Entry Form Optimizationの略称で、Webサイトの入力フォームを利用しやすいように改善すること。フォーム最適化を行うことで、途中離脱するユーザーを最小限に抑えるための施策のことをEFOといいます。 お問い合わせや、資料請求のフォームを入力している最中にエラーが頻発したり、入力項目が多いとユーザーは途中でストレスを感じ、離脱してしまいます。 入力の手間を減らし、ユーザーがより短時間で正確に入力を完了できるように設計することがCVや売上アップのための重要なポイント。しかし、PCサイトはもちろんのこと、特にスマホサイトでストレスフルなフォームとよく遭遇します。 スマホでフォーム入力はなるべくしたくないけど… 最近個人的に、スマホで新規会員登録や、資料請求をすることが多くなってきました。 （自宅のP
スマホサイトのEFO（フォーム最適化）で爆発的成果を出すための５原則 | LPO研究所
LPO研究所所長の鎌田です。 スマホサイトを用意するのがもはや当たり前になりつつある昨今ですが、スマートフォン対応を急ぐあまり、問合せフォームのユーザビリティがないがしろになってしまっているサイトをよく見かけます。 スマホユーザーの環境は、PCユーザーに比べてあらゆる点でシビアです。いい加減なスマホ対応をしただけでは、そうそうコンバージョンのアップにはつながりません。 下記の事例をご覧ください。 これは、あるブライダル系サービスのPC向け問合せフォームをスマホ最適化したところ、スマートフォンからのコンバージョン率が３倍以上になった事例です。このように、スマホユーザー向けに問合せフォームを最適化するだけでも、コンバージョン率はしっかり上がるのです。 今回は、弊社でスマホ向けフォーム最適化を行う際にいつも心がけている「５つの原則」について、具体例を交えてご紹介します。あなたのスマホ向けフォーム
ユーザーとサービスの最初の出会いでのUIデザイン | UXデザイン会社Standardのブログ
はじめまして このブログに興味を持って頂きありがとうございます。そしてはじめまして。STANDARDでデザイナーをしている鈴木智大と申します。本日よりこのブログの執筆をさせて頂きます。私にとっては、ブログを読んで頂ける一人一人がユーザーであり、このブログ自体がサービスです。しかし、まだこのブログというサービスがどのような形でゴールを達成するかは明確には考えていません。ゴールは今後、ブログを読み続けてくれるユーザーの声を聞くと共に、私自身も発見と学習を重ねることで一緒に作ることができればと思います。 ユーザーがサービスを最初に使い始め、まず出会う画面に会員登録の画面があります。サービスの改善フェイズでは、問題がないかをまず第一に注目する部分のひとつです。改善にあたり、この登録画面がユーザーにとってのハードルとなり、予期的UXから一時的UXの間の体験にギャップが生まれていることがよくあります。
使いやすいサイトを目指して！入力フォームの使いやすさを劇的にアップさせるjs厳選4点ご紹介！【DEMO付】 | 株式会社WEB企画
使いやすいサイトを目指して！入力フォームの使いやすさを劇的にアップさせるjs厳選4点ご紹介！【DEMO付】 シェア つぶやく ブックマーク LINE Pocket 「使いやすいサイト」に必要不可欠なのがお問い合わせフォームの使いやすさじゃないかと思います。そこで今回は、お問い合わせフォームを使いやすくする為のカスタマイズを色々試してみました。 お問い合わせフォーム関連のjsは色々あるのですが、今回は導入してみて個人的に使いやすいなと思ったものを厳選して4つご紹介いたします。全てDEMO付きですので是非チェックしてみてくださいね。それではどうぞ！ 1.間違いがあったらアラートを出してくれる！：validetta.js わりと基本的な機能ですが、外せないのがこれ。入力フォームに間違いがあった場合、送信時にアラートを出してどこがどう間違ってくれるかを教えてくれます。 この「validetta.j
フォームメール2 - PHPスクリプト | サイト作りの小役立ち工房
sformmail.php 【本体】 sfm_config.php 【設定ファイル】 sformmail.css 【共通CSS】 sfm_form.html 【入力フォーム用】 sfm_confirm.html 【確認画面用】 sfm_completion.html 【送信完了画面】 sfm_mail_tmpl.php 【メール送信用テンプレート】 sfm_reply_tmpl.php 【自動返信用テンプレート】 /utf-8 【UTF-8用サンプル】 /shift_jis 【SHIFT_JIS用サンプル】 ご利用の際は、設定ファイル及び付属のHTMLファイルを参考にして下さい。 現在、自宅環境とレンタルサーバ「heteml」で動作確認しています。 PHPのバージョンや環境によっては動作しない可能性があることをご了承下さい。 ※バージョン1.xxとは各種ファイルに互換性がありませんのでご注
iPhone用サイトのフォームにはHTML5の属性を使おう - NullPointer's
ガラケーからiPhone4に乗り換えました。おサイフケータイ等のガラパゴス機能は使っていなかったのでiPhoneになって不便を感じることもなく、iPhoneの便利さだけを享受しています。東京にいる限りはソフトバンクの電波で困ることもないですしね。 ところでiPhone4のSafariはHTML5で追加されたinputの新しいtype属性値に対応しています。キーボードのレイアウトが属性にあった形に変更され、入力しやすくなります。また属性に合わない値の入力が制限されます。 https://nullpon.moe/dev/sample/form.html type="email"では @ と . のキーが追加されます。 type="url"では . と / と .com が追加されます。 type="number"では数字キーボードになります。ただし数字以外も入力可能でした。 type="tel
テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」:phpspot開発日誌
テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」 2009年03月10日- jQuery plugin: ‘autoResize’ - James Padolsey テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」 改行を入れると、textareaが自動でズイズイとアニメーションで伸張します。 「textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ 」というのがありましたがアニメーションできる＆jQueryプラグイン＆オプション指定可能という点があります。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 設置サンプル 設置のサンプルです。 設置のサンプルです。 設置のサンプルです。 以下のようなオプションが指定出来ます。 ・onResize でコールバック関数を指定 ・animate
入力必須項目、地獄の40件でも成果でた！スマホサイトEFOで大事な3点
New Account on HTC Smartphone / digitpedia 「モバイル端末での入力項目は少ないほど、突破率は上がる」 これ、モバイルサイトをディレクションする時の定石です。 モバイルサイトのサービスディレクターを１年以上携わる中で、フォームについては入力項目を減らしたり、簡便化することで、突破率を120％程度アップさせることができました。 ゆえに、自社でスマホサイトを立ち上げるときも同様に入力項目の数を減らしたいと考えていたら・・・なんと。PCサイトとの仕様の兼ね合いにより、入力項目は減らすことはできませんでした。がびーん。 どうにかできるのは、UIだけ。PCと同程度の突破率を担保するため、webディレクターとしてEFO(エントリーフォーム最適化)悪戦苦闘するはめになりました。 自社のECは、商材の都合上個人情報の入力項目が最大40箇所あって大変。しかも漢字入力も
フォーム入力に役立つjQueryプラグイン
本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとプラグインを取り上げます。今回は、Input Hint Overlay、Text input field filter、jQuery Validation、Password Strength、Simplest Twitter-like dynamic character countについて説明します。 はじめに 第2回「jQuery UIのウィジェットを使ってみよう」では、jQueryのユーザーインターフェースを拡張するjQuery UIのインストールから、jQuery UIのDialog、Datepicker、AutoComplete、ProgressBarの使い方を取り上げました。第3回では、第1回「jQuery UIのインタラクションを使ってみよう」でも簡単に触れたjQuery Pluginのフ
ケータイサイトのフォーム入力の文字種別を指定する方法
DoCoMo、au、Softbankのケータイ主要3キャリアで、フォーム入力欄に入力してもらう文字種別を指定する方法の解説です。 ケータイはPCと比較して、文字入力関連のインターフェイスが非情に不便です。 それはもちろん、携帯電話という端末の特性上、仕方が無い部分でもあるかもしれませんが、ちょっとした工夫でユーザーに与える文字入力へのストレスを軽減することが出来ます。 例えば、何かの入力フォームで、半角数字のみを入力してもらうテキスト入力欄があったとします。 そこで何の工夫も無く、 <input type="text" name="userid" value="" size="7" maxlength="6" /> みたいな感じでやっちゃうと、ユーザーがその入力欄に文字を入力しようとすると、最初に全角かなモードでテキスト入力のウィンドウが開いちゃいます。 これを、最初から半角数字モードで開
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホ入力フォームを最適化する4つの方法 | デザイン