体裁が悪くなるのは何が原因ですか？

質問

先ごろ，アサヒコムがリニューアルしましたが，各都道府県版において，
愛知県版だけが，表示した記事が読みにくくなっていることに気づきました．

ただし，該当するページは，写真付きのものに限られます．

事例としては下記のページがあります．
（これらのリンク先は，１週間程度で見られなくなります）
http://mytown.asahi.com/aichi/news01.asp?kiji=6419
http://mytown.asahi.com/aichi/news01.asp?kiji=6416

これをブラウザで開くときに，お気に入りや履歴も表示させてみてください．
そのとき，写真画像の左隣のテキストのスペースが，極端に狭くなることが
おわかりいただけると思います．
お気に入りを表示させずとも，ブラウザの表示画面を小さくしても同様の現象が
起こります．
最悪の場合，文字の上に写真が被ってしまいます．

このとき，ブラウザはIEに限らず，DonutP でも同様に起こります．

CSSのことはよくわからないのですが，もしかして，これの設計ミスが原因なのでしょうか？
愛知県だけがこういう状態になっている点からして，それぞれの地方が独自に
サイトを設計しているのかなとも思っていますが，お粗末ですよね．

回答No.3

noname#21343 · ベストアンサー

設計ミスではないでしょうし、ましてやそれぞれの地方が独自にサイトを設計しているわけではない、と思います。

　簡単に言ってしまうと「写真のサイズが大きすぎる」という事だと思います。

　他の地域（たとえば「タマちゃん」で話題沸騰の神奈川県）にも写真のついたページがありますが、

http://mytown.asahi.com/kanagawa/news01.asp?kiji=3834
　このページと紹介されているページを比較すると、大きな違いがありますよね。写真の大きさです。

　このページは、分かりやすく言うと、
１）左側（「愛知の天気」から始まる行）
２）中央（見出し・写真・本文がある行）
３）右側（「地域情報」から始まる行）

――の３つに分かれていて、このうち中央の行でブラウザの左右幅を変えた時のマージンを取るように設計されているようです。
＃私が↑に挙げた神奈川県のページなどで確認してみてください。

　で、本来ならば「ブラウザ最大化＋お気に入りなどの表示」でも、ちゃんと写真の左側に原稿が流れるはずなんですが、愛知県のページでは写真が大きすぎるため、縦に１文字ずつしか流れない状態になっている、ということだと思います。

参考URL：

http://mytown.asahi.com/kanagawa/news01.asp?kiji=3834

お礼

わかりやすいご説明で，それが原因だとすんなり理解できました．
ありがとうございます．

私の推測では，サイトの更新は，それぞれ各地方の支社に任されているものの，
ご当地サイトの更新を担当する人のスキルにかなりの開きがあって
こういう現象が起こってしまうのかなと，漠然と思っています．

たとえば，北海道などは，やたら見出しのフォントが大きいなど，
それぞれ特徴がちがっているのがその証拠です．

回答No.6

natsuki_tk

＞簡単に更新ができるように設計するのは 不可能なのでしょうか？

可能ですし、この件でも実際に行っているのではないでしょうか？
本文と写真をいれるテンプレート活用しているのでしょう。

ところで、
多少、木を見て森を見ずといった印象受けます。

このサイト、デザインやユーザビリティともにいい感じに仕上がってると思います。
テキストの余白の件だけで決めてしまうのはどうかと思いますが。
(pxと%でサイズを指定し、さらに横幅の最小値まできちんと指定してありますし)

写真のサイズを固定しない分、
記者の方で好きなサイズを選んでいれることができます。
(また、無理に事前に画像編集する必要も無くなります)
この点も、一面的な判断で善し悪し決まることでは無いでしょう。

お礼

なるほど，見る角度によって価値観が違ってくるものなんですね．
勉強になりました．ありがとうございました．

回答No.5

noname#21343

Ｎｏ３みたびです。何度も申し訳ないです m(__)m。

＞私も含めて，スキルのない人でも，簡単に更新ができるように設計するのは
不可能なのでしょうか？

　偉そうなことを書いてますが、実は私自身、スキルというほどのスキルは持ってないんですけどね（爆）。

　ソースを見る限りでは、
<!--★★見出しトップ★★-->
<!--★★写真ここから★★-->
<!--★★見出しトップ★★-->

　――など、日本語でコンテンツを埋め込む部分が指示されているので、日々のニュースを支局単位で更新する作業自体は簡単だと思うんですよね。最初の回答でも触れましたが、今回の「家康行列」のページに関して言えば、単に「写真サイズが大きすぎる」ということだと思います。
＃厳密に言えば、このページでは写真のサイズが指定されていないんで、この部分にもサイズをきちんと指定するよう指示しておくべきだと思いますが。

＞閲覧する人に，少しでも余分な手間を取らせる，また嫌気を抱かせる点で
本件はウェブ・ユーザビリティが欠如している好例だと思ったのです．

　Ｎｏ４でも触れた通り、私自身、同じような仕事をしております。今回のご質問と、質問者さん及び他の回答者さんのコメントを他山の石として、これからの仕事に生かしていきたいと思います。

　こちらこそ、ありがとうございました。

回答No.4

noname#21343

Ｎｏ３です。

＞私の推測では，サイトの更新は，それぞれ各地方の支社に任されているものの，
＞ご当地サイトの更新を担当する人のスキルにかなりの開きがあって
＞こういう現象が起こってしまうのかなと，漠然と思っています．

　まぁ、これは止むを得ないでしょうねぇ(^^ゞ。

　最近では各社とも「電子メディア」対応を進めていますが、何と言っても、新聞記者は「記事を書く」のが本業ですから。

　実は私も似たようなものでして。元々は記事を書いていたんですが、今では会社でウェブサイトの担当なんぞをやっております。

　リニューアル前後で一番違うのは「重さ」かな、と思います。ブロードバンドが普及したとは言え、まだまだアナログ回線ユーザーが多いのも事実ですから、もう少し考えてほしかったですね。

＃以下、独り言（かな(^^ゞ）。
　個人的には「支離滅裂」だとは思わないです。ブラウザの開き方は、質問者さんが試されたように「お気に入り」などを表示させている人や、「お気に入り」なしで最大にしている人、最大にした状態で「お気に入り」を表示させている人など、人それぞれです。私の場合、画面解像度は1024×768ですが、左右幅が800で表示されるようにウインドウサイズを設定しています。

　仕事柄（最低のラインだとは思いますが）、ネスケの４．７と６、ＩＥ５．５でサイトの見え具合を検証するのがクセになっています。アサヒ・コムもこの３つのブラウザで見てますが、「一番クセがある」であろうネスケ４．７でも問題なく見えてますよ。

お礼

二度のご回答ありがとうございます．

私も含めて，スキルのない人でも，簡単に更新ができるように設計するのは
不可能なのでしょうか？
cgiなどを駆使すれば，特別な知識なしに（たとえば掲示板に書き込む要領で）
手軽に更新ができ，かつ，サイトの見栄えが皆同じになるようにする技術って，
既に確立されていると思うのですが．．．

「ネスケで問題なく見えている」というご報告，とてもありがたい情報ですが，
おっしゃるように，人によって環境はさまざまですから，
アサヒコム（を統括しているウェブマスター）にも，それを留意して欲しかったです．
閲覧する人に，少しでも余分な手間を取らせる，また嫌気を抱かせる点で
本件はウェブ・ユーザビリティが欠如している好例だと思ったのです．

回答No.2

Spur

愛知だけじゃなくて、静岡や徳島もひどいですよ。
単に作り方が下手なだけですね。
ソースを見るとわかりますが、左端のメニューは文字ですが、右端の県名は、すべて画像です。
さらに、左端の幅はピクセル数で固定しているのに、中央の幅は％で制御しているなど、支離滅裂な制御のしかたです。
また、スタイル定義やレイヤー制御で絶対値指定を多用しているので、見る人の環境（モニター解像度、ブラウザの種類やバージョンなど）で見え方がずいぶん変わると思います。
1280くらいの解像度で、フルスクリーン表示させた時くらいしかまともに表示されないと思います。

お礼

天下の朝日が，支離滅裂と言われるようなサイトを作ってよいものでしょうか？
笑うしかないというか．．．

そもそも asahi.com というのは，当時は重要視されなかったコムドメインを
すばやく導入するなど，素人目にも，その先見性には目を見張るものがありました．
思えば，サイトをリニューアルするたびに見栄えが悪くなっていったような印象
があります．
大企業病なんでしょうか？（爆

詳しいご説明，ありがとうございました．

回答No.1

TK0318

今見ましたが愛知県以外のサイト（北海道、奈良県など）でも写真画像の左隣のテキストのスペースが狭くなります。おそらく愛知県のだけ写真が大きすぎるのが原因ですね。

お礼

サイト設計はどの都道府県も同じで，愛知県だけが，特に
写真のサイズが大きすぎるのが原因だったのですね．
ありがとうございました．