インフォグラフィックについていろいろ

2009.10.27(火)

こんにちわ!hsgwです。
今回はインフォグラフィックというものについて自分なりに調べたことをまとめたいと思います。

普段わたしはホームページを作るお仕事をしているのですが、今回グラフをつくるにあたってかなーりショボイものしか出来上がらず・・・
それを見かねたbeshinさんに「世の中にはインフォグラフィックっちゅーもんがあるんだぜよ」てなことを教わり、恥ずかしながら初めてその世界に触れたのです。

グーグル先生で

という単語を入れて画像検索するだけでもわんさか出てきました!!
Flickrでもこんだけ。
他にもこんなところや(13個)こんなところ(50個)colissさんでも紹介されていました。

もう見ているだけで「ウッヒョーなんじゃこりゃー素敵じゃんかー!!」とテンションがあがるあがる。一瞬でインフォグラフィックの虜になってしまいました。インフォグラフィックっていう単語もかっこいいですしね!!
・・・そろそろインフォグラフィックって言葉がゲシュタルト崩壊^q^

以下、簡単にまとめ。

インフォグラフィックとは?
・情報がビジュアル化されたもの。information(情報) graphics(図形)をくっつけた造語。
・円グラフ、棒グラフ、統計表、地図、路線図、天気予報図、楽譜、新聞の番組表など、わたしたちの生活にすでに浸透している。

インフォグラフィックを使うメリット
・文字や数字だけではわかりにくいものをグラフィックとして落とし込むことで、全体が見渡しやすく、事柄の関係性、構造、プロセスを把握しやすいという効果が期待できる。

インフォグラフィック制作上のポイント
・考える
・アイデアスケッチを何度も重ねる
・常にアンテナをはっておく
・点と線と面に置き換える

  • 点:文字や数字
  • 線:線
  • 面:色や面積

自分の備忘録的なものなので、みなさまの制作時のヒントぐらいになれば幸い。

—-
ちなみにインフォグラフィックを調べてたらやたらロンドンの地下鉄路線図が出てくる。ので、ちょっと調べてみた。

1908年
1908

有名な1933年 ヘンリー・ベック作 DLはこちら
1933

なう
now

こうやって並べて年代別に見ていくととても楽しいですね。

今回参考にさせていただいたサイトと書籍

30分フォントメイキング

2009.10.07(水)

こんにちわ!hsgwです。
今回は、ずっと気になっていたフォントづくりに挑戦してみました。

世の中にはふい字とかあくあふぉんととかかわいい手書きフォントが出回っていて、これまでは使うのが主だったのですが、ちょっと時間が取れたのでいい機会だと思い、わたしも作ってみました。

それがこれです!

00

汚い!あまりの汚さに愕然としました。
これで昔習字習ってたんです~と言おうものなら教室の先生に「うちとは無関係です」って言われてしまいそうです。

というわけでボールペンと、文字の大きさがそれぞれ上下不揃いなのが悪いのかな、と思って書き直したのがこれです。

02

サインペンを使ってみました。
うん、なんか、残念ですね。おかしいな~TTEditでパスもいじったんだけどな~。

使ったツールはこちら。
武蔵システムさんの

  • 手書きでフォント
  • TTEdit

原稿用紙まで用意してくれていてとっても便利!
その原稿用紙に文字を書き込んで、「手書きでフォント」で読み込むと、書いた文字を自動でアウトライン化してフォントファイルにしてくれるんです!!!
しかも30日間の無料お試し期間つき!!
ひらがな、カタカナぐらいであればものの30分ほどで出来上がり!!^▽^おってがる~!

ぜひみなさんご自分の手書きフォントをつくってみてくださいね~!

※作成したフォントの配布にはライセンスを取る必要がありますので、お気をつけください

Union Platformを試すんだぜ

2009.10.07(水)

娘が生まれました。beshinです。
あまりにもかわいいです。

Union Platformを触ってみました。久々のwonderflです。
FMSとか、実はほとんど触ったこと無かったので、比べてどうよ。みたいな話にはならないのですが、いろいろ詳しく書いてくれているサイトがあって、見よう見まねでやってみました。(あいかわらずの力技ですね)

3人くらいから楽しくなります。ENTER_FRAMEで通信してるのとかはいいのかな・・・

flash on 2009-10-7 – wonderfl build flash online

参考にしたサイト

うねうねしたものを作りたい

2009.10.01(木)

どうも、darmanです。
今回は、丸をフラッシュで描きます。

ご存知のとおり、フラッシュで丸を描きたければ、
備え付けてあるdraw系のAPIで簡単に描けます。

しかし!
だがしかし!
丸をうねうね動かすにはそいつでは役不足なのさ!

そこで、円を構成している点をすべて自力で描くことで、
さまざまな形に変身出来るみたいです。

それがこれでございます!

This movie requires Flash Player 9

クリックすると丸の形になり、
一定時間ごとにうねうね動き回ります。

今回curveToを使って円を描いたのですが、
普段使い慣れてるイラレなどのペンツールと違って、
コントロールポイントが点と点の間にあるので少し戸惑いました。
三点でカーブを描くことを2次ベジェというらしいです。
イラレとかのコントロールポイントが一つの点に対して2つでてるものを
3次ベジェというらしいですね。

ほんと勉強になるな~