お 問い合わせ フォーム デザイン。 入力フォームのデザイン・UXを高める15のルールを徹底図解!

お問い合わせフォームを作る

お 問い合わせ フォーム デザイン

入力フォームのデザイン設計に参考にしたいサイト事例 判断基準:10のポイント こちらの10のポイントと照らし合わせ、デザインがきれいかつ親切UI設計の厳選した入力フォーム4つをご紹介します。 PCの基準で選定しておりますが、SP版の展開があるサイトにおいても、どれもきれいで理想的な入力フォームです。 ブラウザ右上・左上の2か所も、残りの記入すべき量が表示されているのが特徴です。 ブラウザ左下には、入力途中で疑問が出てきたお客様に対してのお問い合わせ番号も配置されております。 また、未入力項目boxはデフォルトで黄色く表示されているのもよいですね。 また初回のページには、お申込み完了までの目安 5~10分で完了 が提示されており、こちらも親切ですね。 同ページにてブラウザ右上に固定で表示されている料金明細シュミュレーターもユーザー目線の設計だと言えるでしょう。 情報がコンパクトにまとまっており、分かりやすいです。 パスワードの入力boxにカーソルをあてると補足が出現されるようになっており、とても特徴的ですね。 見た目はシンプルなのですが、入力boxにカーソルを当てるとbox左側に補足メッセージが出たりなど、工夫されている印象です。 全体的なデザインも余計な要素は出来るだけ省き、シンプルなので直観的にも分かりやすいですね。 ブラウザの右上に残りの項目数がリアルタイムで反映されるのが特徴です。 また、未記入項目は全て赤枠で表示しており、残りの入力すべき項目が明瞭で直観的な入力フォームだと言えます。 エラーについては文字色・ボックス枠共にオレンジ色で表現されており、統一感があります。 「入会する」ボタンも大きくて直観的ですね。 入力フォームまでの導線が工夫されているECサイト事例 入力フォームはもちろんですが、入力フォーム周りの導線がきれいなECサイトを紹介します。 ユーザーの心理的ハードルを下げるため、入力フォームらしくない見せ方や段階的な会員登録は基本ですが、きちんと抑えたい点だと思うので紹介します。 ユーザーの心理的負担を下げるために、その段階ごとに最低限の情報を取得する工夫は取り入れたいですね。 他ではもこのように、初回の会員登録時はなるべく最小限の項目を登録・購入時に情報追加登録するかたちです。 UTme! もちろん先に会員登録も可能です。 Tシャツを先にデザインさせて興味をぐっと引いてからだと、よりスムーズに会員登録させやすそうですね。 さいごに デザイン面からもUI面からも、参考になるような入力フォームをポイントに厳選しましたが、いかがでしたでしょうか。 今回は入力フォーム事例を通じてイメージではお伝え出来ましたが、具体的な考え方やそれが良しとされる理由については、既出の記事を読んで、ぜひより理解を深めていただけたら嬉しいです。

次の

無料で簡単に使えるお問い合わせ・メールフォーム作成ツール

お 問い合わせ フォーム デザイン

入力フォームのUXを高める15のルール 1. フォームは縦一列配置にする 入力は通常、 垂直方向が自然です。 入力行が横に複数列配置されると、ユーザは入力しづらく感じます。 ラベルは入力データの上に配置する 入力欄のラベルは、左横よりも データの上に配置したほうが、入力完了率がはるかに高くなります。 また、モバイル上でレイアウトが崩れにくくなります。 ただし、変数オプションのある大量のデータを入力するフォームの場合は、左配置のラベルがおすすめです。 ラベルを上部に配置する場合より行数が少なくなり、一度に入力しやすくなります。 ラベルと入力データはグループ化する ラベルと入力データは寄せて配置しましょう。 フィールド間には十分な間隔をあけることも忘れずに。 そうすればユーザーが混乱せずにすみます。 もあわせて読むと、より理解が深まりますよ! 4. すべて大文字での表記は避ける 大文字だけの表記は読みづらく入力がしにくいです。 そもそも、日本人向けのサイト・アプリでは、英語表記より日本語表記の方が直感的に分かりやすいのが当然です。 デザイン性を優先して英語表記を必要以上に増やすことは原則避けましょう。 選択肢が5個以下ならすべて表示する ドロップダウン(プルダウン)リストは、隠れている選択肢を表示するために1回、選択するために1回、と2回のクリック/タップが必要です。 選択肢が5以下の場合は、 全ての選択肢をひと目でわかるように配置しましょう。 選択肢が非常に多い場合(25以上)は、ドロップダウンメニューの中に予測検索機能を組み込みましょう。 プレースホルダテキストをラベルとして使わない プレースホルダテキストとは、ユーザがテキストを入力するまでの間、入力フィールド内に表示されている説明文のことです。 このプレースホルダテキストをラベルとして使用することで、スペースを最適化できると考えがちですが、それは誤りです。 何の情報を書き込むべきだったか入力中に確認することができないため、入力内容をチェックしたり、エラーが出た時に書き直したりしにくくなります。 特に、視覚にハンディキャップを抱えるユーザや認知症患者にとってUXを著しく損なうなど、ユーザビリティの観点で多くの問題があります。 (出典:) 7. チェックボックスは縦に配列する 複数の項目を選択させる場合には 「チェックボックス」(四角のボックス)が使用されます。 ひとつの項目のみを選択させる場合は、 「ラジオボタン」(丸いボタン)が使用されます。 チェックボックス、ラジオボタン、いずれも 縦に配列することでチェックしたかどうかの視認性がよくなり、入力しやすくなります。 CTAは、「どんなアクションにつながるか」が分かる表現にする CTA(Call To Action)とは、サイトを訪れたユーザを具体的な行動に導くボタンやリンクを指します。 CTAは、 どんなアクションを起こすのかがはっきりわかる表現にしましょう。 例えば、『送信する』よりも『登録する』の方が、具体的に何が起こるかユーザにとってわかりやすい表現です。 エラー表示はインラインで エラーになっている箇所とその原因は、 インラインでユーザに示しましょう。 入力途中でのリアルタイムアラートは使わない パスワードやユーザネームの作成中や、文字数制限のあるメッセージなどの入力の途中で「無効なアドレスです」「文字数が超過しています」などのリアルタイムアラート(バリデーション)を出さないようにしましょう。 ただし、アラートを出すことがユーザーのメリットになる場合を除きます。 ヘルプテキストは表示する 基本的なヘルプテキストはできるだけ表示しましょう。 ヘルプテキストの内容が込み入っている場合は、重要事項だけでもいいので入力データの横に配置します。 プロセスを進めるためのアクションと、そうでないアクションをわけて提示する ユーザに次にとってほしいアクションのためのボタン(「登録する」)を、とってほしくないアクションのボタン(「キャンセルする」)より目立たせるかどうかについては、意見が分かれます。 入力フォームの幅を適切に 入力項目の長さとフィールドの幅をそろえます。 電話番号や郵便番号など、入力する桁数が決まっている場合はこのルールを適用しましょう。 関連情報ごとにグループ化を 多くの項目を一気に見せられるとユーザはフォームの長さに圧倒されます。 関連する項目ごとにグループ化することで、ユーザはフォームの内容をより早く理解することができます。 その情報、ユーザがわざわざ入力する必要ありますか? 「任意入力」の項目は、項目自体を削除し、他の方法でデータを集めることができないかを検討しましょう。 推測が可能な項目ではないか、別の機会で聞けばよい項目ではないか、それとも完全に無くしてしまってよい項目か、ということを常に自問しましょう。 データエントリーは自動化の一途をたどっています。 例えば、モバイル機器やウェアラブル機器は、ユーザが無意識のうちに膨大なデータを集めています。 入力フォームを作成する際には、チャットボットのような会話型UIやSMS、メール、音声入力、OCRによる文字の読み取り、現在地認識機能、指紋認証や生態認証などの活用も検討してみましょう。 フォームデザインにも楽しさを 人生は短いのです。 誰もフォームを機械的に埋めることで時間を費やしたくはありません。 対話しているかのような画面にしましょう。 それも愉快なものに。 ユーザの気持ちを徐々に惹きつけましょう。 誰も思いつかなかったことをやってみましょう。 デザイナーの役割は、会社のブランドを表現してユーザの心を揺さぶることです。 ユーザの気持ちをうまくつかめば、フォーム入力の完了率はアップします。 上記のようなルールがおざなりにならないよう、留意してみてください。 無料ダウンロード:入力フォーム チェック項目59 本記事に取り上げた視点だけでなく、5,000調査以上のユーザテストや、UI専門家の過去知見から、入力フォームにおける59のチェック項目を整理しています。 はこちらからどうぞ! 日時:2020年6月30日 日本を代表するUXリサーチャの一人である樽本徹也さん。 累計刷数が1万部を超える「ユーザビリティエンジニアリング」をはじめ樽本さんの著書の数々は、UXを学ぶ人が必ず一度は手に取る「バイブル」です。 多くのUXリサーチャを育て上げてきた樽本さんはワークショプの達人としても名を馳せ、UX界隈で樽本さんの名前を知らない人はいないと言っても過言ではありません。 そんな樽本さんに学んだUXリサーチ実践者たちも、最初はみんな手探りでした。 UXリサーチ実践者の皆さんは、どう学び、どんな壁をどのように克服してきたのでしょうか。 本セミナーでは、樽本さんとその弟子ともいえるUXリサーチ実践者2名に、「UXリサーチ初学者の壁」についてライトニングトークとパネルディスカッション形式でお話いただきます。

次の

コピペでOK!「Contact Form 7」を使ったかっこいいお問い合わせフォームテンプレート集

お 問い合わせ フォーム デザイン

無料で手早くお問い合わせ・メールフォームを作成したい方へ Webサイトにメールフォームを設置するとどんなメリットがある? 「フォーム(form)」という言葉には、「形」「書式」「記入用紙」といった意味があります。 「メールフォーム」と言うと、サイト利用者が運営者に質問・要望・苦情などを送るために利用する「お問い合わせフォーム」を指します。 メールアドレスや電話番号などを記載するだけのWebサイトもありますが、お問い合わせフォームを設置しておくと、以下のようなメリットがあります。 ・回答に必要な情報を記入して送ってもらえる、スパムが比較的届きにくい ・電話のように業務を邪魔されず、都合のいいタイミングで回答できる 最近では、CGIやPHPでメールフォームを作成するよりも、ASPやSaaS、APIといった方式で、外部のお問い合わせフォーム作成サービスを利用し、自社のWebサイトに埋め込むところが増えてきています。 使いやすくて洗練されたお問い合わせ・メールフォームをあなたのWebサイトに Tayoriを開発したPR TIMESは利用企業2万6000社、月間1400万PV超のプレスリリース配信サービス「PR TIMES」を運営しています。 2万6000社以上の広報担当者や、メディア関係者、ブロガーなどからフィードバックを受けながら、使いやすいデザイン、使っていて思わず楽しくなるようなデザインとはどんなものか、ノウハウを蓄えてきました。 そうして培ってきたノウハウをTayoriにも生かし、Webサイトを訪れた利用者にとって使いやすいフォームへの導線、エラー個所を分かりやすく表示する入力エラー時の見せ方など、洗練されたデザインになるよう力を注いできました。 もちろん、Tayoriのメールフォーム(お問い合わせフォーム)はスマートフォンでの表示にも対応。 スマホからでも入力しやすいデザインになっています。 あなたのこだわりに応える。 柔軟なカスタマイズ性 Tayoriはカスタマイズ性が高く、フォームの項目やデザインなど、次に挙げていくようなさまざまな点を自分好みに設定できます。 ・お問い合わせ・メールフォームに設置する入力項目• ・スタンダード/トーク形式の2種類から選べる基本フォームデザイン• ・お問い合わせ・メールフォームの設置方法(コード埋め込み/iframe/リンク)• ・お問い合わせ・メールフォームへの導線となるボタンのデザイン• ・お問い合わせ・メールフォームのカラーセット• ・フォーム上でのロゴ表示• ・問い合わせ返信メールの文面 など カスタマイズを重ねていくことで、「自社Webサイトだけのお問い合わせ・メールフォーム」を作成できるのも、Tayoriの特徴の1つです。 お客様の声を漏らさない。 効率を上げるカスタマーサポート機能 Tayoriはもともと、「カスタマーサポートツール」として開発されたツールです。 重要度を示すフラグを付けることもできますし、お問い合わせごとに一連のやり取りの履歴を確認することもできます。 有料版ではチームですべてのお問い合わせをチェックして、お問い合わせごとに担当者を割り当てる機能なども利用可能になります。 これまでメールソフトを使って対応していたカスタマーサポートも、Tayoriを使って管理するようになれば、対応漏れ/遅れを防げるようになり、きっと効率も上がっていくことでしょう。 お問い合わせ・メールフォームとFAQを連携。 利用者とのコミュニケーションをよりスムーズに Tayoriのユニークな点として、フォームとFAQの連携機能が挙げられます。 FAQを別途作成しておくと、フォームと一緒に表示できるようになります。 お問い合わせフォームとFAQを一緒に表示することで、「お問い合わせしようと思ったけれど、FAQを調べたら疑問を解決できた」という利用者が増えるでしょう。 そのうちの何人かは、あなたのWebサイトから離脱することなく、そのまま資料請求/商品購入などのアクションに進んでくれるかもしれません。 また、FAQと連携させることで、Webサイト運営者であるあなたに届くお問い合わせの件数が減ることになります。 定型文で返信できるような質問はFAQで対応できるようになるので、手間を大幅に削減できます。 そうして自由に使えるようになった時間は、利用者の声に応えるために使ってください。 そうすれば、あなたのWebサイトは今以上に使いやすく、利用者から支持されるものになるでしょう。

次の