Wix Studio フォームの「DOM順序」、見落としていませんか？

こんにちは！

Wix専門のWeb制作会社 合同会社アクトワン代表 和田英也です！

弊社ではWixクリエイター同士が繋がれる有料オンラインサロン(月額330円)、Wix Tech Salonを運営しています。

サロン内では弊社が日々、Wix制作で気づいた情報などをシェアしております。

今回は非公開にしているFacebookグループにて、有料会員様のみに配信している投稿から、好評だったWixフォーム 入力欄 DOM順序についての記事を公開致します！

Wixフォームの「DOM順序」

Wix Studioでフォームを設置したとき、タブキーで項目を移動するときに順番がバラバラになること、ありませんか？

「上から順に入力してるのに、タブ押したらいきなり最後の項目に飛んだ！」これ、実はDOM（Document Object Model）順序が影響しています。

DOM順序とは？

DOM順序とは、ページ内で要素が実際に読み込まれる順番のことを指します。

Wixなどのビジュアルエディターでは、見た目上は項目が上からきれいに並んでいても、DOM上の並びがバラバラになっていることがあります。

たとえばフォームの場合、このDOM順序が「キーボード操作（タブ移動など）」の動きに直結します。

順番が乱れていると、ユーザーがスムーズに入力できず、違和感やストレスを感じる原因になります。

そしてもう一つ大事なのが、アクセシビリティの観点。

• 視覚障がい者の方が使うスクリーンリーダーは、このDOM順序に従って読み上げを行います。

• キーボードだけで操作するユーザーにとっては、自然な流れで操作できることがとても重要です。

  
  

つまり、DOM順序が整っていないと、見た目では気づかないけれど、多くの人にとって“使いづらいサイト”になってしまうのです。

特にWix Studioなどノーコード制作環境では、デザインが自由な分、DOM順序の意識が抜けがちです。

フォームを作ったら、「見た目通りに操作できるか？」をタブキーで必ずチェックしてみましょう。

DOM順序を手動で調整する方法（Wix Studio）

以下の手順で、WixフォームのDOM順序を正しく整えることができます。

1. Wix Studioエディタにアクセス

2. 左側のメニューから「レイヤー」パネルを開く

3. フォーム内の各入力フィールドを確認

4. 各要素をドラッグ＆ドロップで、上から順になるように並べ替える

   
   

   

   
   

これで、タブキーでの移動順も自然な流れになり、ユーザーの操作性が大きく改善されます。

まとめ

フォームのDOM順序は、小さなようで実は大きなUX（ユーザー体験）改善ポイントです。Wixでフォームを作るときは、見た目だけでなく、DOM順序もセットで確認するクセをつけておくと安心です！

Wix Tech Salon

アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！

Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。ご興味がある方はぜひ覗いてみてください!

Wix Tech Salon >>