30分であなたのサイトをちょっといい感じにする9個のTips

正月休み中に気になった英語記事を適当翻訳することにしました。

これを機に習慣化したいですが…。どうですかね。

今回はHow to Make Your Site Look Half Decent in Half an Hourを適当翻訳します。タイトルはちょっと釣りっぽくなってますが気にしないでください。しかも元記事も最終的に30分じゃなくなってますけど…。

Twitter Bootstrap を使う

Twitter Bootstrapを使ってないなら今すぐ使いましょう！
その際にはBootstrap の exampleだとか、カスタマイズページもよく読んで、最適なものを使うようにするといいですよ。

Bootstrapのデザインを買収する

とはいえ、すでに多くのサイトがBootstrapを利用しているので、おんなじようなものを作ってしまうリスクが常にあります。
そんな場合はいっそWrap Bootstrapでデザインを丸ごと購入してしまった方が簡単に早く素敵なデザインを手に入れることができます。
しかも新しいCSSを<head>タグに書き込むだけなので楽ちん！

フォントを変える

Webフォントを使ってさくっとフォントを変更するとモダンで「Bootstrapっぽくない」デザインにできます。
Webフォントを使うのはGoogle Web Fontsから簡単にできます。
どのフォントを選んだら？と思う場合にはお勧めのフォントを紹介してくれている記事もあるので参考にしてみてください！
WebページにWebフォントを追加する場合には<head>タグに以下のように記述し、

<link href="http://fonts.googleapis.com/css?family=Corben:bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Nobile" rel="stylesheet" type="text/css">

CSSで利用するフォントの指定をします。

h1, h2, h3, h4, h5, h6 {
    font-family: 'Corben', Georgia, Times, serif;
}
p, div {
     font-family: 'Nobile', Helvetica, Arial, sans-serif;
}

ほかにもFontdeckやTypekitのようなWebフォントのサービスがあります。
また、「どんなフォントを選んだらいいのかわからない！」という場合にはJust My Typeのようなお勧めのフォントを紹介するサイトや
Type Connectionのようにフォントの組み合わせを試すことができるサービスも存在します。
デザインの観点からフォント選びを考えたい場合はTypekitの記事も参考にしてみてください。

風合いのある背景に変える

真っ白よりもちょっと風合いのある背景にした方が高級感がでます。
すぐに使えるテクスチャはSubtle Patternsにいろいろとあります。

元記事ではCream Dustという背景を使っていますが、/img/フォルダにSubtle Patternsからダウンロードしたpngを置き、CSSで以下のように指定するだけです。簡単！

body {
    background: url(/img/cream_dust.png) repeat 0 0;
}

テクスチャについてはこちらのSmashing Magazine’s guidelines on texturesが参考になるので読んでみてください。

アイコンを工夫する

去年も言いましたが、アイコンフォントを使いましょう。
Font Awesomeを使えばアイコンフォントをIE7でも利用することができます。
Font Awesomeからファイルをダウンロードし、/fonts/ディレクトリと/css/ディレクトリをコピーし、あなたのHTMLから参照するだけです。

<link rel="stylesheet" href="/css/font-awesome.css">

アイコンはBootstrapの参照に依存しているので、HTMLを変更する必要はありません。

<a class="btn btn-large btn-success" href="#">
    <i class="icon-truck"></i>
    Sign up now
</a>

CSS3を使って高級感をだす

box-shadowとかtext-shadowとかを使ってちょっとだけ影をつけることで、高級感を出しましょう。
グラデーションを考えるときにはonline gradient editorとかを使うといいです。ただし、IE9をサポートする場合には以下のようなコードを追加する必要があります。

<!-- [if gte IE 9]>
    <style type="text/css">
        .gradient {
            filter: none;
        }
    </style>
<![end if]-->

もっと高度なことをしたい場合にはCode SchoolのFunctional HTML5 and CSS3やCSS Cross-Countryをお勧めします。

背景画像に一ひねり加える

背景画像にちょと一ひねり加えることでサイトをより個性的にすることができます。
画像を探すにはiStockPhotoが使えます。お金がかかりますし、他のサイトとかぶることもありますが、非常に高画質な写真があります。
また、背景画像を表示するにはBackstretchを使うといいでしょう。
/img/フォルダに画像ファイルを置いて、以下のようなJavaScriptを実行すればOKです。

$.backstretch("/img/winter.jpg");

また、コンテナの背景画像をGIMPなどを使って透過させるとよい感じです。
Bootstrapを使っている場合には以下のようなコードでコンテナに透過背景を設定します。

.container-narrow {
    background: url(/img/透過させた背景パターン.png) repeat 0 0;
}

カラースキーマを考慮する

以上のことでかなりサイトが改善されますが、まだ、ボタンやメニューの配色がBootstrapっぽいままです。
実際のデザインの現場では非常に慎重に配色や色調が決定されますが、Color Scheme Designerなどを使って簡略的に補色などを見つけることができます。

配色が決定したらBootstrap Buttonsを使って新しいCSSを生成してもいいですし、直接CSSを編集してしまってもよいでしょう。
イメージにマッチする色の組み合わせが見つからない場合にはColourloversのようなコミュニティサイトを探してみるといいでしょう。

本を読む

以上のようなテクニックを使うことでプロっぽいデザインを素早く作ることができます。
もし、もっと時間があれば、デザインについて学んでみるのがいいでしょう。
筆者のおすすめとしてはDavid KadavyのDesign for Hackers: Reverse-Engineering Beautyが挙げられます。
基本的な配色やフォント、レイアウトについて学ぶことができます。30分ではなく半日の時間を割けるのであれば、Davidの本を読むことをお勧めします。

以上、適当翻訳でした。
途中かなり端折ってますが…。ちなみに僕はBootswatchで大まかなデザインを決めて、Jetstrapでレイアウトしてしまうことがほとんどなのですが、この辺はもう少しよくしていきたいですね。