ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. マイクロコピーをご存知だろうか？ Webサイトの中でも細かい部分のコピーライティングのことだが、Webマーケティングの経験の浅い人は特に軽視しがちだ。 ユーザー体験をより素晴らしいものにするためにマイクロコピーは重要な役割を持つ。このマイクロコピーを重視することで、サイトのCVを向上させることもできる。さらに、大切なのはブランドやサイト全体に与える印象を左右するということだ。細部にまでこだわりが見えるからこそブランドを色濃く感じ取ることができる。「神は細部に宿る」というが、細かい部分もとても大切なのだ。 そこで今回は、特に効果的なマイクロコピーの変更方法についてお話ししよう。サイト制作やライティングに関わる方はぜひ参考にしてほしい。 1.

フォームに入力する値といえば、電話番号や年齢、クレジットカード番号など様々です。しかし、数字を使っているからといってむやみに <input type="number"> 要素を使うと問題が起きます。 数字であって数値でないWHATWG の仕様には次のように書かれています。 The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=num

Stay organized with collections Save and categorize content based on your preferences.

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 電話番号入力フォームは、生年月日入力フォームと並んでくせ者です。たくさんのフォーマットがあり、どの入力方法が正しいかを見分けにくいことがよくあります。国番号を入力すべきか否かさえよくわかりません。 適切な入力フォーマットを判別できないと、ユーザーは電話番号入力フォーム以外の項目も入力内容が不適切なのではと不安になります。電話番号入力フォームでエラーがでると、フォーム入力自体を放棄してしまうかもしれません。 どのフォーマットが正しく、どのフォーマットでエラーが出るのかを、ユーザーが入力時に困惑しないように伝えるべきです。もしユーザーが困惑するようあればユーザー体験が乏しいということなので、デザインし直す必要があります。入力フォーム改善のためには、

ユニヴァ・ペイキャストは、フォーム入力支援ツール「Gyro-n EFO（ジャイロンEFO）」に、フォームの項目への入力が問題なく成功していることをリアルタイムでお知らせする新機能「入力完了マーク」を実装した。 項目ごとに入力が成功したタイミングでマークを表示させることでユーザーに達成感を与え、フォームからの途中離脱を防ぐEFOの効果がより一層向上する。「入力完了マーク」は、Gyro-n EFOを利用している人なら追加料金なしで利用できる。 ユーザーに入力成功の安心感と達成感を与え、コンバージョンへ導くGyro-n EFO「入力完了マーク」は、フォームの各項目ごとに設定されたバリデーションを満たし、入力が問題なく成功したタイミングでお知らせマークを表示する機能。 入力が成功すると即時に項目の右端にチェックマークを表示し、ユーザーに入力成功の安心感と達成感を与える。これにより、全項目入力に向け

PaulはUXコンサルタントであり、デジタルトランスフォーメーションの専門家です。非営利団体や企業のWeb、ソーシャルメディア、モバイルを使ったユーザーとの結びつきを支援しています。 メルマガの登録フォームが非常に不快だという意見には私も同意します。以前、私はこのテーマについて記事を書いたことがあります。その後、さらにもう一記事を書きました。 私はメルマガの登録フォームはさらに改善できると考えています。実際、私のサイトの実績を元に登録フォームの効果を証明することができます。 私はメルマガの登録フォームにうんざりしています。企業は何としても私のメールアドレスを手に入れようと、あらゆる手段を講じてきます。無理矢理聞き出すために、あらゆる迷惑な技術を用いてくるのです。閉じることができない鬱陶しいポップアップや、登録をしつこく催促する巧みな話術など、枚挙に暇がありません。 このような技術が機能しな

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

デジタルマーケティングに16年間従事しているMITSUIです。Google AnalyticsとGoogle Tag Managerが大好きで、これらのツールを活用した情報提供を行っています。ブログではデジタルマーケティングに関する情報や最新のトレンド、ベストプラクティスを紹介しています。

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

ヨーロッパのECサイトが盛況です。その成功の鍵がモバイルフレンドリーなWebサイトだと言われても、私は驚かないでしょう。昨年は、約2億9,600万人のオンラインユーザーが4550億ユーロをECで使いました。そして、その内16.5％は、モバイルユーザーだったのです。 わずか16％だと思うかもしれませんが、モバイルのシェアの成長率は驚異的です。イギリスの大手小売Argosは、ブラックフライデーの午前中、１時間に700,000回の訪問を受け、デスクトップからの訪問はわずか20％であったと報告しました。 この事実から示唆されるのは、モバイルユーザーにとってもっとも大きなハードルの１つであるフォームの扱い方を、Webデザインに従事する全員が考え直すべきだということです。Form Analyticsを運営する企業UseItBetterによる最近の調査が、考え直す際に大きな助けになるでしょう。この記事で

Webサイトのフォームの作成にはjQueryのプラグインが便利。中でも対話形式の使いやすいフォームを作成できるjQueryプラグインを厳選して紹介します。 ページの更新がなく、指示に沿って記入できるjQuery用のウィザード形式のフォームを作成するためのjQueryプラグインがあります。ユーザーデータを一度に入力させる大きなフォームなら、ウィザード形式に変えることで、小さなステップの入力に分割できます。これならユーザーが長い入力フォームにうんざりすることもなくなり、進行状況も示しせます。 この記事ではおすすめjQueryフォームウィザードを6つ、それぞれの特徴を踏まえて紹介します。有料版や自作する方法も少し触れます。jQueryのフォームウィザードを求めている人の助けになれば幸いです。 1．jQuery steps jQuery Stepsはウィザード型のインターフェイスを簡単に作れる気の

「お問い合わせ」「購入」「新規登録」等、フォーム画面は営業でいうクロージングの役割を担っており、サイト運営において要となる部分です。 機会損失が起こらないよう、入力フォームの使いにくさをできるだけ排除し、ユーザーストレスを軽減するよう工夫することが大切です。 今回は、入力フォームを見直す際に、確認すべき項目9つをご紹介いたします。 是非自身のフォームサイト見直しの参考にしてみてください。 1.入力項目数が多すぎないか確認する 一般的に入力項目数が増えるほどユーザーストレスがかかりやすくなり、ユーザーが離脱しやすくなると言われています。 株式会社エフ・コードが実施したアンケート調査によると、回答者の約69％が「入力項目が多いから入力をやめた」と回答しています。 参考： 必須項目が多いとダメ？ウェブフォームの【必須項目数】と【入力完了率】の関係 | UI改善ブログ 入力項目が増えると、ユーザー

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ

Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch

フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。 ではサンプル１からコードを紹介していきます。 サンプル１ 二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 HTML では、HTMLから。 <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">はい</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">いいえ</label> </div> 特に問題

Form系要素スタイルの初期化 ブラウザのForm系要素の初期スタイルをはがすときには、appearance: noneをあてつつ、backgroundやborderなどのリセットをする。 select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; margin: 0; padding: 0; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; } しかし<select>だと、WebKit系のを除けば、-moz-apperanceとしているFirefoxでさえも、選択

皆さんこんにちは、サポート部の山本です。厳しい残暑もやっと終わりを迎え、逆に朝晩の冷え込みが強くなってきています。気温の変化は体調を崩す要因にもなりますので、皆さん気をつけて下さい。 さて今回はECサイトでもよく使われている「フォーム」を簡単に入力しやすく装飾できる方法をご紹介したいと思います。 様々な場面で使われる「フォーム」 ECサイトではメルマガ登録フォームや問い合わせフォーム、注文者情報入力フォーム等、さまざまな場面で利用されています。今回はCSSだけでフォームを簡単に装飾してみます。 まず初めに以下URLを見てください。 https://ssl.aispr.jp/yamay/form/inquiry/ シンプルですが、いかにも地味でフォーム欄も小さく入力しやすいとは言えないですね。これをベースに装飾していきましょう。 フォーム入力エリアを広げる まずは以下を追記してテキストインプ

セレクトボックスってブラウザそのままのデザインってちょっと味気ないというか、ダサいと感じませんか？ サイトのデザインを細部までこだわって作ったのにフォームのセレクトボックスがそのままだと…サイト全体のデザインを崩してしまうかもしれませんよね。 今回はそんなデフォルトのセレクトボックスじゃ我慢できないという方のためにCSSだけで簡単に変更できるオリジナルのデザインを紹介しているサイトを紹介していきます。 ライセンス等をしっかり確認して、ありがたく使わせて頂きましょう(/･ω･)/ プログラミングやWordPressを習得するのに一番近道な方法とは？

フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ