Webデザイン Archive

Color Scheme Designer

Webサイト製作時、またブログのカスタム時に悩む配色設定ですが、このColor Scheme Designerは配色を決定するのに便利なプレビュー画面つきの配色ヘルパーです。

モノトーンからマルチカラーまで大まかに好みの配色パターンを設定して、彩度や明るさ、コントラストを微妙に変更しながらより良い設定を模索できます。

明るめと暗めのそれぞれのデモサイトを表示できたり、出力もHTML＋CSS、XML、TEXTの3種類から選べるので、追い込んだ配色を簡単に自サイトに反映できます。

とてもよく練られたインターフェイスでサクサク動作できるのが好印象。

ただし、現バージョンはIE6のサポートはしてないと書いてありますが、なぜかIE7でも動作しませんでした。FireFoxなら問題なし。

minimalsites

余計なデザインは省き、必要なものを必要な位置に配置するという音楽やアートの世界に広がるミニマルムーブメントはWebデザインにも少なからぬ影響を与えています。

そんなミニマルデザインのサイトを集めたギャラリー。

整った配置と潔い間が心地いいです。

Typetester

Webで一般的に使われるフォントや手持ちのフォントをオンラインで視覚的にテストと比較ができるサイト。

パッと見た目はゴチャゴチャしていてめんどくさそうですが、よく見ると簡単。

左上のテキストボックスに打ち込んだテキストをグレーの部分でフォントやパラメーターを変更すると、白い部分に結果が表示される。

横に3つ並べて他の候補フォントと比較することができる。また、右上のGet css for～の部分で、CSSのコードを表示させることもまるで可能。

機能に特化してインターフェイスもよく練られた素晴らしいサイトです。

あ。ただ、フォント選択ボックスの下側は自分のローカルに保存されているフォントを呼び出すことができるんですが、それが何でできるのか仕組みが不明（笑）。

iDeal Interactive

「あれ？読み込んでない？？」と思わせておいて。

ソウキタカ！

というデザイン。

KOLME

可愛らしいアイコンのシリーズものです。

Schoolシリーズ、Sumoシリーズ、Edoシリーズなどテーマ別に壁紙もあり、デスクトップをお好みのテーマで埋め尽くすことができます。

好き嫌いはあるでしょうけど個人的にこういうキャラクターが好みだったのでご紹介しました。

あ。iGoogleスキンもあった（笑）。

freshgenerator

最近あんまり聞かなくなってしまった「Web2.0」という言葉ですが、実のところ私はWeb2.0って結局何だったのかよくわかっていません（笑）。

言葉は聞かなくなってもWebデザインの傾向はなんとなくWeb2.0ぽいですねってのはわかるつもりで、ストライプだとかツヤツヤしたガラス球のようなデザインはそこここで見かけました。

このサイトは、プレビューを見ながらそのWeb2.0とやらに準じた画像を作成できるというジェネレーターなんですが、特徴としてまずインターフェイスが秀逸です。

下のメニューにカラー、幅、高さなどを変えるスライダーがついていて、それぞれ自分の好みの数値までスライダーを動かしてUpdateボタンを押すと、上部に表示されているプレビュー画像がリアルタイムで表示されます。

そのプレビューを確認しながら自分のお好みのWeb2.0（くどい）風画像を作るしくみ。

特に説明しなくても、よくできたインターフェイスというものは眺めるだけで直感的に操作できるようになるというものです。完成した画像は右クリックでローカルに保存し、思う存分Web2.0ライフを楽しんでください。

ava7 patterns

背景に使えるパターン（繰り返し貼って柄になる）素材が無料でダウンロードできるサイト。

その数実に800パターン以上！

お好みの色やシェイプから効率的に目的の素材を探せる仕様。サクサク動いてプレビューも簡単。

こういう何かに特化したサイトはブックマークしておくべきですね。

Download 60 awesome grunge background for free

Webデザインの中でもポピュラーなデザインモチーフのひとつであるグランジ調の背景をダウンロードできる。

背景を決めたら、自ずと上に乗っけるフォントやメッセージが浮かんできそうなほどのインパクトとクォリティ。

ただし、ダウンロードにはストックしてある別サイトのアカウントが必要。