フォームの構造について解説します。
左はレイヤツリー上でのフォームの階層です。
それを基にして右に平面的なレイヤ構造を描画してみました。
構造自体は見たままですが、知っておくべき大事なポイントをお伝えします。
１. 上図の❶、フォームの「親」である「問い合わせフォーム」レイヤは削除しないでください。
これがないとフォームは一切機能しなくなります。
外枠であり、親であるこの「問い合わせフォーム」レイヤは絶対に削除しないでください。
外形寸法を変更することについては何も問題はありません。
２. 中にある入力フォームや選択フォーム、送信ボタンなどは、❶の「問い合わせフォーム」レイヤに入っていてはじめて機能するものです。従って、外には出さないでください。
外に出さない、というのはデザイン画面上の話ではなく、レイヤツリー構造上、「問い合わせフォーム」レイヤから外に出さないでくださいとの意味です。
２．「問い合わせフォーム」レイヤの子である「フォームの整列板」（上図❷）は編集可能です。
フォームの整列板は、極端な話、簡易板に変えてしまっても問題ありません。
ですが、簡易板にすると整列しなくなるので、普通に考えれば簡易板に変える意味は全くありません。
ただし、整列させずに配置を自由に決めたい、ということであれば、変更してください。
* 実際、どのようなことになるのかやってみましたが、意外な発見をしましたので共有しておきます。
「フォームの整列板」を簡易板に変えて、中にあるレイヤの配置をランダムに変えるだけでなく、
入力フォームや送信ボタンをエフェクトで回転させてみました。
左が初期状態のフォーム、右が整列板を簡易板に変えてバラバラに配置したフォームです。
実際のWebページでは、下図のように表示されます。
このようにメチャクチャな配置をしたにもかかわらず、フォームとして機能することがわかりました。
それぞれの入力フォームに、斜めになりながらも実際に文字入力ができているのが見えるでしょうか。
送信ボタンも普通に押下できますし、メールも送れます。
dpdpについてはかなり深く理解しているつもりでしたが、これには今まで気が付きませんでした。
このツールは、どこまで自由なのだろう、と正直驚いてしまいました。
しかし、実際にこのような崩し方で使いこなせるデザイナーの方は、非常に限られていると思います。
自信があるようなら、デザインとして挑戦してみる価値もあるかもしれません。
以上です。