TOP  >  配色

Tag : 配色

2017年07月07日

美しい配色を思うままに!クリエイティブなグラデーションパターンセット「coolhue」

近年流行になりつつあるグラデーション表現を取り入れたデザイン。背景やボタンなどのベタ面に、シンプルながらもニュアンスをつけることができ非常に便利な手法です。そんな今回ご紹介するのは、グラデーションの配色パターンを30種類まとめた「coolhue」です。

coolhue02

キュートな印象を与えるフェニミンなグラデーションから、コーポレートサイトにピッタリな先進的なカラーリングまで多数のグラデーションパターンが揃います。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2017年05月24日

これで配色の組み合わせを迷わない 便利で簡単なカラーパレット作成サイト「Color Supply」

視覚的要素の中で一番重要だと言っても過言ではない色。配色バランスを決めるのはなかなか難しく、それが2色、3色と増えることで難しさは増していくのではないでしょうか。そんな時に活用したい、便利で簡単なカラーパレット作成サイト「Color Supply」を今回は紹介したいと思います。

配色サーチ01

円形の色相環図をぐるぐると選択するだけで、バランスの良い配色パターンを生成できる、とても便利なwebツールとなっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:00  |  
Category: Tool   
このエントリーをはてなブックマークに追加
2017年03月30日

色を比べてすぐ使える!2画面で比較できる便利なカラーピッカー「ColorMe」

使いやすいwebサービスを知っているだけで、作業効率が随分違うもの。そんな中今回ご紹介するのは、web作りの強い味方として活用できる、2画面で比較して色を作れる便利なwebカラーピッカー「ColorMe」です。

TU1lhzub0ND1SEmXMxRzT8lOBIaSVECBAgQIECAAAECBAgQIECAAAECBAgQIECgHAEJjnLc1UqAAAECBAgQIECAAAECBAgQIECAAAECBAgkCEhwJOApSoAAAQIECBAgQIAAAQIECBAgQIAAAQIECJQjIMFRjrtaCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQQBCY4EPEUJECBAgAABAgQIECBAgAABAgQIECBAgACBcgQkOMpxVysBAgQ

2画面に分かれていることで色を比べながら作れるので、迷うことも少なく最適な配色を短い時間で導き出せる、個人的にもおすすめのwebサービスです。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2017年01月19日

感情・ターゲットなど様々切り口から配色を提案してくれる配色ツール「Culrs」

デザインに置いて色は非常に重要な要素の一つで、その配色でデザイン全体のイメージが左右されるほど。それだけに配色というのは難しい決定頁の一つでもあります。今日紹介するのはそんな難しい配色の手助けをしてくれる、感情・ターゲットなど様々切り口から配色を提案してくれる配色ツール「Culrs 」です。

1

「Culrs」は左側のメニューからEmotions、Target Audience、Type of productsなど選択でき、そこからさらに細分化された項目での色彩パターンを提示してくれます。いくつか試してみましたので以下からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:30  |  
Category: WebService   
このエントリーをはてなブックマークに追加
2017年01月14日

マテリアルデザインのためのカラーツールまとめ「9 Useful Tools for Creating Material Design Color Palettes」

スマートフォンのWEBサイトデザインをはじめ、マテリアルデザインを導入するWEBサイトが増えてきました。マテリアルデザインとはZ軸の概念を取り入れ、WEBページ上の要素の重なりを現実世界に近い形で表わすもので、要素同士が重なるため、それだけに配色も重要になってきます。今日紹介するのはマテリアルデザインのためのカラーツールまとめたエントリー「9 Useful Tools for Creating Material Design Color Palettes」です。

0573-01-material-palette
material palette

いくつかのカラーツールがまとめれられていましたが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2016年08月27日

画像に併せて最適なグラデーション背景を出力できる「Grade.js」

デザインにおいて配色はとても重要な要素であり、かつ難しいものでもあります。単色同士の掛け合わせのみならず、写真にも色は数多く使われており、利用する写真によっても合う色、合わない色があります。今日紹介するのは画像に併せて最適なグラデーション背景を出力できる「Grade.js」です。

gradejs

このjavascriptはgradient-wrapというclassで指定した要素内の画像に応じて、その配色を読み取り、画像を引き立てるのに最も有効なグラデーション背景を生成してくれるjavascriptとなっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:32  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2014年01月06日

六角形のデザインフリーアイコンセット「15 Free Hexagon Icon Sets For Your Project」

アイコンデザインにはさまざまな種類があり、テイストだけでなく形状も多彩な種類が存在しています。そんな中今回紹介するのは、六角形のデザインフリーアイコンセット「15 Free Hexagon Icon Sets For Your Project」です。

hexicons4
Dribbble – Hexicons by Charles Patterson

すべて六角形でできたアイコンがまとめられており、用途に合わせて使い分けることができるいろんな種類が紹介されています。気になったものをピックアップしてみましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:34  |  
Category: Design   
2017年05月20日

430種類もの手描き風イラストがセットになった「430+ FREE storyboard illustrations by Julian Burford」

デザインに分かりやすく親しみやすく、彩りを添えてくれるイラスト。活用したいと思っても、自分で制作するには時間とコストが掛かるため、なかなか難しいのが現状です。今回紹介するのはそんな方におすすめ、手描きイラストが430種類も詰まった素材セット「430+ FREE storyboard illustrations」です。

430-illustrations-01

ペンで描かれたようなタッチのイラストが、全てベクター形式で揃っており、さまざまなシーンで活躍してくれそうです。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design , vector   
2015年08月08日

写真をもっと高品質かつイメージアップさせられるフリーPhotoshopアクション「50 Time-Saving and Free Photoshop Actions」

撮影した写真は、デザインで使用する前にPhotoshopなどで加工して使用することが多いと思いますが、なかなか思いどりの仕上がりにならないことも。今回はそんな時に活躍してくれるフリーPhotoshopアクション「50 Time-Saving and Free Photoshop Actions」を紹介したいと思います。

phactions1
Premium Looks Photoshop Actions by pstutorialsws on DeviantArt

写真をもっと高品質かつイメージアップさせられる魅力的なアクションが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:02  |  
Category: Photoshop   
2014年12月08日

ハイクオリティでグラフィカルなテキストデザイン作成を可能にするチュートリアル集「Collection of Fresh Text Effect Tutorials」

デザインをする上で欠かすことのできないテキスト。時にはテキスト自体にデザインを加えることで、より印象的なグラフィックに仕上げることができます。今回はそんな時に参考にしたいチュートリアル集「Collection of Fresh Text Effect Tutorials」を紹介したいと思います。

texteffect1208_1
Create a Vintage Bloody Text Effect Wallpaper Design in Adobe Photoshop – Tuts+ Design & Illustration Tutorial

非常にハイクオリティでグラフィカルなテキストデザインを作成する手順を学ぶことができるチュートリアルがまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2011年06月30日

タトゥーのデザインに使用される文字を想像させるフォント集「25 Stunning Tattoo Fonts」

デザイン性の高いフォントを利用することで、人々にコンセプトやデザインイメージを伝えやすくなると思います。そんな中今回紹介するのが、タトゥーのデザインに使用される文字を想像させるフォント集「25 Stunning Tattoo Fonts」です。


The Quickest Shift – FREE FONT by ~KeepWaiting on deviantART

個性的なデザインのフォントを中心に、デザインのポイントやアクセント付けに活躍してくれそうなフォントが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:10  |  
Category: Design , Font   
2009年05月25日

フリーサンセリフフォント集「Typography – 20+ Quality Free Sans Serif Fonts」

欧文書体の大きな分類の一つサンセリフ系のフォント、セリフフォントと違い、飾りが無くシンプルでPOPなイメージがあるフォントです。今日紹介するのはサンセリフ系のフリーフォントを集めたエントリー「Typography – 20+ Quality Free Sans Serif Fonts」です。

20sanserif-01

全部で20個のフリーフォントが紹介されていますが、今日はその中から異k通か気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:47  |  
Category: Design , Font   
tag: Design Font
2014年04月11日

webデザイン制作に欠かすことのできない アイコンセットまとめ「Free PSD Icons: 26 Sets Of Flat Vector Icons for Designers」

webデザインを制作する際に素材として頻繁に利用されるアイコン。種類豊富にストックしておくことで、表現の幅がぐんと広がります。そんな中今回は、フラットなベクターアイコンセットをまとめた「Free PSD Icons: 26 Sets Of Flat Vector Icons for Designers」を紹介したいと思います。

icon140411_1
Free Flat Icons Pack on Behance

定番として使えるタイプから、ちょっと個性的なテーマのものまで、さまざまなアイコンセットが紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2013年01月18日

美しいスクリプトフォントまとめ「10 Free Beautiful Script Fonts to Download」

新しいデザイン制作をする度に、新しく使いやすいフォントとの出会いを求めているというデザイナーの方も多いと思います。そんな中今回紹介するのが、美しいスクリプトフォントをまとめた「10 Free Beautiful Script Fonts to Download」です。


Arabella Font | dafont.com

個性とバランスを兼ね備えたフリーのスクリプトフォントばかりが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:50  |  
Category: Design , Font   
2015年06月19日

いろいろなテーマが揃ったフリーフラットアイコンまとめ「48 Flat and Free Icon Sets for June 2015」

いろいろな種類の素材が展開される中、特にアイコンは多彩なテーマのものが配布されています。そんな中今回紹介するのは、いろいろなテーマが揃ったフリーフラットアイコンまとめ「48 Flat and Free Icon Sets for June 2015」です。

icon0619_0
Free Flat Icon set

ベーシックなタイプから、個性的なテーマのものまで、さまざまな種類のアイコンが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2013年04月05日

ダークな印象のデザイン制作に使いやすいテクスチャパック「Deep Dark Texture Pack」

ダークな印象のサイトを制作する時に、黒一色で表現しようとすると深みのあるデザインを制作するのが難しくなるということもあると思います。今回は、そんなサイトの制作に使いやすいテクスチャパック「Deep Dark Texture Pack」です。

ダークカラーやグランジ感を利用した、ただ暗いだけではない色の美しさを感じられるテクスチャばかりがセットになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:54  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る