システムの動きを想定して作ります - 専門家回答 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

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

2009/05/21 19:11
(
4.0
)

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

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

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

デザインされた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>
こうすることにより、更新情報という入れ物の高さは変化しますが、ブロックは保持されるので崩れることがありません。

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

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

評価・お礼

かなりもりだく さん

ありがとうございます。
階層を深くしたりして、部品ごとの仕分けを明確に行うと良いというのは参考になりました。
デザインをする方も動的生成を考慮に入れてはいると思うのですが、
>3.ページ内に入る動的要素の最大値と最小値を考える
という観点では私もデザインの人も見ていなかったと思います。
参考にして、これから考慮に入れて作業ができればと思います。

(現在のポイント:-pt このQ&Aは、役に立った!

この回答の相談

動的出力を考慮に入れたHTML・CSSの作成について

法人・ビジネス ホームページ・Web制作 2009/05/21 18:21

デザインされた1枚のPSDファイルなどから、HTMLを作成する仕事をしています。
以前はHTMLを組み終わったら、簡単な文言の修正などを経て公開サーバーにアップロードして終了、という… [続きを読む]

かなりもりだくさん (東京都/26歳/男性)

このQ&Aの回答

CMSの仕様理解 小坂 淳(ITコンサルタント) 2009/05/21 18:39
a-blog cmsがお勧めです。 志水 雅眉(Webプロデューサー) 2009/05/21 20:04
効率化するのが難しい作業です 谷口 浩一(Webプロデューサー) 2009/05/22 15:21

このQ&Aに類似したQ&A

フリーでやっていける条件って。 mikoriさん  2011-10-27 22:08 回答3件
Amebaブログのデザイン変更について tcnさん  2013-10-04 08:51 回答1件
Web制作を請負う際に使用するフリープログラム kimidoriさん  2009-12-14 23:50 回答5件