デザインが1枚づつ・コーディングが混乱します

質問

会社でスマートフォンコーディングをやっています。

仕事の流れに、美しいコーディングができなくて困っています。

（仕事の流れ）
デザインは一枚づつ渡されます。
それをコーディングし、システムの方に渡します。
しかし作ったデザインパーツは4日に1回ほどのペースでしょっちゅう変更になります。

・困るケースとしては、
Aというパーツを作ります。

数日後に渡されたデザインを見ると、Aというパーツの拡張バージョンBパーツでした。
しかし、Bに対応するにはAの構造を少し複雑にする必要があります。

その後、Cパーツのデザインを渡されました。
これも同様にAというパーツとBパーツの構造を変更すれば何とか、対応できるものでした。

たった５０ページ制作するだけなのに、修正の多さと仕事の流れのために、
２００ページ以上コーディングしたボリュームを感じています。

また、修正が多いために、ソースも規則性を外れたものが出てきました。
おかげで私は使えない人間呼ばわりです。

何か先輩方のアドバイスを頂けないでしょうか？

回答No.2

ORUKA1951 · ベストアンサー

No.1です。
　大変深刻な状況だということは理解できますが、解決策となると当事者でない、また貴社内の事情を知らない私ではアドバイスは難しいです。
　そのうえで、的外れかもしれませんが。

　まず、あなたの補足にある「最終的には使わないクラスなどが増えてしまい」は重要なキーワードだと思います。また、あなたの分担がどの部分かも想像できます。
　あなた以外へのアドバイスをここでしても始まらないので、対象はあなたになります。

　HTML4.01では、class名について『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と書かれています。
　これはあまりに抽象的でW3Cの思いと裏腹に、文書構造を示さないclass名があふれる事態にになりました。いわゆるデザインのためのclass名です。
　その反省から、HTML5では文書構造を示す要素としてheader, section, footer, article, aside, figure, nav, markなどが追加されDIVに関しては、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-div-element )］より
　・・・著者は、他に適切な要素がないときなど、最後の手段の要素としてdiv 要素を使用することが強く推奨されます。より適切な要素があるのに div 要素を使うと、・・・【中略】・・・、著者にとってもメンテナンス性が落ちてしまいます。

　すなわち、HTML4.01(XHTML1.0,XHTML1.1)であっても、class名にheader, section, footer, article, aside, figure, nav, markくらいで収めてあれば、「最終的には使わないクラスなどが増えてしまい」ということにはならないはずです。
　先の参考サイトのソースは確かそうなっていたはずです。

　また、きちんとした雛形を作成することをお勧めします。通常のサイトでしたら内容的には
・トップページ及び各カテゴリーのトップページ
・企業情報、新着情報、プライバシーポリシーなど事務的なページ
・コンテンツページ
・問合せ、FAQ
の数種類に分類されるはずです。
　その分だけ、きちんとマークアップされたHTML(デザインの無い)を雛形として確定することが先決です。その時点でclass名などは固定されます。idはリンクの関係があり流動的です。また、これがないとシステム開発はできないはずです。

　以上は技術的なアドバイスです。

　期待されている(と思われる)作業全体についてのアドバイスは不可能ですが、

　期待が大きすぎて対応し切れていない部分が見受けられます。きちんと自分の可能な作業範囲、厳しい言い方かもしれませんが--能力を示して皆さんの協力を仰ぐのがよいのではないかと思います。ぼろ糞に言われても仕方ないのです。
　それを言われるということは、あなたには成長の見込みがあるからなのです。あなたに期待してなければ、とうにお払い箱です。期待されているからこその要求なのです。

　大事なことは、あなたに限らず、お互いの能力を正確に評価して足りないところを補い合う・・・それしか方策は無いのです。

　頑張ってください。

お礼

ORUKA1951さん

ここまで詳しい説明と、解決策を頂き心より感謝しております。

当事者の問題まで的確に推測して頂き、その上でさらにHTML4からHTML5への説明など
本当に感謝しております。

＞期待が大きすぎて対応し切れていない部分が見受けられます。
まさにそうです。
周りの理解度と、自分の理解度はかみ合ってないと最近実感してきたばかりですｗ
またCSSとHTMLの最低限を周りは理解しているものと思い込んできた事が一つの原因だと
感じています。

＞大事なことは、あなたに限らず、お互いの能力を正確に評価して足りないところを補い合う・・・それしか方策は無いのです。

ORUKA1951さんの言葉を頂き、自信を持って、CSSの理解と製作フローの改善を
会社全体（デザイナー・プログラマー）に伝えていく自信が持てました。
これを良い経験に生かしていくことが今できる最善の行動ですよね。

ORUKA1951さんの言葉で社内全員が幸せになるとうに取り組みたいと思います。

改めて、感謝申し上げます。

回答No.1

ORUKA1951

それは作業手順そのものと、それぞれの担当者に原因があります。
・作業手順
　スタイルシートに製作に入る前にデザインは確定しておきます。
　1) HTMLの文書構造を決定します。
　2) それを元にデザインを決定します。
　3) スタイルシートを作成します。
　※基本的に一方通行で元には戻りません。
・責任の所在が不明
　1) HTML、CSSについて詳しい人が統括責任者になります。
　　　HTMLとCSSの担当者が異なる場合はHTML製作者が統括責任者になります。
　　　統括責任者が全体の流れを指揮します。
・能力不足
　1) HTMLのコーディングがしっかりできていない。
　　HTMLのコーディング/マークアップができていれば、HTML自体は触る必要がないはずです。
　　また、デザインはそれを元に指定しやすくなります。
　2) デザイナーがウェブページの作業を理解していない。
　　　ウェブページはDTPなどのデザインとはまったく異なるものです。ウェブページは、
　　様々な端末から利用されることを想定しています。
　【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　　　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという
　　方針の下に開発されている。例えば、様々な解像度や色深度のグラフィック
　　ディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域
　　が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML[HTMLの略歴]( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　　これを知らないデザイナーにHTML/CSS製作者は悩まされ、足を引っ張られます。そのために統括責任者はHTML/CSS側でないとならないのです。
　3) スタイルシート製作はHTMLの文書構造にしたがって、デザイナーの作成したデザインに合わせていきます。その際にウェブの世界で無理なこと、してはならないこと(特にWAI/WCAG)については論理立てて説得できることが必要です。--当然その知識が必要です。--

　まあ、基本的にはHTMLがきちんとできていればデザインの自由度は高いはずです。ただ、デザインが確定するまでに手をつけると大変なことになります。

　それであっても、
・デザインが確定してからデザインに取り掛かること、
　　確定後の変更は一切受け付けないと宣言する必要があります。--統括責任者の仕事ですが---

★たった５０ページ制作するだけなのに、修正の多さと仕事の流れのために、
　これはおかしいのでは、ページ数がいくら多くてもスタイルシートは多くて数枚です。
　固定スタイルシートと、screen用、場合によったらmediaqueryを利用したスマホ用です。ページ数には無関係のはずです。

補足

理にかなったご意見、大変感銘を受けました！

＞基本的にはHTMLがきちんとできていればデザインの自由度は高いはずです。ただ、デザインが確定するまでに手をつけると大変なことになります。

現状、システムと企画とデザインが同時進行に進んでいるため、「仮の段階でも、それが確定になるかも！しれないので作ってください」と言われます。エンジニアはその仮の段階のものをベースにプログラムを構築しています。

私としては、ORUKA1951さんの言うとうりの制作方法でやりたいのですが・・

＞　それであっても、
・デザインが確定してからデザインに取り掛かること、
　　確定後の変更は一切受け付けないと宣言する必要があります。--統括責任者の仕事です

↑の内容を一度説明したことがありますが、「デザインの変更はこれまでもあったし、当然だ」と押し切られてしまいます・・

結果
最終的には使わないクラスなどが増えてしまい、批判を浴びております笑
当然できあった段階のものを他の方が見れば
「ここって使い回しできるのに何故しなかった？！」
「これもっと省略できるよね！」

などなど、指摘を受け現状です。

もちろん自分はできるだけシンプルなCSS・HTMLで管理面も含めて作りたい気持ちは十二分にあるのに叶いません。

今一度現状打破、アドバイスをお願いします。
ほんとに切実です・・・・。