HOME 　»　color , css , design , Firefox , webservice 　»　サイト作りに使えそうなサイト

サイト作りに使えそうなサイト

ここ数週間、サイト改装やら何やらに関連して、デザイン作りに役立つ情報はないかなぁ？とちまちま探しておりました。
私はサイト構築はただのシロートで、その上使えるツールはちょっとしか持っていないのですが、できれば小綺麗なデザインにしたい訳です。
だけど悲しいかな、難しい話は理解できないので、安い・うまい・早いを兼ね備えたTips情報を求めてさまよっていた訳で。

そんな事を繰り返すうちに、ある程度情報がたまってきたので、まとめ書きしておきます。
ブックマークに入れておいても、ブックマークした事自体を忘れてしまうので、こうやって記事に仕立て上げると自分的にも便利なんですよねぇ。

ColorMixers: Remixing RGB since 2003

自動的に配色を算出してくれるサイトで、類似サイトも結構たくさんあるんですけどね。

ここのサイトは『Option』で基本の色と、それを展開する際のベースカラーを決めて9色算出したあとに、上の3原色レバーを調整する事によって直感的に配色を変化させる事ができます。
さらにそのデータをPhotoshop・Illustrator用の配色外部ファイルとして保存する事も可能です。ちょっと珍しいですよね。
もっともビンボーな私はAdobe系ソフトを一切持っていないので、この機能は全く役立たずなのですが。

カラーパレットを自動作成するサイトいろいろ

最初に紹介したもの以外にもこんなにたくさんあるみたいです。
これだけあればもう無敵。女なら黙ってブクマでしょう！

WEBデザインツール：カラーパレットを自動作成するサイト数々 by Goodpic

手っ取り早いCSSサイトの作り方

ネタ元はこちらです。

Ocher – フルCSSサイトの超高速構築 by masa4.net

詳しい解説はリンク先で読んで頂くとして、ここではポイントを箇条書きで。

1. 画面デザインを領域に分け、名前を決めておく。
2. 見出しレベルを確認。
3. Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。
4. 見出し付けを行う。
5. メニュー項目のリスト化。
6. DIVで各領域を確定。
7. 上から順にCSSを定義。（ソースの出現順に。）

と、こんな手順でサイトを作ると、手っ取り早くサイトが完成するとの事です。だけど、これって別に Dreamweaver に限った方法論じゃないと思うんだけどなぁ…。
リニュ直後、IE以外で激しくデザイン崩れを起こしていたので、こちらの方法で個別記事テンプレートを一から作り直してみました。有りものを修正するよりは、綺麗なソースが手っ取り早く書けたような。
それにしてもこのサイト…。

似非デザイン技法

これは最高にいかしてますよ（笑）。
手っ取り早く、見た目をそれっぽくする（見た目でごまかす）知恵をまとめておく。
別名、「似非デザイナーになる方法」。

• 空白を上手く使えるようになると一流の似非デザイナー。
• 写真素材を入れておく。これだけでかなり華やかになる。
• 色に迷ったら、白かグレーにしておく。
• 背景色と、メインカラー、サブカラーとアクセントの、最大でも4色ぐらいがいい。
• 小難しい絵は小さめ、きれいな絵は大きめで。
• 単純に四角を書くだけでなく、同系統で薄めの色で、かつ背景色とのコントラストのある色で、1ピクセル（←重要）で囲っておくと、しまりが出てかっこいい。

挙げられている条件の中で私がいつも気を付けていたのはこんなところでしょうか。
他にもすぐに使える簡単なナイス小技がたくさん紹介されていますので、デザイン案に詰まった方は是非。

フォント関連

• フォントブラウザ(激しくIE限定)
• フォントサイズチェック : by www.ichiro.to

前者はIE系限定ですが、フォントの名前をクリックすると、例文が指定フォントに一発変換されるようになっています。
フォント選びってなにげに迷うので、これは結構使えるサイトのような気がします。直感的に扱えるので、わかりやすいですねぇ。
後者はフォント種別を入力すると、そのフォントを用いていろんなサイズで出力してくれるサイトです。
いちいちコピペしなくちゃいけないのがちと面倒なのですが、FirefoxでもOperaでも動作するようなので、他のブラウザだとフォントがどのように表示されるのか、前もって確認したい時に便利かもです。

Popularity: 39% [?]

Related Posts

• 写真みたいな枠を付けよう【MT用小ワザ付き】
• 今年のブクマをおさらいしてみた。
• レイアウト崩れ修正（その2）
• エセテーブルを組む
• 「激しく使える」サイトの自分用まとめ・その2

• Tags : color , css , design , Firefox , webservice　|　TrackBack URL
• Prev : クレイジーケンバンド@本牧市民球場に行ってきた話とか　|　Next : iTunes5をいじってみたはいいものの