電脳狂想曲 Webデザインの小技

ウェブページ作成時の白銀比（A4用紙の縦横の比率）・黄金比・白金比・第二黄金比を使ったレイアウトを表示することができるツール。

実際に横幅・縦幅を指定すると、その四角形を分割します。さらに指定のサイズで再分割もできるすぐれもの。

ウェブサイト作成初心者でも美しく見える比率でタイトル・メニュー・コンテンツ・アフィリエイト広告などを配置すれば自然とナイスデザインサイトにすることが可能です。

ColorSelector

アクセシビリティの高い背景色と文字色の組み合わせを、リアルタイムに確認することができる、開発者の為の強力な支援ツール。

ディスプレイ上に表示される色ならスポイト機能を使うことで文字色と背景色の見やすさを簡単に判定できます。ウェブページに表示されている色に加え、Microsoft PowerPoint・Excel・Wordなど一般的によく使うソフトウェアで表示された色もスポイト機能で簡単に判定できます。色のRGB値を入力して使用することも可能です。

一般・白内障・第一色覚障害（赤）・第二色覚障害（緑）・第三色覚障害（青）での見やすさを表示可能。カラーパレットを表示することができ、見やすいカラーを簡単に選択可能。見やすい色・見にくい色が一目で判定できます。

Colorselectorは無料でダウンロード可能で、WindowsとMac OS Xで動作します。

Dynamic Drive CSS Library

海外のサイトなのですが、WEB2.0的なホームページデザインのCSS部分のサンプルソースが満載です。

美しいデザインのCSSや何らかのアクションが付いているものなど見ているだけでも楽しむことができます。HTMLやCSSはコピー＆ペーストで利用可能です。

日本のサイトではほとんど見かけないようなCSSの使い方も参考になります。導入するとみんな驚くかも？

Lightbox JS v2.0

サムネイル画像をクリックして実寸サイズ画像を表示させるツールとしてはとてもウェブ2.0的なスクリプト。

ホームページ上のサムネイル画像をクリックすると原寸大の画像がブラウザ画面中央にハイライトで表示され、画像の周囲がフェードアウトし暗くなります。オーバーレイがなんとも美しいスクリプトです。

フォトサイトなど画像中心のサイトでの活用、ポップアップのはスマートな表示方法ではないので違う方法を探している方、導入してみては？

設置方法を解説しているサイトがたくさんあるのでサーチエンジンなどで検索してみてください。レンタルブログなどでは改造が必須の模様です。

ウェブワッペン

ウェブサイトやウェブログに貼れるアイコン画像をオンラインで簡単に作ることができる画像作成サービス。

必要な情報を入力するだけで簡単にあなただけのワッペンが出来上がります。色やサイズ・フォント・テキストなどは変更可能です。

ブログで良く目にするRSSアイコン・サイトロゴ・バナー・ボタンなど工夫次第で自由自在に作成することができます。