web制作

webデザインの便利ツールまとめました【デザイン参考サイト・カラーチャート】

こんにちは。
フリーランスwebエンジニアのNatsumiです。

先日はweb制作の時に使える便利ツールを紹介しましたが

webデザインも時々やらせていただいているので
その時に参考にしているサイトもまとめておこうと思います^^

デザイン参考サイト

pinterst

デザインに限らずいろんな画像を探せるサイトです。

「サイト」などで検索すると
LPのデザインなどがたくさんでてくるので
この中から「今度はこういうデザインでやってみたいな」と思うものを
保存しておきます。

「ボード」というもので案件ごとに管理したりできるので
このボートのリンクをクライアントに送って
雰囲気を確認してもらうこともできます。

I/O 3000 webデザインギャラリー

ここはwebデザインだけをまとめたサイトです。

右にあるメニューから色やカテゴリーでデザインを絞れます。

MUUUUU.ORG

これもwebデザインをまとめたサイトです。

カテゴリーメニューからデザイン絞れます。

WEBデザインの見本帳

これもwebデザインをまとめたサイトです。

色とか、雰囲気からデザインを絞れる機能が良いです。

LP アーカイブ

これもwebデザインをまとめたサイトです。

このサイトも色やカテゴリでデザインを絞れます。

ランディングページ集めました。

これもwebデザインをまとめたサイトです。

業種でデザインが絞れます。

スマホサイトWEBデザイン集 AGT

これもwebデザインをまとめたサイトですが、スマホデザインに特化しています。

マウスオーバーすると
スクロールしているみたいにサイトデザインを確認できるのが面白い。

スマートフォンサイトのデザインリスト集

これもwebデザインをまとめたサイトですが、スマホデザインに特化しています。

こちらも色やカテゴリでデザインを絞れます。

カラー参考サイト

サイトデザインなどで
配置や余白などもデザインの重要要素ですが
色の組み合わせも重要な要素です。

その色の組み合わせについても便利にまとめてくれてあるサイトがあるので
参考にしてwebデザインしてみましょう。

【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選

このサイトみてるだけでも楽しいですよ〜

今度はこんな色でデザインしようかなって
考えるだけでも楽しいです^^

Color Drop

上記のサイトより色の参考サンプルが多いので
より多いサンプルから選びたい人はこちらです。

paletton

上記のツールだと4つの色を提案されて
いいと思うものを使う
って感じなんですけど

「この色を使いたいけどこの色に合う組み合わせがわからない」
というときはこのサイトがおすすめです。

メインカラーを選択したら、配色パターン(同系色、補色など)を選択すると
カラーチャートを出してくれます。

まとめ:デザインはたくさん見て学ぶ

webデザインのセミナーや

デザインの本を読んで

「デザインはセンスじゃなくて知識」だということなので

できる限り多くのデザインを見ることが
勉強方法かなと思います!

ぜひ参考にしてもらえたらと思います^^

それでは今日はこれで^^