<p>チェックボックス「すべて選択」機能があるサイトの有効・無効動作とタップエリアについて、いくつかサイトを調べてみました。</p><h2 id="hb629a8fc9d">どんなケースで「すべて選択」機能があるか</h2><p>一括で同じ動作をする場合とに「すべて選択」といった機能がついている傾向にある。 ※個人的に調べた結果</p><p><strong>一括で同じ動作をするケース</strong></p><ul><li>まとめて記事を削除する</li><li>まとめてお気に入りに登録する</li><li>まとめて資料請求する</li></ul><p><strong>似たような選択肢をまとめて選択するケース</strong></p><ul><li>沿線沿いの駅をまとめて選択する</li><li>職種の小・中分類に属する選択肢をまとめて選択する</li></ul><p>など</p><h2 id="hc8b6cdf8b8">「すべて選択」の有効・無効の切り替えの動作パターン</h2><h3 id="h10422867da">01 何も選択していない状態から「すべて選択」</h3><p>「すべて選択」を有効にすると「すべて選択」とすべての選択肢が有効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e4fd1c34e92f41c494fc45de1f4debec/check_all01.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h3 id="h552e44218b">02 すべて選択が有効な状態から「すべて選択」無効</h3><p>「すべて選択」を無効にすると「すべて選択」とすべての選択肢が無効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e4fa9efc557741e9ad137922e11254ae/check_all02.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h3 id="hd56333a796">03 すべて選択が有効な状態から一部選択肢を無効</h3><p>一部選択肢を無効にすると「すべて選択」が無効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/5eba20b963ac489e90dfb0af0449471a/check_all03.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h3 id="hd9b0b45367">04 一部選択有効な状態からすべて選択を有効</h3><p>「すべて選択」以外の選択肢がすべて有効になると「すべて選択」が有効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/1c88cc0550b8483890f6a8026b247f64/check_all04.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h2 id="heb84ddeb7d">番外編</h2><p>調べたサイトでは「すべて選択」自体がチェックボックスになっているケースが多かったですが、中にはテキストリンクで有効・無効にするケースもありました。</p><p><strong>Amazonのショッピングカートページ</strong></p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/ca7188bb1e2f4b3d887997b7613fc300/checkbox_amazon.png" alt="" width="1016" height="240"></figure>

<h2 id="h59f599a5a9">クリック・タップエリアも調べてみました💡</h2><h3 id="hef1cc3126d">⚙ ダッシュボード</h3><p><strong>WordPress</strong></p><ul><li>ホバーしたときにクリックエリアの背景色が変わる</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/36cc36aa7ae84b0ca92b2e0ce2455e4a/checkbox_wp.png?w=332&amp;h=156" alt="" width="332" height="156"></figure><p><strong>STUDIO</strong></p><ul><li>特にクリックエリアは拡大されてない</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/9f2fbd04b2554bd6abda07e047dce3b7/checkbox_studio.png?w=332&amp;h=156" alt="" width="332" height="156"></figure><h3 id="hf4bdfdb6f0">🏠 賃貸・物件検索サイト</h3><p><strong>SUUMO</strong></p><ul><li>チェックボックスより幅広くテキストの一部も含んでいるのでタップしやすい</li><li>アコーディオン機能とチェックボックスがあるところはチェックボックスよりタップエリアが拡大されている</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/858323e540ca4b6eb035a483ad4fe501/checkbox_suumo.png" alt="" width="1017" height="240"></figure><p><strong>アットホーム</strong></p><ul><li>一行全体がタップエリア</li><li>リンクエリアとの境目にラインがあるのでチェックボックスエリアとリンクエリアを認識しやすい</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/1b257901205f4fde8bcaf6b44813f9a8/checkbox_athome.png" alt="" width="1016" height="240"></figure>

<h3 id="h7e77abcf62">🏢 施設・店舗検索サイト</h3><p><strong>ホットペッパービューティー</strong></p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/539c5e6809304040a8422f00ae9c6f01/checkbox_hotpepper.png" alt="" width="1016" height="240"></figure><p><strong>一休.com</strong></p><ul><li>背景色がついているのでタップエリアが明確</li><li>地域は都道府県名の横に選択中の数が表示される</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4aeb0dd1041647a38f03e0af10fa0f52/checkbox_ikyu.png" alt="" width="1016" height="300"></figure><p><strong>楽天トラベル</strong></p><ul><li>チェックボックスとテキストまでタップエリア</li><li>よく検索される条件だけピックアップされたエリアにボタンのようなチェックボックス</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e951d474818b4659b11e3e33b09c72a6/checkbox_rakuten.png" alt="" width="1016" height="220"></figure><h3 id="hec4ab7c7de">👚 ファッションEC</h3><p><strong>ZOZOTOWN</strong></p><ul><li>タップエリア広め</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/c7708a85c4ea4ccf9ba74133b8937915/checkbox_zozo.png" alt="" width="1016" height="240"></figure><p><strong>SHOPLIST</strong></p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/1a14bd5b45354c28a2f1dd8f640a83ba/checkbox_shoplist.png" alt="" width="1016" height="240"></figure>

<h3 id="hb029aebaf1">🏃 求人検索サイト</h3><p><strong>バイトル</strong></p><ul><li>選択中の親要素のテキスト色も変化する</li><li>項目によって選択しやすいデザインになっている（１行にすべての選択肢が収まっている）</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/57b2968819894b2dac1806f205edfdaf/checkbox_baitoru.png" alt="" width="1016" height="240"></figure><p><strong>エンゲージ</strong></p><ul><li>１行にアコーディオンとチェックボックスの両方がある場合、チェックボックスのタップエリアが広め</li><li>アコーディオンの開閉ボタン領域が明確</li><li>選択中のアイコンが表示される</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/ddee7f51f7944aa590fa322c87dace49/checkbox_en-gage.png" alt="" width="1016" height="300"></figure>

<h2 id="ha214098e44">まとめ</h2><p>今回調べたサイトでは「すべて選択」の挙動は同じ結果に。たくさん選択肢があるという理由だけで「すべて選択」の機能を付けるよりも、項目の内容や検索条件によって「すべて選択」するケースがあるのかを検討する必要がある。</p><p>リンクエリアの中にあるチェックボックス、アコーディオンと一体になったチェックボックスの場合、どこまでがチェックボックスに対するタップエリアか明確だと誤操作による意図しないページ遷移が防げる。</p>

チェックボックス「すべて選択」機能があるサイトの有効・無効動作とタップエリアについて調べてみた

<p>このサイトはWebサイト制作のための備忘録ブログです。<br></p><ul><li>Next.js×microCMSの学習のため</li><li>備忘録ブログを使った検証</li><li>学習の記録</li><li>サイト制作に関して思ったこと など</li></ul><p><br>あまり縛りなくゆるめにWebに関連する内容を記録していこうと考えています。<br></p>

<p>このサイトはWebサイト制作のための備忘録ブログです。</p><p><br></p><ul><li>Next.js×microCMSの学習のため</li><li>備忘録ブログを使った検証</li><li>学習の記録</li><li>サイト制作に関して思ったこと など</li></ul><p><br></p><p>あまり縛りなくゆるめにWebに関連する内容を記録していこうと考えています。</p>

841-biborokuWebフロントエンドの備忘録

その他