naoyaです。
今日は最近見つけました”ウェブデザインに不可欠なツールサイト”を紹介します。その名前も「Web Design Tools - thePeoplesToolbox」です。このサイトはウェブデザインの使われるさまざまなサイトをまとめたサイトです。

それでは、さっそく使ってみることにしましょう。
まず、最初にユーザ登録した方が自分のツールボックスにできるので登録してみましょう。
登録するには、右上の"login"リンクから、必要な情報を入力するだけでその場で登録完了となります。"Enter Code"には、"Authentication Code"と同じ文字を入力します。

ウェブデザインサイト１ posted by (C) フォト蔵

ログイン後、"home"リンクからトップページを表示すると、ウェブデザインに使えるサイトの一覧がカテゴリ別に表示されています。
この中から、好きなものを選択して"box"ボタンを押すルと自分のツールボックス(Your Tool Box)に登録される仕組みになっています。

それぞれのカテゴリには登録しているユーザ数が表示されていて、どのサイトが人気があって使いやすいのかが分かるようになっています。

せっかくなので、それぞれのカテゴリで一番多く登録されているサイトを紹介します。

Color（色）

Color カテゴリのトップには、4096 Color Wheel というサイトが登録されています。
このサイトは、色見本円の上にマウスカーソルを置くと、すぐに RGB コード出力されるようです。円の下には、前後の近い色も表示されるようになっており、さらに右にはその色に近い RGB のいずれかの色見本が表示されています。
あの色の RGB コードが分からないときに、すぐに調べるサイトにはかなり使えると思いました。

CSS

CSS カテゴリのトップには、spiffy corners というサイトが登録されています。
このサイトは、イメージや JavaScript をまったく使わずに CSS と HTML だけのシンプルな角丸ボックスを作成することができるサイトです。

サイトの上部に表示例があるので、次の項目を入力して、最後に枠線の太さのボタンを表示すると CSS と HTML コードがあわせて表示されます。

・CSS クラス名
・背景色
・前景色

例えば、次のような角丸ボックスを簡単に作成することができます。

ウェブデザインサイト２ posted by (C) フォト蔵

このサイトは、角丸ボックスを簡単に作れるので便利です。

fonts（文字）

fonts カテゴリのトップには、9800 Free Fonts というサイトが登録されています。このサイトは、名前の通り 9800 もの無償でダウンロードできるフォントをダウンロードすることができるサイトです。

フォント名のアルファベット順でフォントのプレビューが見れるようになっていて、その場からすぐにダウンロードすることができます。
海外のサイトなので、日本語フォントが残念ですが、それにしてもいろいろな種類のフォントがあるものだなと思いました。

html

html カテゴリのトップには、Webmonkey|Reference: Special characters というサイトが登録されています。このサイトも名前のとおり、HTML の特殊文字一覧表があるサイトです。実は、僕もついさっき HTML の特殊文字を検索したところですが、このサイトですぐに分かります。

こんなにも HTML 特殊文字があるとは勉強になります。

icon（アイコン）

icon カテゴリのトップには、Free! Icons for your site というサイトが登録されていますが、現時点ではつながらなかったのでかわりにfamfamfam.com というサイトを紹介します。このサイトは、ウェブサイトでよく使われるアイコンを無料で提供してくれるサイトです。アイコンの数は少ないですが、ブラウザのボタンや国旗などとても分かりやすいアイコンをダウンロードすることができます。

images（イメージ）

images カテゴリのトップには、BLUE VERTIGO というサイトが登録されています。このサイトは、有料サイトですが高画質のイメージを早くお手頃な価格で入手できるサイトのようです。有料サイトなので、紹介はしないでおきたいと思います。

inspiration（ひらめき）

inspiration カテゴリのトップには、Zen Garden というサイトが登録されています。このサイトは、サイト自身の HTML とCSS をダウンロードできるサイトです。Zen Garden というサイトは左側に透過している背景があったり、右側にメニューがあったりと、とても美しいサイトです。

このサイトの CSS や HTML をベースにすれば、すぐに同じようなデザインを持ったウェブサイトを作れると思いました。

tutorials（チュートリアル）

tutorials カテゴリのトップには、lynda.com というサイトが登録されていますが、現時点ではつながらなかったのでかわりにその次の登録数が多い Dynamic Drive CSS Library を紹介します。このサイトは、CSS を使ってウェブサイトのメニューとして使えるさまざまな種類のメニューの CSS など詳しい解説が掲載されているサイトです。さまざまな種類のメニューから、自分のウェブサイトにあったメニューを選択するとよいと思いました。

widgets（ウィジェット）

widgets カテゴリのトップには、Lorem Ipsum というサイトが登録されています。このサイトは、印刷用のシンプルな段落をもった文章のサンプルを表示してくれるサイトのようです。

というわけで、今回はウェブデザインに不可欠なツールサイトを紹介しました。
今回紹介したサイトをツールボックスに入れると、次のようになります。

みなさんもそれぞれのカテゴリからデザイン用のウェブサイトを使ってみて、自分のツールボックスに登録してみてください。

ウェブデザインサイト３ posted by (C) フォト蔵

前回のエントリのデザインセンスの無い人がwebサイトを作成する際に参考にしているサイトとあわせて使うと、ウェブサイトをデザインするには、必須のツールとなりそうです。