【保存版】スマホサイトの入力フォームで成果を出す10のテクニック | in-Pocket インポケット
（編集部にて一部加筆修正しております。最終更新：2024年6月5日） こんにちは。アイスリーデザインでスマホサイトのデザインを担当している武本です。弊社では大手ECサイトのスマホサイトのデザインを作成することがもっとも多いです。 そこで重要なのが登録・入力フォーム。 登録をしてもらうのはもちろんの事、入力してもらった情報はデータとしても非常に重要。是非とも入力してもらいたい所ですよね。僕が普段、フォームページをデザインする際に「どうしたら登録してもらえるのか」、「どうしたら入力しやすいのか」を考え、気をつけている10個のポイントを紹介したいと思います。 1. 文字はできるだけ少なくする スマホ画面に同じような言葉がたくさん詰まっているのは、そのページを見るだけでページの第一印象が「入力が面倒くさそう...」となってしまいます。ユーザーに一度そう思われてしまうと、絶対といってもいいほどに、登
スマホ対応の入力フォームのデザインに役立つ7つのポイント
パソコン、スマートフォン、タブレット。10年前と比べ、私たちは画面サイズの異なる多くの端末に囲まれて生活するようになりました。そして2016年以降、スマートフォンの普及率はパソコンに接近しており、自社のキャンペーン運用時にもスマートフォンユーザーを意識しなければならなくなった企業の数も増えているのではないでしょうか。 そこで今回は、スマートフォン対応の入力フォームデザインを行う際に知っておきたい6つのポイントをまとめてみました。皆さんはいくつご存知でしょうか。 レスポンシブ・デザインを採用する 最も理想的でシンプルな解決方法は、レスポンシブ・デザインを採用することです。レスポンシブ・デザインとは、画面の幅に応じてページレイアウトが自動的に変わる技術です。この技術を採用すれば、ひとつのページで様々な大きさのディスプレイに最適なレイアウトをそれぞれ表示させることができます。 Googleは「検
コピペでできる！cssとhtmlのみでフォームのチェックボックスをわかりやすくするデザイン9選 - copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
<div class="cp_ipcheck"> <div class="box"> <input type="checkbox" id="a_ch1" checked /> <label for="a_ch1">ネコ</label> <input type="checkbox" id="a_ch2" /> <label for="a_ch2">イヌ</label> <input type="checkbox" id="a_ch3" /> <label for="a_ch3">ウサギ</label> </div> </div> .cp_ipcheck { -webkit-box-sizing: border-box; box-sizing: border-box; } .cp_ipcheck:before, .cp_ipcheck:after { -webkit-box-sizing: i
jquery.validate.jsでチェックボックスを必須化して、最低ひとつはチェックしないとエラーがでるようにする : 森のコーディング
11月18 jquery.validate.jsでチェックボックスを必須化して、最低ひとつはチェックしないとエラーがでるようにする カテゴリ:jQueryjavascript Tweet フォームを作ってると必ず出てくるのが「必須」ってやつ。 必須項目を入力しなかったらエラーになるってやつね。 そこで便利なのが、jquery.validate.jsだ。 落としてくるにはこちら 使い方はいろいろ検索して探してもらうとして、問題はチェックボックス。 チェックボックスを複数並べて、「少なくとも1つはチェックをいれてね」っていうパターンのアンケート式のフォームを作りたいことはよくあると思う。 其の用途では、jquery.validate.jsでは直感的に、そのままでは使えないので、そのやり方を書くよ。 ①チェックボックスのnameは配列にするんだよ チェックボックスが複数並ぶ場合、nameの中身を
» inputボタン(submit)をCSS又は背景で変える時のコードまとめ。｜今プラスブログ
フォームを作るときに必ず必要になってくるのがsubmitボタン。 最後に送信と確認とかになるあれです、あれ。 何もいじらずのデフォルトがこちら。 しかしこれだと味気ないですよね。そんな時に変える方法としてはCSS使うか、HTMLのタグ自体を変える方法があります。 備忘録としてもinputボタンを変えるときはどんな方法があるかを振り返ってみました。 CSSで変える場合 まずは一番簡単なCSSで変える場合。submitに対してCSSを適用させられればデフォルトボタンが簡単に違うデザインにすることができます。 イメージ例： HTML側 CSS側 .sbt_1{ width:100%; height:40px; background-color:#e83f22; border:none; color:#fff; font-size:13px; font-weight:700; text-align
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
ブログの「カテゴリ」と「タグ」の違いとは？ | ワードプレステーマTCD
ブログの記事を分類するのに、カテゴリーとタグという概念が存在しますが、本ページではその違いについて説明します。 カテゴリーとは？ 記事を「ジャンル」ごとに分類する為にカテゴリーが存在します。例えば、野球のニュースサイトでしたら、「巨人」「阪神」「中日」というふうにチーム毎に分類すると、巨人ファンは巨人のカテゴリーを、阪神ファンは阪神カテゴリーをという感じで、好きなページだけ閲覧するに便利になりますよね。 カテゴリーはサイトの構造を形作るものでもあるのです。 タグとは？ タグは、記事の中で使われている「キーワード」を設定しておく為のものです。例えば、選手の名前をタグに登録したり、歴史に残る試合の名前など、カテゴリーの分類とはまた別枠のものであると効果的です。また、記事内でよく使われているキーワードをタグに設定しても構いません。そうすることで、ユーザーがアーカイブからお目当ての記事を探したいと
CSS3のappearanceプロパティを使ってフォームのselect要素を装飾する | Rapid Progress
つい最近、フォームを作る際によく使われるselect要素の見た目を調整する必要があったので、その時にやったことなどを備忘録を兼ねてメモします。つい最近、フォームを作る際によく使われるselect要素の見た目を調整する必要があったので、その時にやったことなどを備忘録を兼ねてメモします。 select要素といえば、 ↑こんな感じで、ブラウザ毎にデフォルトで矢印がついちゃいます。 個人的にはこれでいいだろと思う派なんですが、そうもいかないときもあるので… 以下、select要素の装飾方法となります。（※2013年11月時点IE非対応） 1.矢印を消す まず、右側の矢印をCSS3のappearanceプロパティを使って非表示にします。 ■CSS Sample 1 2 3 4 5 select{ -webkit-appearance:none; -moz-appearance:none; ap
[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
