4つのインスパイアされるフォームデザインパターン【無料

HubSpotが行った調査によると、回答者の82%が、貧弱または不完全なフォームが原因でWebサイトの購入ファネルを放棄したと報告し、そのうちの93%がデスクトップコンピューターで初めてそれらのフォームに遭遇したことがわかりました。

投票は行っているか、潜在顧客に連絡手段を提供しているか、ニュースレターの登録を奨励しているかなど、フォームというのはWebサイトやビジネスに不可欠な部分です。見た目がよくて効果的なWebフォームを作る方法はたくさんありますが、常に改善の余地があります。

4 Inspirational Form Design Patterns [無料]

よく設計されたフォームは、その有用性を損なうことなく、デザイン全体に価値を付加しています。さらに、そのようなフォームはパフォーマンスもかなり良くなります。Salesforceの新しいUIデザインフレームワークであるLightningでは、小さなフォームデザインの変更で、フォームのコンバージョンが向上する場合があります。

ボックスなしフォーム

ボックスなしの Web フォームは、目に見えるボックスや境界線がない Web フォームです。ボックスで囲まれたウェブフォームの伝統的な外観がないため、ウェブフォームをより現代的に、モダンに見せることができます。

曲線ベースのWebフォームでは、曲線や角を利用して興味を持たせることができます。曲線は、形やレイアウトの中に見つけることができます。うまく設計された曲線のボックスは、必ずしも伝統的な箱型のデザインに従う必要はありません。正しく行えば、曲線はウェブフォーム全体の視線を誘導し、ネガティブスペースとポジティブスペースの間に緊張感を与えることさえ可能です。

アニメーション化されたフォーム

アニメーション化されたフォームのデザインは、フォーム自体にいくつかのアニメーションを使用して設計されています。これは、興味を持たせ注意を引くのに役立つ単純なアニメーション (跳ね返る矢印やボタンなど) から、背景アニメーションやページ間の遷移など、アニメーションの Web デザインの長所を引き出すより複雑で凝ったデザインまで、さまざまなレベルで行うことができます。このようなアニメーション効果を使用する主な目的は、ユーザー エクスペリエンスを可能な限り魅力的にすることです。

下部または側面からスライドさせる

この Web フロー テンプレートでは、ユーザーが全体の外観を損なわずにいつでも問い合わせフォームを送信することが可能です。

サイトの下部に問い合わせボタンを追加することで、消費者がいつでも連絡できるようにすることができます。

また、スライドアウトメニューを利用して、人々がフォームにアクセスできるようにすることもできます。

訪問者を連絡先ページに送る代わりに、画面の横からフォームを引き込みます。

フルスクリーンフォーム

フォームに注意を向けさせるための素晴らしいテクニックは、気が散るものを排除することです。フォームを Web サイトのすでにトラブった場所 (フッターなど) に詰め込むのではなく、フルスクリーンにするためのエンゲージメント ポイントを組み込んでみてください。ユーザーが必要な情報を簡単かつ集中して入力できるようになり、完了しやすくなります。

自然言語フォーム

もしWebフォームが話せるとしたら、このように聞こえるかもしれませんね。「情報を送信しようとしています。本当によろしいですか?これは必須です。Web 上のフォームは、私たちが望むほど常にわかりやすいわけではありません。たとえば、ウェブページを操作するときは、タイピングするよりも会話しているような感覚であることが望まれます。自然言語入力は、ウェブフォームをより会話的なものにする方法のひとつで、つまり、記入が必要な単なる文章の一部ではないのです。自然言語インターフェースは、人間が質問するように質問することで、ユーザーを支援します。従来のフォームラベルや入力ボックスのパターンを活用することで、誤解を減らしつつ、会話のような文脈を作り出すことができるのです。

Step-by-step (procedural) form design

Step-by-step Web フォームデザインでは、情報のセクションを消化しやすいパーツに分割し、簡単にフォローできるようにすることができます。

この Web ページでは、Web フォームのステップを通じてユーザーが取るべき道が明確に示されており、見出しと視覚的な手がかりの両方が道筋をガイドしています。

わかりやすい塊で情報を追加させることで、前進を促し、単にすべてのフィールドを一度に表示するよりも集中できるエクスペリエンスを提供します。

場合によっては、ボタンをワンクリックするだけでよいこともあります。

結論

Web は双方向のものであり、ユーザーにとって価値ある Web コンテンツを作成し、刺激的な Web フォーム デザインでユーザーの関心を引き続ける必要があります。フォームは Web ブラウジングのエクスペリエンスに不可欠な部分なので、Web フォームをできるだけ魅力的にする方法について考えるために、少し余分に時間をかけてみてはどうでしょうか。これらのパターンを通じて考え、ウェブフォームのデザインに人間的なタッチを加えることで、ドロップ率を下げ、より少ない混乱でより良い参加を促すことができるのです。