navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。皆さんこんにちは、サポート部の山本です。厳しい残暑もやっと終わりを迎え、逆に朝晩の冷え込みが強くなってきています。気温の変化は体調を崩す要因にもなりますので、皆さん気をつけて下さい。今回はECサイトでもよく使われている「フォーム」を簡単に入力しやすく装飾できる方法をご紹介したいと思います。まとめ様々な場面で使われる「フォーム」ECサイトではメルマガ登録フォームや問い合わせフォーム、注文者情報入力フォーム等、さまざまな場面で利用されています。今回はCSSだけでフォームを簡単に装飾してみます。初めに以下URLを見てください。https://ssl.aispr.jp/yamay/form/inquiry/シンプルですが、いかにも地味でフォーム欄も小さく入力しやすいとは言えないですね。これをベースに装飾していきましょう。フォーム入力エリアを広げるまずは以下を追記してテキストインプットとテキストエリアの基本装飾をしましょう。300px;}これだけでも随分見やすくなりましたね。フォーカスしたときに入力欄の色を変える以下を追加することで入力欄を選択しているときに、そのスタイルを変更することができます。#3498db;}下図のような感じです。自分が今どのエリアで入力しているのかがわかりやすくなります。フォーカスした時に入力欄の幅を伸ばす次に以下を追記するとフォーカス時、入力欄の幅をアニメーションで伸ばすことができます。300px;}下図のように入力フォームの横幅が、フォーカスしてるときに伸びます。確認(送信)ボタンを押しやすく最後はフォーム内容を送信する際のボタンを大きくまた押しやすく調整してみます。CSSは以下を追加してください。to(#EEE));}小さすぎるとタップしにくいので大きめにしておきましょう。実装完了できあがりが以下URLです。https://ssl.aispr.jp/yamay/form/toiawase/シンプルですが、入力しやすく分かりやすいフォームになったのではないでしょうか。CSSでの装飾はもちろんですが、以下のようにHTML側での制御でより使いやすいフォームにカスタマイズすることも可能です。テキスト入力・メニュー選択どちらもできるdatalist要素を使ったフォームの作り方まとめフォーム周りの装飾は、ショッピングカートにとって重要です。ショッピングカートでは情報入力画面の離脱率が非常に高いこともあり、フォームはしっかり作りこんでいく必要があります。情報入力ページのようなセキュアなページに関してはCSSを触れないカートも多く存在し、上記のような編集を行えないこともあります。このような改善でCVRが伸びることも大いにあるので自由度が高いプラットフォーム選びは今では必須になっています。そのような機能性があるプラットフォームを比較していますので合わせて読んでみてください。ユーザーにストレスを与えないようなフォームを目指しましょう。山本”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。投稿一覧スマートフォン・モバイルのECサイト/非ECサイトの導入相談、売上アップのサポート等を行なっています。テクニカルサポート、営業として培ってきたノウハウをベースとし、長期的な利益確保が見込めるスマートフォン&モバイルECサイト構築のコンサルティングや売上アップの施策をご提供。ECサイト構築や運営のお手伝いをすることで、人々の生活が少しずつ豊かに変わっていく、そんな遠く先まで見つめながら、日々の業務に励んでいます。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。