はじめに

このブログでは「Wikipedia」のサイトのデザインや機能などを確認して、ユーザー目線や開発者目線で気になった点をまとめる記事になっています。

Wikipediaとは

Wikipediaは誰でも編集可能なフリー百科事典です。いつもお世話になってます。

では早速ですがヘッダーから見ていきましょう。

図1.wikipediaのヘッダーデザイン

検索バーは動的にfetchでリクエストを送って検索結果を取得してきているようです。ユーザーにとってはすごく便利でいいですよね。

図2.検索タブを用いた検索例

あとは特にはなさそうでシンプルな設計になっていますね。

図3.トップページ画面

こちらはトップページです。辞書ということもあって他のサイトと比べてテキストがびっしり書かれているのがWikipediaの特徴だと思います。画像やリンクもびっしりですね。ついでに「藤山一郎」のページも見てみます。

図4.「藤山一郎」のページ

左にテキストが、右にtableタグ（<table></table>）で作られた自己紹介のページが貼られています。ちなみに、ここではcssプロパティのfloatが使われています。学校の教科書などでみたことがあるデザインで、テキストやインライン要素がその周りを回りこめるようになります。

自分はこのプロパティを使いこなしたことがないので、いつか使ってみたいなぁ

図5.floatプロパティを用いたデモ例

あと細かいところを見ていくと、h2はアンダーラインをつけ、h3は太字にしていますね。見出しのデザインは好みが分かれるところですよね。今後いろんなサイトを見てどういう傾向があるのかを分析できればと思います。

また、テキストを羅列するとどうしても見づらくなってしまうのですが、パディングなどをしっかりとつけてわかりやすくなっていることがわかります。これはブログにも通じるものなので参考にできればいいなと思ってます。

では次にサイドバーについても見ていきましょう。

図6.サイドバーを含めた画面

左はよくあるやつですね。右のサイドはテキストサイズなどを調整できる設定が配置されています。これは便利ですね。Wikipediaを見る層は幅広いと思います。自分の母親も見るのですが、老眼で携帯をすごく離しながら見たりしています。

テキストが多く年齢層が高い人も見るようなサイトは、見やすいところにサイズ調整ができるのはありがたいのではないでしょうか（年齢層が高い人ほど設定の仕方とかわからないと思うので、、）

なので自分のサイトはターゲット層などを考慮したサイト設計を考えるとより良いサイトが作れると思います。

最後にフッターです。真っ白の背景に上部線を引いているだけですね。ただ、ここはあまり見る人は多くないところだと理解しているので、テキストを本文よりも小さくして目立たないようにしていますね。確かにこれでもいいのかもしれません。

図7.フッター画面

今回はWikipediaのサイトについてみていきました。気になった点としては以下がありました。

知らない人はいないであろうWikipediaですが、サイトの役割やターゲット層などを考慮しつつ、辞書であるという雰囲気をだしたサイト設計になっていて、他にも学べることがあるだろうなと思いました。