フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに
ニューモーフィズム（Neuomorphism）が去年の暮れあたりから新しいスキューモーフィズムとして注目されています。その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。 このニューモーフィズムをCSSで実装したフォームのデモが公開されていたので、紹介します。 Neomorphic Form ニューモーフィズムとは ニューモーフィズムの繊細なデザインでつくられたフォーム ニューモーフィズムのデモ ニューモーフィズムとは ニューモーフィズム（Neuomorphism）という言葉は、UIのトレンドで「新しいスキューモーフィズム」としてJason Kelleyがコメントした「Neuomorphism?」がその起源です。 その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。ニューモーフィズム
Add Clear - jQuery Plugin - Demo Input欄にclearボタンを付与できるjQueryプラグイン「Add Clear」 インプット欄に入力すると右端に×ボタンがでてクリックすれば内容が消えるという、最近ではおなじみのUIがjQueryで実現可能です。 スマホ等のタッチ端末ではこうしたボタンがあって当然というところがありますから、こうしたプラグインで楽に対応できるのは便利。 関連エントリ レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」 ドラッグ＆ドロップで移動できるグリッドレイアウト作成jqueryプラグイン「GridList」 Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 クリッカブルマップもレスポンシブにするjQueryプラグイン「Responsive
ちょっとかわいかったので備忘録。placeholderとは別にテキストを用意し、inputにフォーカスした際にポンッと押し上げる、というスクリプトです。jQueryに依存します。 タイトルは語彙があります。プレースホルダーを、フォーカス時はラベルとして利用する、みたいな感じですが、フォーカス時に押し上げるテキストは別途カスタムデータ属性を設定します。 こんな感じ。一番右はplaceholder属性に書いたテキストとは別のテキストがでています。 $(".foo").label_better({ easing: "bounce" });セレクタを指定してエフェクトを設定。 <input type="text" class="foo" data-new-placeholder="bar" placeholder="hoge">上記ならplaceholderは「hoge」、フォーカス時に飛び出すテ
フォームのチェックボックスとラジオボタンに余分はタグは使用せずに、ちょっとだけアニメーションを加えて楽しくするスタイルシートを紹介します。 Animated Toggles HTML チェックボックスもラジオボタンも通常通りにマークアップします。 余分なタグは特にありません。 <form> <h1>Animated Toggles!</h1> <div class="controls"> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Apples</label> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Oranges</label> </div
フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動するjQueryのプラグインを紹介します。 デスクトップ用のページで使用してもかっこいいですが、スマフォ用のページにも省スペースを兼ねて使用してもいいですね。 デモページ name, mailの他にもpasswordなどのフォームも用意されています。4番目のデモでは、プレスホルダーのテキストとは異なるテキストを表示します。 また、デモにはありませんが、ラベルは上・下・左・右に移動させることもできます。 Label Betterの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
Ideal Forms 3 - Documentation 複数画面にわたるステップ別のカッコいいフォームを実装できる「Ideal Forms 3」。 １画面数の要素数を減らして入力の負荷を減らせるステップ別フォーム。 単なるステップ別フォームを作るだけじゃなくて、フォームデザインもクールにし、Validation・ヒント機能なんかもついてます。 こうした形のフォームを作る際に参考に出来そうです。 関連エントリ フラットデザインでレスポンシブな超カッコいいフォームを実装できる「Grid Forms」 フォーム要素にフォーカスした際のヒント表示を簡単に実装できるjQueryプラグイン「FormHelp」 スマホでのフォーム入力をシンプルに分かりやすくできる「Leader.js」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」 マークアッ
Grid Forms Data entry made beautiful フラットデザインでレスポンシブな超カッコいいフォームを実装できる「Grid Forms」 フォームというと<input>で実装されたエレメントが多数出てくるのが当たり前なWEBですが、次のように、紙のフォームのようなフラットなデザインでグリッド状がクールなフォームが実装できます。 レスポンシブに綺麗にリサイズされます。 フラットなサイトではいい感じに活用できそうですね 関連エントリ スマホでのフォーム入力をシンプルに分かりやすくできる「Leader.js」 マークアップにValidateルールを定義してフォームバリデーションできるjQueryプラグイン「Ketchup」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」
フラットなスタイルの一番使いにくいところは、どこですか？ 僕はそのシンプルなスタイルのボタン（リンク）です。一見ボタンに見えない、まるで見出しやコンテンツの一部のようにデザインされていると操作に迷ってしまいます。 そんなフラットなスタイルで、ユーザーが最小限の努力で、正確に何をすべきか理解できるフォームを作成するためのアドバイスを紹介します。 Flat UI and Forms 下記は各ポイントを意訳したものです。 フォームのUIで大切なポイント フォームの使いづらい例と改善例 フォームのUIで大切なポイント フォームとは、そのプロダクトやサービスを受ける時に情報を交換するためのインタラクションです。これはサインアップやウェブ検索をはじめ、Eコマースやネットバンクまですべてを含みます。 まずは、フォームのデザインでユーザーに必要とされることとコンテンツで必要とされることの相違点を見てみまし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く