Webデザインの効率化に役立つツール&サイトまとめ「配色」「フォント」など


Webデザインの効率化に役立つツール&サイトまとめ「配色」「フォント」など
(編集部注:2013年08月29日に公開された記事を再編集したものです。)

こんにちは。デザイナーのせいとです。皆さん、お盆はいかがお過ごしになりましたでしょうか。

僕はというと、友人と海へ行ったり、公園でBBQしたり、大規模な飲み会をやったりするみんなのフェイスブックを家で見て過ごしました。虚無感がハンパないので、おすすめできる過ごし方ではないかもしれません。

さて、今回はWebサイトをデザインするときに手助けしてくれる便利なWebサイト&サービスをご紹介させていただきます。


【こちらもおすすめ】

Webデザインの作業効率化に役立つWebサイト&サービスまとめ9選

1. 配色を秒速でシミュレートするなら その1「kuler」

design_ser4

言わずと知れたAdobeのサービス。
配色を自由にシミュレートできるだけでなく、他の人が制作した配色を見たり評価できるので超参考になります。

2. 配色を秒速でシミュレートするなら その2「hue360」

hue360

「HSV(色相・彩度・明度)」をいじりながら色の組み合わせを決められるサイト。kulerとはまた違ったやり方で配色を考えられます。

3. 横幅960pxでグリッドデザインするなら「960.gs」

design_ser7

「960.gs」では、ラインが引かれた横幅960pxのPSDデータを何種類かダウンロードできます。
また、サイト上には横幅960px前後でデザインされた有名サイトが複数掲載されていて、右上の「show grid」ボタンを押すとグリッドが引かれた状態で見えるなどして参考になります。

4. 角丸やドロップシャドウなどのCSS3を速攻シミュレートするなら「CSS3 MAKER」

design_ser1

こちらのサイトでは角丸、ドロップシャドウなどのデザインをシミュレートできます。
簡単なものから複雑なものまで試せる上に、CSS3でコードを吐き出してくれるのでおすすめ。

5. グラデーションをCSS3で手っ取り早く書きたいなら「Grad3」

design_ser3

CSS3で簡単なグラデーションを書きたいならこちらがおすすめです。UIがシンプルで使いやすいので、ささっと書きたいときは重宝します。

6. 話題のロングシャドウをCSS3でささっと実現するなら「LONG SHADOWS GENERATOR」

design_ser2

話題のロングシャドウがシミュレートできます。もちろん、コードも吐き出してくれます。

7. フォントを一覧にしてざっと見比べたいなら「wordmark.it」

design_ser6

テキストを打ち込んでエンターを押すと、PCにインストールされているすべてのフォントでテキストを一覧表示してくれる優れもの。

「ロゴ制作のアイデア出しに!自分のPCに入っているフォントを一覧表示できるWebサービス3つ」には、フォントに関するサービスが他にも記載されていますのでぜひ。

8. Fireworksでボタンを制作する際にインスピレーションが欲しいなら「Daily Button」

design_ser5

こちらのサイトでは、デザイナーの方々が制作したボタンデザインをfw.pngデータでダウンロードできます。どうやって作っているのかまでわかるので、大変勉強になります。

9. ダミー画像を一瞬で用意するなら「Dynamic Dummy Image Generator」

design_ser8

ダミー画像が一瞬で作れるサイトです。背景色やテキストも多少いじれます。

まとめ

いかがでしたでしょうか。
最近は便利なサービスのおかげで、Webデザインをするときの効率化が図れるようになりましたね。この他に何かおすすめのものがあれば、教えていただけると幸いです!

 

この記事を書いた人

せいと
せいと フロントエンドエンジニア 2012年入社
最近フロントエンドエンジニアになりました。
第一回HTML5カルタ大会で優勝しました。
休日の過ごし方は、"Jazz Barでスコッチを片手に『世界の終りとハードボイルド・ワンダーランド』を読む"です。