「要素を移動」を使えば、Webページ上の任意の要素をクリックして物理的に新しい位置へ drag できます。レイアウトの代替案をテストしたり、デザイン変更をプロトタイプしたり、コードを一行も書かずにコンテンツを視覚的に並べ替えたりできます。変更は非破壊的で、ページを更新するとリセットされます。
デザインの議論では「このボタンをフォールドより上に移動したらどうなるか？」や「サイドバーを右に置けばレイアウトが改善されるか？」といった疑問がよく生じます。通常、これらの疑問に答えるにはコードを編集し、再デプロイしてプレビューする必要があります。「要素を移動」はこのプロセス全体を省略します。要素をクリックして drag するだけで確認できます。このツールは要素に CSS の position 変更をリアルタイムで適用し、視覚的な外観を保ちながら自由な再配置を可能にします。アライメントガイドが他の要素やページの端にスナップし、正確な配置を支援します。ゴーストアウトラインが元の位置をマークするため、要素の移動前の位置を常に確認できます。結果が気に入らない場合は、undo で即座に元に戻せます。すべての変更は純粋に視覚的なもので、ブラウザのメモリ上にのみ存在し、ページを更新すると完全に消えます。実際の HTML や CSS ファイルは一切変更されません。
ページ上の任意の要素（ボタン、画像、テキストブロック、カード、ヘッダーなど）をクリックして、新しい位置へ自由に drag できます。要素はカーソルに遅延なくスムーズに追従します。小さなアイコンから全幅セクションまで、あらゆるサイズの要素に対応します。
drag 中、要素が他の要素の端やページの中央に揃うと、破線のアライメントラインが表示されます。水平・垂直のガイドにより、位置を目測することなく一貫したグリッドに要素を配置できます。
要素の元の位置は破線のアウトライン「ゴースト」でマークされるため、移動前の位置を常に確認できます。一目で新しい位置と元の位置を比較できます。
気に入らない移動をしてしまった場合は、undo をクリックすれば要素が前の位置に即座に戻ります。複数の undo ステップをサポートしているため、自由に試行錯誤し、変更を順番に戻せます。
複数の要素を順番に並べ替えられます。各移動は独立しており、undo 可能です。一度に一つの要素ずつレイアウト全体の再配置を積み上げ、累積効果をプレビューできます。
すべての変更はブラウザのレンダリング上にのみ存在します。ページの実際の HTML、CSS、JavaScript ファイルは一切変更されません。ページを更新すると、すべてが元の状態に戻ります。あらゆる Webサイトで安全に使用できます。
CTA ボタンをフォールドより上に置いた方が効果的か？あるいはお客様の声セクションを料金表の前に配置すべきか？要素を移動してさまざまなレイアウトをプレビューし、コード変更にコミットする前に十分な情報に基づいた意思決定を行えます。
ライブのクライアント通話中に、要素を drag してレイアウトオプションをリアルタイムで探れます。「ヒーロー画像は左右どちらがお好みですか？」が口頭での議論ではなく、ライブデモになります。
既存ページの要素を並べ替えて、新しいデザインの方向性をプロトタイプします。Live Text Editor でコンテンツを変更し、「要素を移動」で位置を変更することで、コードに一切触れずにビジュアルプロトタイプを作成できます。
要素が予期せず重なっている場合、一方を drag してどかすことで背後にあるものを確認できます。背後にあるものを素早く確認したいだけのときは、DevTools で z-index の値を変更するより速いことがよくあります。
視覚的な要素を期待されるタブ順序に合わせて移動します。視覚的なレイアウトが論理的な読み取り順序と一致しない場合、スクリーンリーダーとキーボードナビゲーションが視覚的なプレゼンテーションと一致しない潜在的なアクセシビリティの問題が明らかになります。
DevSuite Pro のフローティングドックを開き、「要素を移動」アイコンをクリックします。カーソルが移動アイコンに変わり、ツールがアクティブになって要素の選択が可能になります。
移動したい要素をクリックします。選択されると紫色のボーダーでハイライトされます。ゴーストアウトラインが現在の位置をマークします。
選択した要素をクリックしたまま、目的の位置へ drag します。他の要素の端やページ中央に近づくとアライメントガイドが表示されます。
マウスを放して要素を新しい位置にドロップします。ゴーストアウトラインと比較してください。必要に応じて undo を使用するか、別の要素を選択して並べ替えを続けます。
試行が完了したら、ページを更新してすべての要素を元の位置に戻します。すべての移動は完全に消去されます。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
