webのレイアウト

質問

webのレイアウトで教えていただきたいのですが
例えば、申し込み記入ページで
（A）記入漏れ時の言葉を想定したレイアウト（記入欄の下が少し空白）
（A2）エラー時
（B）記入漏れ時の言葉を入れないレイアウト

フォトショップでデザインし、その後は外注へコーディング作業していただきます

こんな場合、入力画面のレイアウトは、（A）と(B)どちらがコーディング作業がらくなのでしょうか？
レイアウトする側からすると基本レイアウトは（A）でエラー時は（A2）だと楽なのですが・・
やはり基本は（A）で、エラー時は（B）なのでしょうか？

回答No.1

LimeGreen5 · ベストアンサー

＞（A）と(B)どちらがコーディング作業がらくなのでしょうか？

どちらも変わりません。

むしろAのレイアウトが出てきたら「やだなあ」とか思います。

ステージングでクライアントが「ヘン」って言ったら修正まっしぐらですし、そもそもそのアキがなんなのか迷いながらコーディングすることになるので。

＞レイアウトする側からすると基本レイアウトは（A）でエラー時は（A2）だと楽なのですが・・

そりゃそうですよね。
ただ、その画面を見た人は「デザインが下手だ」って言いますし、コーダーやディレクターは「デザイナーの手抜き」って言うと思います。

Aの何がまずいかというと、今はエラーメッセージが1つで、文字数が決まっているからいいんですが、エラーメッセージが3つとか出るケースって発生することがあります。

そうなると基本レイアウトで用意した下側のアキが意味をなさなくなるわけです。仕様変更にも対応できなくなる。

エラーメッセージのブロックを表示する際に、その上下にCSSでマージン指定すれば余白が確保できますから、余白をどれだけとればいいのかがプロトタイプで示されていればOKなわけで。

確かにPhotoshopではエラーメッセージ分の余白を取っておいた方が効率的だというのはわかります。

だけどクライアントに見せて「このアキ、ヘンだよなあオイ」って指摘されたときの営業さんの気持ち、わかってほしいなあとも思いますね。

営業さんに「ツッコミどころ満載」のデザインを見せるのは、デザイナーとしては悪手です。モメごとの火種でしかないと思っています。

なのでBが基本でA2がエラー表示時、というふうに考えています。

お礼

確かにおっしゃる通りですね。
AもBも作業的に同じなのですね
勉強になります。

回答No.3

AsarKingChang

レスポンステスト←ミス！
レスポンシブ＾＾

回答No.2

AsarKingChang

>こんな場合、入力画面のレイアウトは、（A）と(B)どちらがコーディング作業がらくなのでしょうか？
んまー当然、サイズが「最大になっている状態」での
コーディングの方が楽でしょうね。
A+A2がdisplay:noneのスタイルで
A+Bはvisibility:hiddenのスタイルって意味ですよね？
だとすると、「visibility:hidden」の方が楽でしょうね。
出てない状態でもサイズは維持されるので、
レスポンステストが終わったら、ON/OFFするだけですから。
逆に、display:noneこっちは、blockの状態と2回テスト必要です。
しかも、表示条件が多ければその数テストするしかなくなります。

ただま～display:noneしつつ、親要素で、height指定するよりは、
「visibility:hidden」の方が、レイアウトはしやすいですが、
「表示する必要がない状態」の時、意味不明な空白が
気に入らない？ってケースもあるので、
サイトによっては、オーバーレイ
position relative+
position absolute+{left/top/right/bottomへのオフセット}+zindexで
出ても出なくても、デザインが変わらないように！
というやり方もありますね。

お礼

ありがとうございます
やはり意味不明な空白はまずいですね
貴重なご意見ありがとうございます