直感的で美しい！インフォグラフィックのデザイン見本を45つまとめました 公開日： 2017/02/26 インフォグラフィック（Infographics）とは、図表や情報を 視覚的に 表現する手法のことです。 華やかで直感的に理解できるため、最近ではインターネットの記事や本、プレゼンスライドなど至るところでよく使われます。 今回はそんなインフォグラフィックの見本を45つまとめて紹介します。ご参考になれば幸いです。 ※ 全て掲載許可を得ています。 この記事の目次 図表を華やかに見せる例 イラストをうまく使う例 手順を表す例 時系列を表す例 1. 図表を華やかに見せるインフォグラフィック 単調な図表でも色づかいを工夫すると美しく見えます。また、人形のアイコンを使って、割合を表現するのは定番ですね。 同系統の淡い色が使われたインフォグラフィックです。 エコを表現したフラットなインフォグラフィックで

作成：2016/10/11 更新：2016/10/11 Webデザイン > デザインの印象の大部分は配色によって決まるといっていいほどです。パッとしないデザインにならないように、配色や色彩の使い方が上達する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 セパレーション（分離配色） 赤とオレンジ色、白とグレーのような似通った色を識別するために区切りを入れる方法をセパレーションといいます。色と色の間に別色を入れて色同士を分離させることによって配色を和らげたり、引き締めたりします。服でいえばベルトやインナー、フォントならアウトライン。 メリハリがつくので元気な印象や活発さを出したいときに使えます。これとは逆に明度順に並べることをグラデーション配色といいます。 色彩の調和/セパレーション カマイユ わずかな明度差を利用した配色方法をカマイユといいます。曖

ウェブデザインやアプリのUIを作成する際にどのような色を選んで組み合わせるべきなのかは非常に重要ですが、だからといってプロのデザイナーに頼むほどではない、というときに実践的な組み合わせのカラーパレットをスペースバーを押していくだけで爆速自動生成してくれるのが「Coolors」です。 Coolors - The super fast color palettes generator! http://coolors.co/ 「Coolors」にアクセスすると、すでに自動生成されたカラーパレットが表示されています。 スペースキーを押すだけで次々とカラーパレットが生成されていくという超簡単操作。 表示もサクサクなので、ただ変えていくだけでもすぐに理想の組み合わせが見つかるかも。 また、カラーバーのどこかをクリックすると、バーの下側に「LOCKED」と表示されて固定することができます。 もう一度スペ

Webサイトなどの制作を進める上でできればセンスの良いサイトと思われたい！ ブランドイメージや、伝えたいメッセージが伝わりやすいレイアウトにしたい。 そうは思うものの、自分のセンスでは大丈夫かどうかが不安だし・・・。 配色はどうしたらセンスが良く、分かりやすいものになるのかしら？ そんなお悩みをお持ちの方も多いのではないでしょうか。 魅力的な配色は、実はセンスではなく、ある程度法則や基本的な考え方を知る事で作ることができます。 今回は基本的な配色テクニックをご紹介します。 是非制作の際の参考にしてみて下さい！ 専門家にWEB販促の相談をする（無料）／WEB販促の窓口 ※本記事はニフティ株式会社提供によるスポンサード・コンテンツです。 ※本記事は2014年6月5日に公開された記事をLISKUL編集部にて再編集したものです。 配色の大原則まずは、配色の大原則を知りましょう。制作をする上で使う色

こんにちは、デザイナーのタカハマです。「キーカラーは決まったけど、色数を増やすと変になる…」「いつも色選びがワンパターン」「色相環ってどうやって使うの？」そんな色選びのお悩みをズバっと解決するかもしれない、配色のコツをご紹介します。また、キーカラー選びの段階から悩んでいる方は、前回の記事（色の基礎知識と色彩心理）が役に立つかもしれませんので、あわせてご覧ください。 「ジャッドの色彩調和論」と配色のための3Step ひとくちに配色理論と言っても、ニュートンやゲーテに始まり多くの学者や画家がそれぞれの持論を展開してきており、これが正しいというものはありません。今回は、その中でも20世紀半ばまでの先人たちの色彩調和論を”4つの原理”にまとめた「ジャッドの色彩調和論」に焦点をあて、配色のための3Stepをご紹介します。 （本記事の内容に明らかな間違いがあれば、ご一報いただければ幸いです。） Ste

By OliBac コンピュータが色に名前を付ける時、数字やアルファベットを6つ並べた1677万7216通りの組み合わせで表される16進数カラーコードが使われます。カラーコードは他のコンピュータ言語と同じく論理的なシステムに基づいて作られるため、Webデザインを行う人間にとって16進数カラーコードを知っておくことは非常に助けになるとして、WebデザイナーのBen Gremillionさんがカラーコードの仕組みや便利なテクニックをまとめているのが「The Code Side Of Color」です。 The Code Side Of Color | Smashing Coding http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/ そもそもスクリーン上のカラーは指定がない場合は黒いままで、16進数カラーコ