動的出力を考慮に入れたHTML・CSSの作成について - ホームページ・Web制作 - 専門家プロファイル

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

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

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

デザインされた1枚のPSDファイルなどから、HTMLを作成する仕事をしています。
以前はHTMLを組み終わったら、簡単な文言の修正などを経て公開サーバーにアップロードして終了、ということが多かったのですが、ここ最近は私の作ったHTMLをPHPなどのプログラムから出力し、ブラウザに表示させるという案件が増えています。
その中で、CMSなどで作られた文書の量が多かったり、ループの回数の違いで表示に崩れが発生して手直しが発生したり、文字を画像に変換したりなどの大幅な構成変更が発生して業務が滞ることが多くなってきました。
そこで質問なのですが、動的出力を考慮したHTML・CSS作成のコツというのはあるものなのでしょうか?

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

回答:6件

小坂 淳 専門家

小坂 淳
ウェブ解析士マスター

- good

CMSの仕様理解

2009/05/21 18:39 詳細リンク
(2.0)

環の小坂です。

CMSの仕様によるので、コツというのはなんともいえませんが、
二つの選択肢があると思います。

・開発環境を用意してもらう、実験できるようにする。
(こうすればルールがわかるので、やりやすいです。)
・大幅な工数変更を踏まえたスケジュール価格設定にする。

オープンソースなどであれば、開発環境を用意できると思いますが、
何らかの事情で用意することが不可能な場合は
システム会社に用意していただく必要があります。

確かにドキュメントもなく、クライアントもわからないまま
納品というケースは時々あります。

あえてコツというと
・HTMLの中にPHPを組み込むパターン
・パーツで分割しそれを呼び出すパターン
の二つがあるので、せめてそこだけでもわかれば、
やりやすくなるとは思います。

評価・お礼

かなりもりだくさん

ありがとうございます。
スケジュールを決めるというのは私には無理ですが、手直しが入るのを含めて、作業見積もりの意見を出してみようかと思います。

回答専門家

小坂 淳
小坂 淳
(東京都 / ウェブ解析士マスター)
株式会社環 代表取締役 社長
03-6892-3080
※お電話の際は「"プロファイル"を見た」とお伝え下さい。

お客様と一緒にウェブサイトの効果を高めていきます。

創業以来、「使いやすいウェブサイト」「PDCAサイクルを回し、常に向上するウェブサイト」を提案しています。アクセス解析、効果測定で問題点や改善点を発見し、ウェブサイトの集客・売上アップを支援するウェブ解析士(webアナリスト)として活動します!

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。
志水 雅眉 専門家

志水 雅眉
Webプロデューサー

- good

a-blog cmsがお勧めです。

2009/05/21 20:04 詳細リンク
(2.0)

a-blog cmsがお勧めです。
a-blog cmsなら静的なページはシステムがそのまま表示し、簡単に更新したいというコンテンツのみCMSに必要な記述をすることで、部分的なCMS導入が可能です。
つまり、静的にページを全部つくりあげた後でも更新したい箇所だけCMS導入が可能です。
もっと行ってしまえば、すでに静的でつくられたサイトをそのまま指定のフォルダーに入れるだけでテンプレートとして機能しますので、後は更新したい箇所だけCMS導入もできます。

デザイナーにとても優しいCMSで、ルール機能を使えばページごとに自由にCMSを導入できます。
まだβ版ですが、一度お試しください。

きっと、これまでの苦労が解消される筈です。

評価・お礼

かなりもりだくさん

ありがとうございます。
試してみて、検討の対象に入れてもらおうか判断したいと思います。

回答専門家

志水 雅眉
志水 雅眉
(Webプロデューサー)
コンテンツ庵 クリエイティブ・プロデューサー

効果的なコミュニケーションのために先進性あるコンテンツを企画

世の中よりも少し先行くエンターテイメント性の高い企画に自信があります。企業ブランディングの過程には、ワクワクする仕掛けや表現が必要となります。ゲームや動画などだけでなく、新しい仕掛けをご提供いたします。

谷口 浩一

谷口 浩一
Webプロデューサー

- good

効率化するのが難しい作業です

2009/05/22 15:21 詳細リンク
(3.0)

手でコーディングする限り、こうした問題を根本的に解決するのは難しいんですよ。


こんにちは。
チームデルタの谷口です。


デザイン性の高いページを動的に生成するとなると、デザイナー、コーダー、プログラマーが連携なんてことになりますよね。

コーダーさんの、こうした苦労を取り除くためには、システム側との事前のコミュニケーションを充実させるしかないでしょうね。
ループで生成する情報ブロックの明示と、表示エレメントの最小と最大をシステム側が事前に示すとかね。
また、経験を基に、あなたからも、そういう可変的に生成される可能性の見える個所については、事前に確認しておくとか。

作業プロセスをあなたがコントロールできるなら、CMS入れてWYSIWYGエディタで作成、ってことにすれば、何かにつけ都合がいいんでしょうけど、そうもいかないですよね。

Webコンテンツの制作に関わる場合、クリエイティブワークからシステム開発ワークの間を幅広く横断できるスキルの持ち主が何かと重宝される傾向にあります。
自分の作成したHTMLをPerlやPHPで吐かせるのは、決して難しいことではないので、この際、CGIを含め、プログラミングを学んでみてはいかがですか?


ご参考になれば幸いです。


成功するWeb戦略とホームページ制作のチームデルタ
谷口浩一

評価・お礼

かなりもりだくさん

ありがとうございます。
プログラミングを学べば自分でそのあたりを制御できるようになれるのかとは思いますが、その領域まで手をつけてしまうと、元々の自分の作業をこなせるかに影響が出てしまいそうです。
「どう作るか」を事前に決めておけば、確かに手戻りが少なくなりそうですね。作業ばかりではなく、もう少しコミュニケーションを充実させてみようかと思います。


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

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.ページ内に入る動的要素の最大値と最小値を考える
という観点では私もデザインの人も見ていなかったと思います。
参考にして、これから考慮に入れて作業ができればと思います。


事前打ち合わせと柔軟なコーディング

2009/05/22 22:38 詳細リンク
(4.0)

ビーワイズの文です。
こんばんは。

参考程度に・・・


基本的に、CMSなどを組み込む際には、事前にプログラマーと打ち合わせを
行う必要があります。ですから、事前準備が作業のコツです。

現状作業の中で、プログラマーの方とコミュニケーションをとる体制はない
のでしょうか?




以下は、今後の参考とお考えください。

重要なのは
1.どの部分を更新するのか
2.どのように更新されればよいのか
以上の2点です。


以下に2例を挙げておきます。


【1.新着情報を更新する】
更新箇所が「日付」と「内容」など1項目に複数の情報がある場合には
<p>で作るのではなく
<table>や<dl>などを使用し、「日付」「内容」がわけられるブロックで
コーディングを行っておく


【2.画像を並べる】
また、「画像を横列に自動生成で並べ、ある一定の幅になれば下段に移動する」
などの
レイアウトの際には、画像を<div>でくくり、floatで記述する。
(自動生成で<td>を生成するケースもありますので一概には言えませんが・・・)



「動的出力を考慮したHTML・CSS作成のコツ」とまでは一概には言えませんが

・widthは指定する
・heightは指定しない
・各情報を<div>などのブロックで囲っておく

この3点を抑えておくのが良いかと思います。

評価・お礼

かなりもりだくさん

ありがとうございます。
やはり、事前作業がコツ、ということのようですね。
意味ごと、構成ごとにきっちりDIVなどで定義しておくのは重要そうです。


動的、静的でHTML、CSS設計に違いはありません

2009/05/23 10:23 詳細リンク
(3.0)

動的であれ、静的であれ基本的にhtmlの設計の考え方に違いはありません

Webサイトというのはほとんどが複数のページで構成されるもので、と考えると(ものすごく簡単にいってしまうと)htmlとスタイルシートの設計、テンプレートの作成〜ページの量産というプロセスになるかと思います。そのページの量産という工程の手法が、CMSであったり、MovableTypeであったり、Dreamweaverのテンプレート(ライブラリやスニペット)であったり、そして人の手であったりするだけです。なので、ページが生成される手法がどんなものでも文書構造とスタイルシートを設計する段階で特に変わりはないというのが私の答えです。

>デザインされた1枚のPSDファイルなどから

これは、画面単位のPSDファイルだったりしませんか?

マークアップする前に、まずデザイナさんからもらったPSDファイルをよく見て、画面単位ではなく、エレメント単位に分類、まとめることが重要です。そこから、レイアウトパターンの分類と、ブロックに入る要素の分類が把握できたらOKです。そうすることによって、モジュール的というかコンポーネント的な考え方ができるようになり、htmlの文書構造やスタイルシートの設計がしやすくなります。

>CMSなどで作られた文書の量が多かったり、ループの回数の違いで表示に崩れが発生して手直しが発生したり

これはCMSだからこの結果、というのではなくその人が手で(多い文書を入れる)作業をしたとしても同じことだと思います。なので設計においては、およその文書量がどのくらいかと情報を得ておくことも必要だったりもしますね。

株式会社コスモインタラクティブ
野田郁也

評価・お礼

かなりもりだくさん

ありがとうございます。
1枚単位ではなく、全体を考えて設計をしたほうが良い、ということですね。
ちょうど1枚の中では成り立っていたものが、プログラムから出力されるものになったらおかしなものとなってしまっていたので、考え方の参考にしたいと思います。

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

この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件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

ホームページ(SEO対策)診断

貴社ホームページのSEO対策を診断します

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

その他サービス 格安ホームページ制作
中沢 伸之
(Webプロデューサー)