好きなウェブサイト”WikiWikiWeb”を推してみる

プロダクトデザイナーの@kgsiです。ふりかえって自社のプロダクトデザインや副業先でもデザインをしていますが「会社や組織のデザイン」ではなく「個人として好きだったデザイン」を最近忘れている…？と思いました。
そのことに気づいて少しセンチな気持ちになっていたとき、「#このデザインが好き」というありがたい企画がnoteに生まれていたので、この企画にライドする形で紹介したいと思います。

WikiWIkiWeb

WikiWikiWebというサイトを皆様ご存知でしょうか？知る人ぞ知る今日（こんにち）のWikipediaの源流とも言えるサイトで、ウォード・カニンガムによって1995年に公開された、Wikiシステムを採用したウェブサイトです。

恥ずかしながら知ってるようで知らなかったサイトで、つい最近詳しく調べていくうちに「え、何このサイト今見ても最高すぎない…？」となったので、ベタですが取り上げようと思いました。

その構造・構成が好き

WikiWIkiWebには「ページ遷移」という概念はなく、リンクをクリックすると非同期にデータを取得し、クリックされた位置からevent.pageX、event.pageYを算出して`position`スタイルを与えたコンテンツを、ただ重ねて表示していくだけのシンプルな構造です。コンテンツの分量が多い場合や、スクロールエリアが広がった場合はどうなるのか？と思われると思いますが、WikiWikiWebではスクロールを制限しておらず、コンテンツの位置に応じてスクロールエリアが広がり、ブラウザ表示エリアを超えて閲覧できます。このウェブの特徴を最大限利用した構成は、今見ても色褪せない作りです。

なお、ページの位置を示す情報は、クエリパラメータ（例：https://wiki.c2.com/?GoodWikiCitizen）に保持されており、クエリを付与されたURLを開くと、重なっていない一枚のコンテンツのみが初期表示されます。こういった構成もこのサイトを普遍のものとしているポイントですね。

思想を感じるスタイルが好き

このサイトのCSSが好きです。CSSファイルを見てみると、コードとしてはたったの35行しか書かれておらず、ファイルサイズも465バイトしかありません。圧縮もかけられていないため可読性も大変高い仕上がりになっています。

/* http://wiki.c2.com/style.css */

.page {
  width: 500px;
  margin: 15px;
  padding: 15px;
  word-wrap: break-word;
  box-shadow: 10px 10px 30px 10px  rgba(0,0,0,.1);
  background-color: white;
}
h1 {
  display: flex;
  align-items: baseline;
}
h1 span {
  display: inline-block;
  margin: 0 0 0 10px;
}
img {
  max-width: 500px;
}
pre {
  word-wrap: break-word;
  white-space: pre-wrap;
}
a {
  text-decoration: none;
}
input {
  width: 60%;
}
ul, ol {
  padding-left: 1em;
}
dd {
  margin: 1em;
}

記述において好きなポイントは、コンテンツを囲う`box-shadow`の指定です。コンテンツの右上におおよそ重なって次のコンテンツが表示されることを見越して`box-shadow`の`blur-radius`を他の値の3倍とし、重なったときのレイヤー感を意識させた仕上がりにしています。

また、余白の指定はpx、書体サイズはem指定としているところも重要です。文字サイズはユーザーの環境設定に委ねた相対値（em）で指定していますが、スペーシングや横幅は、ユーザー環境に左右された場合、意図しないレイアウトになって可読性を損なう可能性があるため、固定値（px）が指定されていることがわかります。コントロールするべき点と委ねる点をしっかり分けた、思想を感じられるCSSが美しいと感じました。

表層から見える美以上に、構造や仕様を愛したい

CSS・JSの進化により、Flash黄金時代を超えた審美性や表現力の高いウェブサイトがいくつも出てきていますが、ウェブがコンテンツ主体の時代となった今、正しい構造、HTML、CSSへの理解をちゃんとしよう…という動きが活発になっているのを観測しています。

表層に見える美しさ以上に、構造や仕様に愛を見出してみるのはいかがでしょうか？あなたの好きなデザインを教えてください！

パターン、Wiki、XP ―― 時を超えた創造の原則 WEB+DB PRESS plus