カスいけサイト私撰集

  1. 概要
  2. 私撰集
  3. 参考リンク集
  4. 情報
  5. 方針

概要

カスいけサイト
分離されたカスケーディング・スタイル・シート(いわゆるCSS)によって見栄えの制御がなされていて、そのデザインがいけてる(=センスの良さを感じさせる)サイトのこと。カスイケサイトとも書きます。また、CSS の主旨を踏まえ、適切な HTML/XHTML および CSS による構成であることも暗黙の条件とされます。

※“いけてる”を平仮名で表記したのは、『カス』『サイト』両カタカナとの境界を鮮明にするためです。

 本ページでは『カスいけサイト』をピックアップしてリンク集としてまとめることが目的です。とはいえ『いけてる』とは主観的なものであり、デザイン論的な話題からは逃げたいところなので、自分用のブックマークとして収集していることにして『私撰集』を自称しています。日本語の意味的には『私集』が正しい用語かもしれませんが、まあ風流ということで。
 なお、ピックアップにあたっては、参考リンク集の『リンク集2』に頼っています。

私撰集

 CSS の雰囲気によって分類することを試みています。

テーマがわかるサイト

NATIVE
自然、中でも何となく“乾期”を思わせるデザインです。黄色っぽい感じですが、全体に優しい雰囲気があります。画像の使い方も効果的ですね。
ROUTINE DAYS
言葉では表現しにくいのですが、サイト全体にテーマを感じます。めりはりある主張をもち、効果的に配置された画像ナビゲーションもセンス良いです。非常に優れたデザインです。
Mushline
モダン美術館のようなデザインで、タイルのようなコントラストの強い背景を利用して、色々と近代的なセンスが巧いです。
BERRY the dog sight
あちこちに犬のイラストなどが顔を出し、コラムから写真まで多岐に渡るコンテンツに、パートナーとしての犬への愛情が伝わってきます。たいへん完成度の高いデザインです。
新世紀サッカー観評
サッカーをテーマにしたデザインで、爽やかな青空のもと、画像アイテムが静かな主張をしています。
関堂幸輔 ― the Jurisprudent
綺麗な装丁の本を読んでいるような、法律というテーマにあった堅実なデザインです。なんとなく光沢感のある配色も気持ちよいですね。

光のあるサイト

Personnel
月の世界のような印象のあるサイトですが、見出し・本文・アンカーなど全てに細かな配慮が為されています。美しさと可読性を見事に両立させたデザインと言えます。
WASTEPAPER SOUL
緑から黄緑にわたる光のベールに包み込まれたようなサイトです。明るい色使いながら爽やかでとても読みやすく、成年向けの内容ながら、信頼感が演出できているように思います。
Manabu Kano's Site
淡い青色で表現した月を中心に、不思議な明るさのあるデザインです。
co.
上部のイメージと左右の広いスペースが空間を感じさせてくれます。
side-R
黒光りするデザインで、磨き上げられた車のボディを彷彿とさせます。同じく Ryu さんによるネコの写真を中心としたponta web.も可愛いと思います。
Buffalo Love
フレッシュな青に安心感のある灰色を組み合わせています。
Anything Goes (休止中)
空の雲間から漏れ出す光のようなサイト。ややシンプルですが、サイトテーマのイラストを引き立てるものとなっていると思います。

可愛らしいサイト

mew (閉鎖?)
ピンク色に暖色系の色でアクセントを付けたサイト。画像もやはり効果的で、ころころとした愛くるしい小動物のような雰囲気です。
Mini Sapphire
暖かみのあるデザインで、あっさりとした美しさがあります。「冒険」を連想させるカワイイ画像を効果的に配置しています。
CLAMP EXPRESS
薄い桜色を主体としたファンシーながら落ち着いた雰囲気のサイトです。
娘娘飯店しるきぃうぇぶ
桃色を基調とし、淡いストライプ、星や球の画像などを巧みに組み合わせたサイトです。相当に高度な技術力が伺えます。“魔法少女”のような雰囲気なのでしょうか。
酒精灯
シンプルそうにみえながら可愛らしさを感じるしたデザインです。やわらかみのあるサイトです。
万能しっぽ
白地に鮮やかな緑を組み合わせたもの。配置されている画像も互いに衝突することなく、イラストを引き立てているデザインです。

やわらかなサイト

津波荘
花の画像を印象的に配したデザインで、芯の強い色彩が効果的です。からりと晴れた青空に光る雪原の花という感じのサイトだと思います。
PlatinumEgg
シンプルながら、青と背景のさりげない画像が生きています。
BAZOOKA
個性的なタッチのイラスト等と淡い冷色が独特な雰囲気を演出します。Flash がオンだと様々なエフェクトも出るようです。
klee (閉鎖?)
サイト名はドイツ語で白詰草を現すそうですが、それに見合った草花のほんわかと優しい感じが匂うサイトです。
96*72
小さな花を背景にした、サイトのテーマとよくマッチするデザインです。

めりはりを感じるサイト

voix
ナビゲータの緑とアクセントの画像に安心感があるデザインです。テキストも読みやすいと思います。
KH's web site
良い意味でのCSSデザインの典型例の一つで基本に忠実なサイトといえるでしょう。白地にコントラスト色のボーダーを組み合わせ、必要最低限の画像を活用しています。
POKeDEX 250
抑えた赤を主体としていて、落ち着きのある暖かさがあります。
Shock-O-Day!!
まず、とても大胆なインデントでテキストが読みやすいです。簡潔なようでいて、細かく画像などが利用されています。
画廊犬神堂
暗色系ながら元気のいいデザイン。様々なテーマによるサイトの一つ。Web系メモなどもよいです。

硬質的サイト

TokiMeki Network
引き締まった黒背景に、さりげなくイメージを重ねた、なんだか高級感のあるサイト。やはり、黒地というのも良いものですね。
Y.Tsutano on the Web
一見シンプルながらも奥深い設計を思わせるデザインで、絶妙の厚みを演出する技術が見事です。スクロール時にタイムラグをもって追いかけるナビゲーションが印象的かもしれません。
White Pencil
無機質で整然とした雰囲気が心地よいデザインです。知性を感じさせますね。
蒼の迷宮
蒼色で統一されたサイトです。レイアウトなどにも工夫があり、読みやすくしかも独特の雰囲気を醸し出しています。ナビゲーションはしっかりしていますが、それでも“迷宮”というイメージに合いますね。
Fuckin' Kingdom
大胆に赤を配した暗色系ながら強烈なデザインです。暗い中にも工夫は感じます。
RiT-LiX
カーブと直線、そして画像を効果的に使ったデザインです。

サイバーティックサイト

CSS Laborator
歯車のように噛み合う画像が入念に計算されたデザインです。一目見ただけで、非常に凝っていると感心してしまいます。
outsider reflex
黒と深い空色の組み合わせに、一体感のある画像をコーナーに配置したデザイン。ナビゲーションもしっかりしているようで、制作者の知性を思わせます。
C Space
青系を中心としてまとめられたデザインで、アクセント等にもしっかりとした気配りが感じられます。
monologue
シンプルな白地やストライプが渋い青系の色を引き立てています。簡潔ながら力強いデザインです。
Web Frontier
機能的な構成で、信頼感があります。テーマごとにデザインが切り替わるタイプです。
muumoo.jp
豊富な情報をテクニカルにまとめあげる感じのデザインです。

シンプルなサイト

Web Cafe' "Prelude"
白黒を基調としたサイトですが、レイアウトなどがしっかりしていて、どことなくお洒落な感じがしますね。
HI-MATICal Archives
白基調のシンプルなデザインながら、余白とアクセント画像の使い方に細かい気遣いを感じるサイトです。さりげないアニメーションにも味があります。
Alternative Design Project by Momomo
画像の使い方が印象的ですが、きちんと読みやすくまとめられています。
vainsystem.net
非常に限られた色数で、両脇にストライプ、上部に画像を配しただけのデザインですが、どこか味があります。
Studio Sixnine.
シンプルな配色が清々しい感じのするデザインです。

注意

デザイン変更の可能性

 CSSの特徴の1つは、デザイン変更が容易なことです。例えば本サイトも、初版執筆時(2003年2月21日)とは違うスタイルになっています。つまり、各サイト管理人さんの運営によって、上記のような分類・コメントが当てはまらなくなることがあります。

※ただし、紹介していますサイトの管理人さんがこの文章を読んだことで、そのデザイン変更の意欲を失うようなことは希望いたしません。心おきなくよりよいデザインを追求してください。

記号類

※サイト名やアドレスが変更されている場合があります。

代替スタイルシートの活用

 代替スタイルシートの、“リンク集1”を選択すると『リンク集1』に所収されているサイトのみを、“リンク集2”を選択すると『リンク集2』に所収されているサイトのみを、そして“更新”で更新確認サイトのみを表示します。

参考リンク集

まとめリンク集

CSSでイケてるデザインサイトリンク集2(『リンク集2』)
管理人:みぐる さん
“カスイケスレ”の登場サイトを網羅的にまとめたものです。比較的機械的なチェックをした上で言語別に分けることを基本に、スレ紹介順やタイプ別なども含めて、しっかりしたカテゴライズによって構成しています。カスイケスレから派生したページ群における中心的存在だと思います。
さらに、更新の停止した元祖『CSSでイケてるデザインサイトリンク集』を補完したものまで含みました。
いわゆる“カスイケ”の流れは、2ch 掲示板群における Web制作管理板の一連の CSSでイケてるデザインサイト・スレッドではじまりました。独立してはいますが、このリンク集はそこから派生したものです。
CSS Vault (英語)
管理人:Paul Scrivens さん
英語圏での“カスイケサイト”を収集したもの。商業サイトも多くレベルが高いです。(日本とは若干系統の差も感じます。)

分室系リンク集

yukiakari annex - CSSでイケてるデザインサイト*サムネイル*リンク集
管理人:真冬 さん @ yukiakari
『リンク集1』『リンク集2』を併せてデザイン的に好感をもたれたサイトを選別し、さらにサムネイル付でも表示してくれるリンク集です。【分室+サムネイル】の付加価値の高いリンク集といえるでしょう。比較的頻繁にデザイン更新の確認がなされています。
CSSでイケてるデザインサイトリンク集・分室
管理人:662 さん
はじめて、上記『リンク集1』からデザイン的に特に優れていると思われるものを厳選し、ランク分けを行ったリンク集です。概要とともに、CSSに対するコメントも付いていますので、参考になります。掲載サイトを見ると、確かな眼をもっていらっしゃることもわかります。

 私とはまた別の観点から優れたデザインを収集しているサイトもあります。

専門系リンク集

CSSなサイト/同人野郎のためのWEBサイトづくり @ もうパンツはかない
管理人:あきら☆M さん
まっとうな HTML と CSS でデザインされたイラスト系サイトのリンク集です。サムネイル版も用意されています。
カススタ on はてな & カススタon はてな(サムネイル版)
管理人:id:adramine さん & id:antipop さん
一定の基準を満たしたスタイルシートを使用している“はてなダイアリー”を補足したアンテナおよびそのサムネイル版です。
CSSで素敵なタイピングサイトリンク集 @ ACES
管理人:Otani さん
Valid な HTML および CSS でデザインされた、タイピングに関する記述をもつサイトのリンク集です。

 ジャンルを絞ったリンク集も編集されています。

情報

更新履歴

初版 2003-02-21
『リンク集2』から19サイトを紹介する。
第二版 2003-03-21, 22
『リンク集1』も対象に加えて再吟味し、計48サイトを紹介する。
第三版 2003-09-08 .. 14
『リンク集1』『リンク集2』を久しぶりに巡回し、計50サイトを紹介する。
第四版 2003-12-28, 29
全体を再吟味し、計51サイトを紹介する。
第五版 2004-07-26 .. 08-03
全体を再吟味し、計53サイトを紹介する。

 上記はサイトの選別を更新した記録です。デザイン更新の確認は、不定期ながら、もう少し高い頻度で行われています。

 別項の『リンクについて』を参照してください。(“どこへでも・切り貼り自由・連絡不要”です。)

方針

ピックアップにあたって

選定について

 本ページは、上記『リンク集2』掲載の(“補完”を含む)日本語個人サイトを中心にピックアップを行っています。ただし、これは上記の掲示板等の意見を集約したものではありません。あくまで、私(永施 誠)が主観によって選別したものです。
 一度にすべてのサイトをチェックしたわけではなく、日数をかけて少しずつ巡回しています。幾つかのサイトは、ちょっと評価がおざなりで些細な理由で落としてしまったかもしれません。また、接続に問題がある場合は選考外とさせていただいております。さらに、閲覧にあたっては、ブラウザの違い・スクリーンサイズ・ディスプレイの輝度などが影響しますので、あらかじめご了承下さい。
 カテゴリ分類については、良さそうなものを一通り選んだ後で行っています。「これがどうしてこのカテゴリーなのか?」あるいは「カテゴリー分けに意味があるのか?」という疑問もあるかもしれません。まあ、自分でも最後の方がわけがわからなくなってきたり、数合わせに走り始めた可能性は否定しません。

基準について

 なにぶん鑑賞時間が短いので、「常連としてじっくり読む」という視点よりも、「一見さんとして感心する」という視点が重視されているものと思います。特にトップページの第一印象に大きく左右されている可能性は高いです。そういうことでドキュメントのソースは見ていませんし、分量が極端に少ない場合を除き、コンテンツの中身は考慮していません。
 『読みやすさ』『洗練性』『シンプルさ』『センス』『統一感』『テーマ性』その他の抽象的な要素が曖昧に総合評価されていると思います。私の嗜好がかなり影響しているはずです。それについては上記サイトを見て回ることで読みとれるでしょう。

ピックアップを終えて

カスいけサイトたること

 本私撰集は序列付けが目的ではありません。ただし、やはりデザイン的に良いものを選んだつもりであることは確かです。(なお、私のデザインに対する考え方は『ウェブデザインの原則』等に記してあります。)
 とはいえ実際には、掲載されているどのサイトにも工夫してある点があって、できるだけ多く載せようかとも悩みました。「なぜこのサイトが入っているのにあのサイトが入っていないのか?」という不満もあることでしょう。しかし、あまり数が膨らみますと私撰集としての意義が薄くなってしまいます。ですので『代表例』を選んでいくつもりで選別しました。「載せていないサイトにも学ぶべきところは多い」と理解してもらえると幸いです。

更なるカスいけサイト

 この私撰集にご不満をいだいたり、あるいは感心するなど、(プラスにしろマイナスにしろ)何らかの意義を認めた場合、参考リンク集を訪問するなどして、その他のサイトにも目を通してみることをお薦めします。サムネイル系リンク集は特に便利かもしれません。ウェブ上で公開するかどうかはともかくとして、とりあえず自分用に『カスいけサイト・ブックマーク』を編集してみてはいかかでしょうか。
 また、新しいサイトが紹介されることで、私が目を通していないところが増えていくはずです。(『リンク集2』の“備忘録”のみに収録されているサイトは基本的に対象外です。)もの足りなくなった場合は、Google などで『valid + css + html + (興味のあるキーワード群)』で検索すると新しい候補が見つかるかもしれません。また、既存のカスいけサイトのリンク先に、未紹介の、やはりカスいけサイトが含まれていることもあるかもしれません。

 さらに、サイトを作る際には、専ら CSS を用いてデザインすることを強く推奨いたします。

著作・制作/永施 誠
e-mail; webmaster@stardustcrown.com