日本国首相官邸のホームページがリニューアルしたみたいだ。あまり一般の人たちは見ないだろうからどうでもよさそうと多くは思っていると思う。
リニューアル費用は4550万円。
この値段なら当然全てのブラウザーでチェックをし、絶対に細部まで作り込んでいるに違いない！
そして、今あるブラウザー群でのチェックはもちろんの事、透過処理もちゃんとしているのだろう。
チェックしてみた。（以下は少々ねちっこい気もしますが、何千万円もかけてるウェブサイトなら業者は当然チェックしなければいけないところだと思います。）首相官邸のホームページが酷いと言うのは色々なウェブサイトで既に言われているので違う視点からその批評を行いたいと思います。
首相官邸トップページ（2012年4月10日）
私が使っている主なブラウザーはChrome。続いてFirefox。使わないけど、仕事でバグチェックをしなければならない時のためにInternet Explorer、Opera、Safari等のブラウザーたち。趣味である当サイトは結構適当な作りなのでChromeとFirefoxでしかチェックはしていないし、IE6で表示させると当然レイアウトが崩れるのは知っているがIEは嫌いなので別に直されない。
Chromeは勝手にアップデートされていく。だからどのバージョンを最低の軸にして作れば良いのかは無いが、一貫してChromeではバージョン10を境にWindows XPを使っている場合はグラフィックス処理がWindows Vistaや7と比べるとオフに成っている機能がある。Firefoxは3.6系統を使っている企業が多い。でも、勝手にアップデート？して現在のバージョンは11。Internet Explorerは一番したの下位バージョンは6.0、ついで７，８，９と続く。OperaやSafariは基本的に値段に酔ってチェックするかしないかの判断をする。一言いうと、別にウェブデザイーなやコーダーが生業ではありません。
さて、すぐ真上のパラグラフに間違いは何でしょうか？
- 簡単に言えば、半角英数字と全角英数字が入り交じっている → Internet Explorerのバージョンの所。
- もう一つは、「値段に酔ってチェック」が本来は「値段によってチェック」と「よう」がお酒に酔っての「酔う」になっている。
まぁ、こんな所は普通は間違ってはいけない所でしょう。
PC雑誌の中もそうですが、日本人が苦手とされている英語の処理に間違いが多くあったりします。
例として、「AthlonをAthronと全ページに渡り明記」したりするのが一番一般的でしょう。日本人が苦手とする「L」と「R」の間違い。
あとはページ内部のDTP的な処理。
- 行間は合っているか？
- フォントは色々な使いすぎていないか？
- 箇条書き（Bullets）と画像と文字列の配置がずれていないか？
- 透過処理がしっかりとなされているか？
- マージンやパディングが統一されているか？
- 文章が読みやすく、改行されているか？
- 一文字だけ次の行にずれていないか？
- ヘディングにて文字＋画像と画像だけが混じっていないか？
など上げればきりがありません。
タイトルの「首相官邸ホームページが値段の割に雑な作り」とありますが、このDTP的な処理にてパット見た感じで、上記の中で４つ当てはまっていたりします。
共通して直していない箇所
各種ブラウザーで見たところ、共通して直していないのか、わざとそのようにやっているのか疑ってしまう所があったりします。
それは、トップページのRSSフィードの所に関してですが、文字と画像の合せ方がずれている事。
私が行う、私が考えるやり方の場合、文字と画像が同じ行にセットの場合、文字の高さと画像の高さをあわせる。そうしなければ一方が背が低くなって見え、見た目がおかしくなるからです。言うなれば文字の上の頭の部分と画像の上の頭の部分が同じライン上にありますが、文字の下の部分と画像の下の部分が同じライン上に無い。
2012年4月10日現在の表示
水色の線は文字と画像のトップとボトムの位置を表しています。
水色の線は文字と画像の中央を表しています。
上記３番目はChrome付属のツールで値を変えて中央配置に直したものです。
他にも「閣議案件」のページでは以下の様な超低予算で行ったような事が起こっています。
2012年4月10日現在の表示
１．フォントのサイズが合っていない、２．文字が画像中央に配置されていない、３．他のページではこのようなヘディングはテキスト無しの画像で作成されているが、このページだけテキスト＋画像に成っている。
もし現状のテキスト＋画像を維持しながらするのであればこのような感じで行うのが良いかと
そして、その際のHTMLとCSSはこのようになる。
<div class="kakugi_contents_detail_left"> <p style=" font-size: 10.5pt; padding-top: 7px; padding-left: 6px; ">4月</p> </div>
っと、このような感じでしょうか。
また、そのすぐしたの「?」（三角）マークの画像もテキストと合わすために配置を工夫する必要が有るでしょう。
っと、このような感じでしょうか。
ちなみに、首相官邸の英語のサイトへ行くとデザインががらりと変わっていますし、すぐに気づくのがトップに大々的に表示されているヘディング画像のPNGに透過処理が行われておらず、背景と馴染まない。
2012年4月10日現在の表示。角の透過処理が無いのが分かる。
透過処理の修正を行った後の見栄え
はっきり行って1,2分の作業。別にフォトショップを使ってやらなければ行けない処理でも無く、フリーの画像エディターでもすぐに出来る処理。
まだまだあります！
一貫性の無さ？文法間違い？見栄え？
2012年4月10日現在の表示。
水色で囲ったところが問題箇所
またまた細かい所ですが、上から順にいくと、
１．「Prime minster」のministerのmは「Minister」と大文字が良いのではないでしょうか？
何故ならすぐしたの「Online Magazine」は大文字ですし。英語の文法的には人の名前が入らない場合はPrime Ministerと両方共大文字にする必要は無いのですが、すぐしたの所で大文字化されているのでどちらかに統一して一貫性をもたせるべきです。
２．上から３つ目の「Highlighting JAPAN」の箇所。
文字がかぶっています。ダメです。同じ箇所の「Abduction Issue」、「NODA’s Blog」と行間は同じですが、Highlightingの「g」が「JAPAN」にかぶっているのであれば行間を開けて被らないようにするべきだと思います。そして、開けた行間と同じく、他の箇所も行間の調整をするべきです。
３．「recovery in Japan continues.」
「in」以外は全部最初のいち文字目は大文字化するべきだと思います。最低限、最初の「recovery」の「R」だけでも。
何故なら、最後のピリオドがつくということは文章という事ですし、同じ所にある「Abduction Issue」、「NODA’s Blog」、「Highlighting JAPAN」と大文字化されているので。「in」を大文字化しないのは英語の文法ではprepositionというものであり、日本語では前置詞だからです。っとは言うものの、 前置詞という単語等知らなくても普通はこのくらいはフィーリングで分かるような事。
最後に、
別に見るだけでなら差し支えない。読むだけなら別に多少見栄えに問題が合っても問題ない。
でも、一応一国の政治の状況を国内外へ伝達する為の場所何でしょ？
国民に増税を理解して下さいと言うならば４５５０万円もかけて無駄な改修をし、誤字脱字、レイアウトミスだらけのウェブサイトを新しく作る必要性は全く感じない。
日本の政治と同じく、問題を上げればきりがないですね。
ついでに、他のサイトで首相官邸ホームページがひどく、子供向けのゲームも酷いという酷評があったのですが、どうせゲームを作るなら今までの首相とかを格闘ゲームとかのキャラにしてブラウザーゲームにすれば面白い展開に進めたと思うのに。どっちにしろ何をしても叩かれるのは目に見えている。
コメント