フォーム磨きも大事!スマホフォームでの最適な見せ方

フォーム磨きも大事!スマホフォームでの最適な見せ方

こんにちは、最近、脱毛サロンに行ったら、これ以上日焼けするともう施術できませんと言われました。かもめです。

見た目を気にするなら、努力も必要だという事をひしひしと感じているこの頃。
そして見た目と言えば、フォーム。そこで今回は、前回に引き続き、スマホフォームの見せ方に関してです。

この記事「ブルース・リーに教わる、スマホフォームの改善」にもあるように、スマホフォームは、全体のページを短くしたほうが良いと言われています。

近年、スマホが普及し、ほとんどのサイトがスマホ対応していますよね。その中でも、スマホ対応の方法として、レスポンシブ対応があります。

レスポンシブ対応をしたフォームによく見られる、もったいないフォームの見せ方を紹介します。

もったいないスマホフォームのレイアウト表示

image06

ここでのもったいないポイントは、縦に項目が並んでしまってページ自体が長くなっていることです。

スマホフォームの良い表示例1

image04

こちらのフォームは、電話番号項目を1項目にまとめ、縦も短くすっきりとした印象です。

スマホフォームの良い表示例2

image05

3つの項目を横に並べ、縦に長くならないように工夫をしています。

レスポンシブ対応の落とし穴

レスポンシブ対応は、デザインが変わってもPCとコンテンツが同じ内容なので内容の修正が楽だというメリットもありますが、デバイスの大きさに合わせ、自由にデザインを変えることができず、デバイスの大きさによっては、今回ご紹介したような思わぬ落とし穴が出てくることもあります。

レスポンシブ対応をする時や、スマホサイトを作ろうとする時は見せ方にも要注意です!
これがフォーム磨きですよ!

スマホ対応を今後お考えの方は、是非、フォームコンバータもご覧ください!

あなたにおすすめ

ロイヤリティフリーの無料ストックフォト(写真)1+8選... ロイヤリティフリー(ライセンスフリー)の無料写真を集めているサイトも順調に増えてます。全員が発信者となる現在では、こうしたサイトの重要度・便利度は増すばかりですね。 基本的にパブリッックドメイン(商用利用可能・無料・用途の制限なし)で...
フォームデザイン実証研究 送信ボタン編... こんにちは! 最近の悩みは山登りをするとひざの痛みが気になること、、、 本日のブログは自然派20代OLことミヤが担当させていただきます。 さて、サイトでCVを上げるためには徹底的にテストを繰り返していくことですが、 今回は日...
リニューアルのケーススタディ、PSDファイルから自動コーディング、ロゴ検索ツール、グラフ用フォント(... こんにちは。 今週の【UX・デザイン】の情報共有です。 UI ・UX アプリのリニューアルのケーススタディ 2年間まったく更新されなかった健康保険アプリのリニューアルの話です。 他社はどのようにしてリニューアルを行...
UI・UXのベストプラクティス、フラットデザインについての実験結果、ATLASSIANの新CI、無料... こんにちは! 今週の【UX・デザイン】の情報共有です。 UI ・UX UI・UXのベストプラクティスまとめ 心理学とマーケティングを双方のスペシャリストであるNick Kolendaさんのサイトです。 彼のサイト内...