【初心者】HTMLポップアップ表示の作り方と利点を紹介




皆さんこんにちは新米エンジニアの新米太郎です。

皆さんはポップアップがどんな時に使われるかご存知でしょうか?

本記事では、誰でも簡単にポップアップを作れるサンプルコードの紹介とポップアップを表示する利点について話していきたいと思います。

HTMLポップアップ表示の作り方

[1メッセージ表示ポップアップの作成]

サンプル結果

[サンプルコード]
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-delete">チョメ</button> 

<!--確認ポップアップ--> 
<div class="modal" id="modal-delete" tabindex="-1">
    <div class="modal-dialog modal-lg"> 
        <div class="modal-content"> 
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button> 
                <h4 class="modal-title">メッセージ</h4> 
            </div> 
            <div class="modal-body"> 
                <label>Hello World!</label> 
            </div> 
        </div> 
    </div> 
</div>

[2ボタン付き確認ポップアップの作成]

サンプル結果

[サンプルコード]
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-delete">チョメ</button>
<!--ボタン付き確認ポップアップ-->
<div class="modal" id="modal-delete" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                <h4 class="modal-title">メッセージ</h4>
            </div>
            <div class="modal-body">
                <label>Hello World!</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">チョメ</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
            </div>
        </div>
    </div>
</div>

[3パスワード認証ポップアップの作成]

サンプル結果

[サンプルコード]
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-delete">チョメ</button>

<!--パスワード認証ポップアップ-->
<div class="modal" id="modal-delete" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
                <h4 class="modal-title">チョメチョメ確認認証</h4>
            </div>
            <div class="modal-body">
                <label>チョメチョメする場合はパスワードが必要です。</label>  
                <input type="password">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">チョメ</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
            </div>
        </div>
    </div>
</div>

⬇️パスワード認証時の表示・非表示切り替えもチェックしておこう

【コピペOK!】JavaScriptでパスワードの表示切り替え方法
今回はJavaScriptでパスワードの表示・非表示の切り替え方法を誰でも簡単にコピペで出来ちゃうサンプルコードをご用意しました!パスワードを伏せ字にするのは、脇や背後からパスワードを見られないようにするためです。パスワードの非表示は見ず知らずの人にログインされないためのセキュリティ強化に繋がります。

[4登録ポップアップの作成]

サンプル結果

[サンプルコード]
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-delete">チョメ</button>
<!--登録ポップアップ-->
<div class="modal" id="modal-delete" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                <h4 class="modal-title">チョメチョメ登録</h4>
            </div>
            <div class="modal-body">
                <p>
                    <label>チョメ</label>
                    <input type="text">
                </p>
                <p>
                    <label>チョメ</label>
                    <input type="text">
                </p>
                <p>
                    <label>メール</label>
                    <input type="text"><label>@</label>
                    <select name=”address”>
                        <option value=”mail1”>gmail.com</option>
                        <option value=”mail2”>docomo.ne.jp</option>
                        <option value=”mail3”>i.softbank.jp</option>
                        <option value=”mail4”>y-moblie.ne.jp</option>
                    </select>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">チョメ</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
            </div>
        </div>
    </div>
</div>

 

新米太郎
新米太郎

ポップアップが表示されましたらあとは自分の好みに合わせてCSSなどでデザインやボタンの配置などカスタマイズしてみてください。

そもそもポップアップを使う利点とは

ポップアップとは、「ポップアップウィンドウ」の略で、インターネットでWebサイトを閲覧する際、最前面に飛び出すように表示されるウィンドウのことです。例えば以下の例が挙げられます。
・広告の表示
・クーポンの配布
・アカウントの登録フォームなどの表示
・確認用のメッセージ表示など・・・
などが挙げられます。
例を参考に導入するメリットを詳しく見ていきましょう!

ユーザーの離脱率を下げる。

ポップアップにより、ユーザーの離脱率を下げる効果があります。次のようなタイミングでポップアップを表示することで、ユーザーの離脱を防止できます。
・✕ボタン(閉じる)を押そうとした
・ブラウザの戻るボタンを押そうとした時など・・・
ユーザーがブラウザ上から離れようとした行動をとった時に広告などのポップアップを表示することで離脱率を下げることに使えます。
ただし、正しいポップアップの表示(ユーザーに害を与えない表示の仕方)をしないと逆効果になる恐れがあります。

広告ポップアップで高倍率を高める。

ポップアップには広告ポップアップというものがあります。誰でもWEBサイトで広告を目にしたことがあるあれです。高倍率を高めるには以下の例が挙げられます。
・サイトと関連のある広告。
・自分がアマゾンなどで調べていた商品の広告
・商品のクーポンなど・・・
商品の広告やクーポンをサイト内に表示してあげることで気になったユーザーが商品を買う利点が挙げられます。

アカウントなどの作成や登録フォーム時

何かを登録や入力の際に良くポップアップは使われます。以下の例をあげますと、
・メールアドレスの入力呼びかけ
・アカウントの作成時など・・・
ポップアップを表示してあげることにより、どのようなタイミングでユーザーに対して、何をしてほしいかが決められます。

確認用メッセージでユーザーの誤りを無くす。

ポップアップでユーザーのミスを減らすことができます。以下の例を挙げますと
・誤って情報を削除しないようにするため
・入力した内容を本当に登録していいか?など・・・
ユーザーのアクションに対して「確認のメッセージ」を表示してあげることで誤ってデータを削除してしまうなどのリスクを無くしてくれます。

まとめ

いかがだったでしょうか。
ポップアップ表示は様々なメリットを与えてくれます。しかし適した場面でポップアップを使わないとユーザーに害を与えてしまい逆効果につながってしまうのでポップアップを使うときには必ずユーザーの気持ちを考えた上で使ってくださいね!




コメント

タイトルとURLをコピーしました