利用者:Cllackr/メインページのデザイン案 (2012)

Wikipedia:メインページの改訂/2012にエントリーするデザイン案です。

現時点では2つの案があります。

英語版の和訳

デザイン» /英語版の和訳

英語版メインページを私が一部和訳したものを、miyaさまが日本語版に移動・各種テンプレート呼び出しなどを修正・翻訳の修正してくださったものです。

miyaさまに多大なる感謝を申し上げます。

Latent Grid

デザイン» /Latent Grid

コンセプト

多くの言語のウィキペディアメインページでは、日本語版も含め情報を詰め込みすぎて視覚的に非常にごちゃごちゃしています。そこで今回提案するデザインでは従来用いられた枠線の代わりにホワイトスペース（余白）を利用し、今までとは一線を画すすっきりしたデザインを目指しました。

ファーストビュー（ページを開いた時に画面に収まる、スクロールせずに見える領域）に収めるコンテンツには、良質な記事によって閲覧者を百科事典の魅力に惹きつける「特集記事」、そしてキャッチーな写真で閲覧者の興味を引く「特集写真」を配置しました。また特集記事においては、記事のタイトルを大きく配置することによってより目を引くことを狙っています。

テンプレートについて

このデザイン案ページではメンテナンスを簡略化するため、積極的にテンプレートへの分離を行なっています。

テンプレートの一覧は /Latent Grid/Layout Templates をご覧ください。各テンプレートページにそれぞれのテンプレートの解説がございます。

予選からの主な変更点

節の見出しを画像から縦組みのテキストに、また一部節題を変更: 予選時のデザインでは各節の見出しに横組みの文字をラスタライズした画像を使用しておりました。しかしながらアクセシビリティーに問題がある、縦書きが望ましいとの意見が出ましたので、これを縦組みの文字へと変更いたしました。
またこの際CSSの制約により小書き文字および長音の表示に問題があったことから、これを使用した節の題を変更いたしました。
節の見出しの色を一部変更: 一部の節見出しにおいてコントラストが低いとのご指摘を頂きましたので、当該節見出し背景色の彩度・明度を低減しました。
ページ見出しのWikipediaロゴ部分のデザインを変更: 予選時はWikipediaロゴをそのまま表示しておりましたが、これではサイドバーのそれと重複し雑然とするとのご指摘をいただき、ロゴ画像を拡大して切り抜き表示するデザインへと変更いたしました。
節の順序を変更: 内容により興味を引きやすい強化記事（改稿された記事）および新着記事（ご存知でしたか？）を上位に配置いたしました。
バグ修正

狭幅・レガシーブラウザにおける制約

IE8以下などの古いブラウザ、また横幅が極端に狭いブラウザでは、タイトル部分がはみ出して表示されます。これらの問題はデザイン採用後に修正することが可能です。

投票時点で正確なデザインを確認するには、お手数ですがGoogle Chromeなどのブラウザーをご使用いただければ幸いです。

→ 原因と対策

原因

現在のWikipediaではヘッダーの親に当たる、メインコンテンツを包む <div id="content"> に次のスタイルが適用されています（途中省略）。

@media screen
    div#content {
        padding: 1em;
    }
@media screen and (min-width: 982px)
    div#content {
        padding: 1.25em 1.5em 1.5em 1.5em;
    }

これに対し、ヘッダー部分ではnegative marginを用いて上記の padding を相殺しています。次のようなコードです。

<div style="margin: -1.25em -1.5em 0;"> ...... </div>

しかしながらインラインスタイルシートではメディアクエリー (@media) が使用できないため完全に上書きすることができず、これを認識しない古いブラウザーおよび横幅の狭いブラウザーにおいては、必要以上に余白が削り取られヘッダーがはみ出してしまう状況が発生します。

対策

Javascriptを用いて、ないしは特定の状況下でメディアクエリーを上書きするスタイルを共通スタイルシートに導入することによって対応することができます。これによってヘッダーがはみ出る問題は解決します。

現在井戸端にて対策を依頼中です。

備考

上記「デザイン」および「下書き」に含まれるコンテンツは、以下のものを含みます。各文章および画像の著作者はそれぞれのリンク先の履歴をご参照下さい。

2012年11月27日時点でメインページに表示されていた一部の文章および画像。
2012年11月27日時点で利用者:Cllackr/メインページのデザイン案 (2012)/英語版の和訳に表示されていた一部の文章及び画像。