古いHTMLサイトと、新しいスマートフォン用サイトの共存

ウェブデザイナーで、プログラマーと対立して困っています。

１０年前に作ったウェブサイトがまだうまく機能していて、しかしスマートフォンの普及により、スマートフォン専用のサイトを追加で作ることを依頼されました。

デザイン的には、新旧に共通言語を使い問題なく共存できるのですが、プログラミング上で、古いHTMLサイトをそのまま利用しつつ新しいスマートフォン専用サイトを作るのに、どんな問題があるのでしょうか？

質問者からの補足コメント

• 丁寧な答え、感謝します。
  
  まず、何が対立しているかというと、プログラマーは、モバイルファーストを掲げ、この際古いHTMLサイトをレスポンシブルなりに新しくするべきだとして、もう勝手に進めています笑。
  
  HTMLサイトはテーブルで作ってあって、スマートフォンで見ると崩れてしまっているから、早急に専用サイトを作りたいという背景があって、そろそろHTMLサイトも更新する時期に来ているとは思いますが、
  
  · デザイン的には10年後に見ても古びた感じが全くせず、
  · 依頼主の業種は、頻繁にアップデートしなくてはならないものでもなく
  · タブレットで見ても問題ないし
  · ずいぶん納期も押してるし
  
  とりあえずスマートフォン専用サイト作らね？　その後、話し合いの上、古いHTMLサイトを新しくするかどうかを話し合うべき、というのが私の見解です。

  No.1の回答に寄せられた補足コメントです。 補足日時：2015/04/16 03:46

• とても有益な意見、ありがとうございます。
  
  お互いがプロフェッショナルなら口出しすべきでない、とは、面白い意見だと思いました。クリエィテブ部署とプログラミング部署が対立するのは、よくあることで、不可避だと思っていたからです。実際私の経験はいつも、あの分からず屋のプログラマーをどう説得してくれよう、という戦いでした。
  
  二つ目のご指摘、１０年前のサイトを使っていること自体が問題では？については、例えば、自分の古い車を修理工場にだして、ナビゲーションシステムをインストールするように頼んだところ、メカニックが良かれと思って勝手にスマートカーにされてしまったようなものでは？
  
  ＞別途モバイル版だけを別URL（サブドメイン、またはサブディレクトリ内）で新規で作ればいいだけではないんでしょうか。
  
  それがベストのように思いますが、プログラマーは譲りません。この分からず屋w！

  No.2の回答に寄せられた補足コメントです。 補足日時：2015/04/16 04:09

• 再三のお返事、ありがとうございました。残念ながら、おっしゃることは観念的すぎてよく分かりませんし、私がお聞きしている問題の結論や提案がどこにあるのかも、私にはちょっと探し出せませんが、貴方のウェブに対する見識とビジョンには敬服します。
  
  > 　ウェブの世界では、パンフレットや衣服とは異なる世界なのです。どちらがウェブとして優れているのか・・
  
  ウェブの世界ではなく、ウェブがある世界、つまり人間同士が世界中で大量の情報をやり取りすることによって栄える時代には、色々な技術が必要とされます。ビジュアル、バーバルコミニケーション能力や、マネージメント能力、人間工学、ヒューマンファクター、心理学、人類学など、数え切れないファクターが、ウェブの存在、ありかた、方向性に影響を及ぼすはずで、現実の成熟社会のように多様性がありながら統制がとれている形に、ウェブは向かっていくのではないかと思っています。

  No.4の回答に寄せられた補足コメントです。 補足日時：2015/04/17 00:35

No.5 ベストアンサー 回答者： ORUKA1951 回答日時： 2015/04/17 19:10

＞残念ながら、おっしゃることは観念的すぎてよく分かりませんし、私がお聞きしている問題の結論や提案がどこにあるのかも、

　それは、先に
★ 必要なページから、レスポンシブでないにしても、リキッドでユーザの環境に依存せずに利用できるページに改訂していく。
　と回答しました。詳しく説明すると
『新しい内容のページはリキッドでユーザの環境に依存せずに利用できるページで製作し、既存のページは必要なページから順次改訂していく』
　が最も現実的で効率的でしょう。

　仕事としてウェブの世界に携わっているのでしたら、仕様書は頭に入っているはずですが、ここをご覧になっている、そうでない方にもと根拠は示してきました。
　私は、個人で関わり始めて20年弱ですが、新しい仕様が議論されている状況から、議論をウォッチするようにしています。
　それは、結論である仕様書だけでは、なぜそのような改訂されるかがわからないからです。その目的や理由がわかっていないと、現実の問題にぶつかった時に対処できないからです。数学や理科と同じですね。

＞ウェブの世界ではなく、ウェブがある世界、つまり人間同士が世界中で大量の情報をやり取りすることによって栄える時代には、色々な技術が必要とされます。・・・ウェブは向かっていくのではないかと思っています。

　まさにHTML3.2の時代に、それによる悪影響という重大問題が起きたのです。
　HTML誕生の参考にされたSGML(1986年)に立ち返ろう。
Standard Generalized Markup Language/背景 - Wikipedia( http://ja.wikipedia.org/wiki/Standard_Generalize … )

　⇒14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　に書かれている問題点、まずそこから。
　『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 』

　できるところから、必要なところからで良いです。
「実際私の経験はいつも、あの分からず屋のプログラマーをどう説得してくれよう、という戦いでした。」
　わからず屋は、貴方かもしれないのですよ。
　　一歩下がって、見直してみることも必要です。悩んだときは仕様書を最初から読み返してみる。そしたら、理由や根拠を示して説得もできるでしょう。

No.4 回答者： ORUKA1951 回答日時： 2015/04/16 16:07

No.3です。

＞なるほど、つまり、時代の流れにあったものに変えていく必要があるというご意見、と理解していいのでしょうか。もしそういう趣旨のご意見ならもっともだと思います。

　いえ、まったく逆です。ウェブは元々は、様々に機種が接続されているネットワークで利用するために発達してきました。再度「HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」「スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」を読み返してください。
　読まれていたらそのように理解されないはずです。
　HTML2.0以降、主犯はIEとNetscapeですが、各ブラウザは独自仕様でユーザーの取り込みを図りました。それは結果的に「Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少する」という強い危機感で、ウェブの創始者であるティム・バーナーズ＝リー( https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%A3 … )が旗振りして、HTML4.01が作られたのですよ。
★時代の流れにあったもの
ではなく、時代によって変わらない世界に戻そう。

＞スマートフォン専用サイトを作ることの誤りのくだり、参考になりました。
　これも同じ根っこ

＞昨今の、洗練はされてきているが無個性で前戯のないセックスのようなウェブプラットフォーム体験までを眺めると、
　ウェブの世界では、パンフレットや衣服とは異なる世界なのです。どちらがウェブとして優れているのか・・
　異なるページに行くたびに、扱い方がガラッと変わるのは・・

＞やはり古すぎるメカニックは淘汰されていくべきなのかな、と思い始めました。
　いえ、一種の復古・・

　よく例にあげさせていただいているのですが
ナビゲーションリストを様々にデザインしてみよう。( http://ichiya.com/WebService/Howto/sample/HTML/n … )
　ソースを見るとHTMLはとても率直で検索エンジンにも判りやすい。スマホ用ではないですがディスプレイサイズに依存しません。Ctrl + +、Ctrl + - で解像度を変えたりウィンドウサイズを変更してみる。
　そして、ブラウザの表示メニューからスタイルシートへ進み、色々なスタイルに変更してみる。
　さらには印刷プレビューで印刷状態を確認してみる。
「構造とプレゼンテーションの分離」がされていますから、以前のtableでデザインするものと異なり
・HTMLのメンテナンスがきわめて容易--誰でも交代できる。
・デザインの自由度が高いが、自由に変更ができ、しかもデザインの変更でHTMLは弄らなくて良い
　当然ですが、mediaqueryを追加してレスポンシブ機能を追加できます。

　広い意味でウェブデザイナーは文書構造のマークアップも含みますが、今後はスタイルシートの製作に特化していくかもしれませんね。

No.3 回答者： ORUKA1951 回答日時： 2015/04/16 08:35

問題と対立点はわかりました。

整理すると
[原因]
＞HTMLサイトはテーブルで作ってあって、スマートフォンで見ると崩れてしまっている
　多分１５年以上前のページだと思います。私の個人サイトもその当時のものにはいくつかtableがあります。
・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　などと強くtableは否定されている。
　15年(1999年の勧告の前後)より新しいページは、さすがにtableは皆無です。
　それは必要なければそのままでも良いです。毛筆で書かれた古文書とでも思っていてよい。

[対処]
＞とりあえずスマートフォン専用サイト作
　これは、tableでデザインすると同様に誤った対策ですね。
　これが誤った対処法だという事は、ウェブデザイナーは無論知っていますが、プログラマーも異論はないと思います。
　なぜなら・・
》HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
》HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。(上記と同じ)
》文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　を上げるまでもなく、同じ内容のページを複数のURLで作成してはならないというSEOとも関わります。

★ 必要なページから、レスポンシブでないにしても、リキッドでユーザの環境に依存せずに利用できるページに改訂していく。
　これを共通認識にしてください。
　レスポンシブは、ディスプレイの幅によって適用するスタイル自体を変える方法ですが、それ以前にリキッドで作成されていることが大前提です。
　@media only screen and (min-device-width: 760px) and (max-device-width: 1000px){}

＞１０年前のサイトを使っていること自体が問題では？については、例えば、自分の古い車を修理工場にだして、ナビゲーションシステムをインストールするように頼んだところ、メカニックが良かれと思って勝手にスマートカーにされてしまったようなものでは？
　それは実情と異なる例えだと思います。以前は、特定の目的だけの車種しか持ってなかくて不便だったので、必要なものから多用途車に買い換えよう--ということ。
　湯を沸かすやかんしか持ってなかったので、色々使える鍋に買い換えよう。

　ウェブデザイナーとは、ウェブという目的にしたがってサイトを構築していく仕事ですから、デザインとは言っても、その基本は文書構造のマークアップです。
　カタログやパンフレットを作るDTPとは違う。
★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

もし分業するなら
　プログラマーはデータベースからどのようにHTMLを出力するかがお仕事と言うか得意ですので・・・。
[プログラマー]
　例えば、データベースを作成したり、そのデータベースからXMLないし、XHTMLで出力してもらって、XSLTなどでウェブデザイナーが指定した文書構造のHTMLになるようXSLTを作成してくれとか。
[ウェブデザイナー]
・希望する文書構造になるよう雛形のHTMLを作成する。→プログラマーへ提示
・それをユーザーに合わせてデザインを指定していく。

この回答へのお礼

なるほど、つまり、時代の流れにあったものに変えていく必要があるというご意見、と理解していいのでしょうか。もしそういう趣旨のご意見ならもっともだと思います。

スマートフォン専用サイトを作ることの誤りのくだり、参考になりました。

ウェブ創世記まで遡らないにしても、フラッシュの時代の、スクロールバーまで自家製でデザインしてしまっていた、ユーザビリティー無視のやりたい放題から、昨今の、洗練はされてきているが無個性で前戯のないセックスのようなウェブプラットフォーム体験までを眺めると、どこにもベストな状態というのはなくて、いつまでも試行錯誤をしながら進化していくものとして捉えるのが自然で、やはり古すぎるメカニックは淘汰されていくべきなのかな、と思い始めました。

貴重な意見をありがとうございました。

お礼日時：2015/04/16 09:32

No.2 回答者： hostinger-japan 回答日時： 2015/04/15 22:00

確かになんで対立しているのかわかりませんね。

あなたにスキルがあり、プログラマーにもスキルがあるとすれば、双方のやることはお互いの仕事の内容にほとんど影響を与えない筈です。ましてや、プログラマーがどんなプログラミング言語を使おうと、最終的に有効なHTMLを出力してくれるのであれば、あなたに口出しする権利はありません。その為のCSSな訳ですから。

まず１つ目の問題がそこと、２つ目の問題は10年前のホームページを運用している顧客です。そもそも、そちらをリニューアルし、レスポンシブ対応なりにすれば、PC版とモバイル版で統合がとれ、最適かと思います。予算の問題や、旧サイトはどうしても弄りたくないと言う場合は、別途モバイル版だけを別URL（サブドメイン、またはサブディレクトリ内）で新規で作ればいいだけではないんでしょうか。

No.1 回答者： ORUKA1951 回答日時： 2015/04/15 11:23

なにを対立しているのかがわからないです。

まさかですが、今から１５年以上前の1999年勧告のHTML4.01で
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
・・・【中略】・・・
　 HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　HTMLが対象にするのは、PCとスマホじゃない・・携帯電話(handheld)、モバイル機器(handheld)、音声入出力機器(speech,aural)、テレビ(tv)、点字出力、最近では検索エンジンも対象です。
　スマホはPCと同じscreenメディアですから、そもそもPC用はスマホでも利用できたはずです。
　⇒aural( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

★またHTMLは古い仕様(HTML3.2、HTML2.0、HTML1など)であっても、それは利用できることがブラウザには求められています。

　よって、
＞対立して困っています。
＞１０年前に作ったウェブサイトがまだうまく機能していて、
　当然スマホでも利用できるはずですが？？？
　でなけりゃちゃんと機能しているとは言えない。
＞しかしスマートフォンの普及により、スマートフォン専用のサイトを追加で作ることを依頼されました。
　それは絶対におかしいですよね。「もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう」
絶対に
★PCでもスマホでも利用できるように、新しく作り直せ!!（九ページは残しておいても良いが）
でなければならないのですよ。
　新しい内容や変更が必要なページは、「どんな環境からもWebの情報を利用できるように」作成し、古いものは時期を見て順次書き直しなさい。
　同じ内容のページを複数作るのはロスですし、検索エンジンから最も忌避される事ですよ。

　これが唯一の方法ですよ。
media="screen" PCの様々なサイズのディスプレイやスマホ
1) ディスプレイの幅に依存せず--640px～　最大で1200pxかな--利用できるもの
　　これでスマホも利用できるはず
2) スマホ用にデザインを変えたければ、CSS3のmediaqueryを使ってデザインを変更する。

media="handheld" 携帯電話など小さな画面
media="screen" 印刷が想定されるページ
1) 専用のスタイルシートを用意する。

　その他については、特にスタイルを指定しなくても良い。スクリーンリーダーや検索エンジンはHTMLだけ読む。障害者が利用する公的サイトの場合は、media="speech" や、展示端末media="braille"が必要な場合もあります。