インフォグラフィックのアニメーションgifを作ってみよう！：2/4

こんにちは、AnyIllustスタッフです(｀･ω･´)ゞ

今日も引き続き、インフォグラフィックを制作していきましょう！
前回は、良いインフォグラフィック作品の特徴をまとめましたね

■シンプルなイラスト
■重要な（グラフ、数字、見出しなど）情報は大きく
■色がキレイ
■情報の「カタマリ」がわかりやすい

スタッフが調べてまとめた結果は、このようになっていました
この特徴を真似しながら、オリジナルのインフォグラフィック作品を作りましょうヽ(=´▽`=)ﾉ

かといって、いきなり一からいいものを作ろうと思うと、難しいものですよね
そこでまずは制作に役立つサイトをご紹介します

■シンプルなイラストに…素材サイト

やっぱり、イラストを用意するのが一番時間もかかるし難しいものですよね
そこで、インフォグラフィックにぴったりな、シンプル系の素材サイトをご紹介します
自分の希望にあった素材がありそうなサイトを見つけてくださいね
（利用規約は各サイト様でしっかり確認をお願いします）
カラーイラスト
シルエットイラスト
シルエットデザイン【シルエット系はシンプルで相性がいいです】
http://kage-design.com/wp/
ハンコでアソブ【ワンポイントに】
http://hankodeasobu.com/
ICOOON MONO【1色のシンプルなアイコン、種類も豊富】
http://icooon-mono.com/
FREE LINE DESIGN【グラフとしても使えるかもしれませんね】
http://free-line-design.com/?cat=6
HUMAN PICTOGRAM【ピクトグラムは使い勝手○、aiデータもあるので便利です】
http://pictogram2.com/
いらすとや【有名なサイトですね、可愛い素材がたくさん】
http://www.irasutoya.com/

■重要な情報を目立たせるために…太字フォント

文字を目立たせるには大きくするだけでなく、太くすることも重要です
そこで、太さがあるフォントをご紹介します
M+FONTS【太さが豊富です、ゴシック体】
http://mplus-fonts.osdn.jp/about.html
Rounded　M+【M+を角丸にしたフォント】
http://jikasei.me/font/rounded-mplus/
Noto Sans Japanese【GoogleとAdobeが共同開発、Noto Sans CJK JPが日本語フォントです】
https://www.google.com/get/noto/
コーポレート・ロゴ【企業ロゴ風、medium(ふつう)とbold(太)の二種】
http://logotype.jp/corporate-logo-font-dl.html
にくまるフォント【太字がぷにっとしていて愛嬌のあるフォント】
http://www.fontna.com/tag/%E3%81%AB%E3%81%8F%E3%81%BE%E3%82%8B/

■きれいな配色に…配色補助サイト

色について考えるのは、慣れていないととても難しいですよね
しかも配色がいいだけで、同じイラストや情報を使っていても格段に魅力がアップします
そういう色で困ったときのために、配色の補助をしてくれるサイトをご紹介します
いい感じの色を自動生成してくれたり、人が作った配色を眺めることができるサイトです
coolors【選んだ色と相性のいい配色パターンを自動生成してくれるサイト】
https://coolors.co/
color hunt【毎日オシャレな配色パターンが登録されていくサイト】
http://colorhunt.co/
adobe color【作成だけでなく、左上の探索から人が作った配色も見られます】
https://color.adobe.com/ja/create/color-wheel/
HUE 360【選んだ色と相性のいい色を教えてくれるサイト】
http://hue360.herokuapp.com/

■情報のカタマリをつくるために…参考サイト

情報…つまり文字のレイアウトを学ぶために、参考になるサイトをピックアップしました
少し目を通してルールに従って要素を並べるだけで、ぐっと初心者っぽさが抜けていい配置ができるようになるはずです
伝わるデザイン（レイアウト）【画像付きで解説、わかりやすいです】
http://tsutawarudesign.web.fc2.com/miyasuku1.html
デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ
【コムテブログ様の記事、レイアウトだけでなく行間や字詰めに関する解説も】
http://commte.net/blog/archives/4547
デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック
【コリス様の、海外ブログの翻訳記事です。本当に一つ一つがとても重要なテクニックです】
http://coliss.com/articles/build-websites/operation/design/20-design-rules-by-canva.html

どうでしたか？
見ているだけでどんなインフォグラフィックを作るか妄想が膨らみますよね(｀･ω･´)
これらの情報はインフォグラフィックだけでなく、パワーポイントで作る企画書やちょっとしたイベントのチラシ制作などにも役立つはずです
ぜひ、普段から活用してみてくださいね(o・ω・o)

記事一覧(完結済み)

any-illust.com