システムの動きを想定して作ります

初めまして、マジック・プロジェクト　海岸です。

ご質問の件ですが、コツというのは難しいですね。

まず、動的生成をある程度考慮したデザインというのもありますので、
私の仕事の場合、そのデザイン表現が動的生成に向かない場合、
デザイナーに修正をかける場合もあります。

デザインされたPSDファイルを見てダメな場合は
その場でダメと言ってしまいます。
なので、あまり参考にならないかもしれませんが……。

私の場合、以下のことを考えながら作業します。

1.ページのどの部分が動的に変化するかを考える

2.動的に変化する部分に同じ要素が繰り返されるどうかを考える

3.ページ内に入る動的要素の最大値と最小値を考える

4.各要素をブロックにして組む。

もう少し、具体的に説明しますと、

例えば、更新情報を表示するブロックを想定します。

<div>
<h3>新商品●●●が入荷しました</h3>
<p>皆さん待望の△△△の最新機種●●●が入荷しました。数量限定ですお早めに!</p>
</div>

上記が更新情報の1トピックスの構成要素とします。
プログラムでは、これをトピックスの数分、繰り返し出力するわけです。

で更新情報全体のブロックとしてまとめてしまいます。

<div id="whatsnew">
<div>
<h3>新商品●●●が入荷しました</h3>
<p>皆さん待望の△△△の最新機種●●●が入荷しました。</p>
</div>
<div>
<h3>●●●が限定入荷しました</h3>
<p>●●●が入荷しました。数量限定ですお早めに!</p>
</div>
</div>
こうすることにより、更新情報という入れ物の高さは変化しますが、ブロックは保持されるので崩れることがありません。

以上、参考になれば幸いです。

──────────────────────────────
ホームページ制作・システム開発のマジック・プロジェクト
海岸秀憲