PrePANというサイトのお手伝いをしました。

id:antipop さんに頼まれてantipopさんが作っているPrePAN（http://prepan.org/）というサイトのデザインをしました。
> Perlモジュールのレビューサイト PrePAN をオープンしました
PrePANはモジュールをつくったけど、「既に似たようなものがあるのでは？」「実装について不安が……。」「CPANizeするに際しての名前やファイル構成の慣習がわからない」「誰かにちょっとチェックしてもらいたい」というような悩みがある人の問題を解決するためのサイトです。使ってみてください。

デザインについて

仕事のときも含めてデザインをお願いされるときはこう言われることが多いです。
「いい感じにかっこよくして！」
今回もantipopさんにそうお願いされたのですが、それだけでいい感じのものが作れる才能もセンスも私はもっていません。なのでもうちょっとだけヒントをもらって、「青系の配色」「外人っぽい」というキーワードで作りました。基本的には自由にやらせてもらったので、気晴らしのように楽しんでできました。

CSSについて

エンジニア向けのサイトということもあって古いブラウザのことは気にせずに、新しいスタイルプロパティを使って構築しました。
モダンなブラウザであればほぼ再現された状態で見ることができると思います。

ボタン UI

ボタンっぽいUIのほとんどをCSSのスタイルで表現しています。基本的には backroud gradient, box-shadow, text-shadow あたりを利用することでボタン風な見た目を表現しています。

backroud gradientはあまり強くかけすぎると野暮ったくなってしまうので軽くかけるのですが、今回は外人っぽい感じということなので若干強調した感じにしています（勝手なイメージですが）。

  background:#003856 linear-gradient(top, rgb(0,83,126), rgb(0,30,46));

それからbox-shadowですが、私の場合box-shadowを何度も重ねて細かい表現をすることが多いです。ボタンをベベル風にみせるためのボタン自体のtopのハイライト・bottomのshadow、ボタンが埋めこまれているように見えるようにするボタンの上のshadow・下のハイライトなどです。
box-shadowプロパティは「,」でつなげて書くことで何度も重ねてかけることができます。その場合、最初に書いてある値ほど一番上に重ねられて描画されます。

  box-shadow:inset 0 0 12px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.2),inset 0 2px 0 rgba(255,255,255,0.3),inset 0 -1px 1px rgba(0,0,0,0.7),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);

さらにtext-shadowをつけてボタンに文字が刻印されているようにすると、もっとそれっぽくなります。

  text-shadow:0 -1px 1px rgba(0,0,0,0.7);

疑似クラスの:hoverや:activeも細かく設定してあげると、よりボタンっぽい振る舞いを表現できるように思います。実際はこういう感じで書いています。

.header-blue-button {
  cursor:pointer;
  display:inline-block;
  height:16px;
  margin:17px 7px;
  padding:11px;
  border-radius:5px;
  color:#fff;
  line-height:1;
  font-weight:bold;
  text-shadow:0 -1px 1px rgba(0,0,0,0.7);
  background:#003856 linear-gradient(top, rgb(0,83,126), rgb(0,30,46));
  background:#003856 -webkit-linear-gradient(top, rgb(0,83,126), rgb(0,30,46));
  background:#003856 -moz-linear-gradient(top, rgb(0,83,126), rgb(0,30,46));
  box-shadow:inset 0 0 12px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.2),inset 0 2px 0 rgba(255,255,255,0.3),inset 0 -1px 1px rgba(0,0,0,0.7),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
  -webkit-box-shadow:inset 0 0 12px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.2),inset 0 2px 0 rgba(255,255,255,0.3),inset 0 -1px 1px rgba(0,0,0,0.7),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
  -moz-box-shadow:inset 0 0 12px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.2),inset 0 2px 0 rgba(255,255,255,0.3),inset 0 -1px 1px rgba(0,0,0,0.7),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
}
.header-blue-button:active {
  color:#ddd;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.8),inset 0 0 20px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.2),inset 0 2px 0 rgba(255,255,255,0.3),inset 0 -1px 1px rgba(0,0,0,0.7),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.8),inset 0 0 20px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.2),inset 0 2px 0 rgba(255,255,255,0.3),inset 0 -1px 1px rgba(0,0,0,0.7),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.8),inset 0 0 20px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.2),inset 0 2px 0 rgba(255,255,255,0.3),inset 0 -1px 1px rgba(0,0,0,0.7),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
}

Touch View と Media Queries

Media Queriesを使用してTouch Viewにも対応させています。
Touch Viewに対応させるに当たって、コンテンツの幅やフォントサイズだけでなく、ボタンの大きさやレイアウト、場合によっては不要な要素をなくすといったことをしています。

• 例：ヘッダーのボタン

• 例：フッターのナビゲーション

スクロールバーのカスタマイズ

ChromeやSafariなどのwebkitブラウザの場合はスクロールバーもカスタマイズしています。それぞれのカラーに合うように３箇所でカスタマイズしたスクロールバーを使用しています。

::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  background:#002234;
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner {
  display: none;
}
::-webkit-scrollbar-track-piece {
  background:#002234;
  box-shadow:inset 1px 0 4px rgba(0,0,0,0.7);
  -webkit-box-shadow:inset 1px 0 4px rgba(0,0,0,0.7);
}
::-webkit-scrollbar-thumb {
  border:1px solid #002234;
  background:-webkit-linear-gradient(left, rgb(0,83,126), rgb(0,30,46));
  border-radius:3px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.7);
  -webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.7);
}
::-webkit-scrollbar-thumb:horizontal {
  background:-webkit-linear-gradient(top, rgb(0,83,126), rgb(0,30,46));
}

さいごに

簡単ではありますがPrePANというサイトの紹介でした。一部ではありますが紹介したスタイルなども参考にしていただければと思います。
よろしくお願いいたします。