神戸のWebデザイナーの学習ブログ

Webに関する、学んだ色々をアウトプットする場。留学にも興味あり。オタク

インフォグラフィックスとは

私はインフォグラフィックがそこそこ好きなので、

リンクトインで学んだインフォグラフィックの授業を今回まとめようと思う。

今回はまだ概要部分。

 

動画: インフォグラフィックスにおけるストーリーの構築 コース: Illustratorでインフォグラフィックスを作成する 講師: 恒岡 淳一

 

埋め込み件数に制限があるから特にいい内容だったこちらを掲載

 

そもそもインフォグラフィックって・・・

どんなもの?:データをストーリーを通してイラストなどを使い相手に伝える図

できること:データを受け手の視覚のみを通して伝えることができる

目的:データを理解し、受け手に考えてもらうこと

https://i.pinimg.com/564x/68/0d/c1/680dc1cc92f459bb8fb2218ef816137e.jpg

https://i.pinimg.com/564x/62/9f/2e/629f2ee458e0949c43e171ef735af64e.jpg

 

データを使ってストーリーを構築する方法

ストーリーを作成する

「ストーリー」とは・・・データを整理し、どのようにデータを伝えるかの構成をさす

 

ストーリー構成には4段階ある

 

1、質問を考える

テーマ、題材に対して疑問点をあげる

疑問点の着眼点がストーリーの出来を左右する

例:この気温で売れる商品は?という着眼点のインフォグラフィック

https://i.pinimg.com/564x/8e/09/6e/8e096e2947113d08505eab74e3f574c8.jpg

 

2、リサーチをする

1で考えた疑問に対する答えになるようなデータを集める

疑問:有名な想像上の武器って?

リサーチ:有名な作品(あるいは製作者が好きな作品)をリストアップして、攻略本やらでその画像を見つける

https://i.pinimg.com/564x/14/d6/eb/14d6ebed08f3921994da78b0bab5ac19.jpg

※GLのリングって一応武器に入るのか・・・そらそうか

 

3、データを可視化する

2で集めたデータは数値であることがほとんどのため、受取手にもわかるように、数値を可視化する。

例えば、数値を集めた表をただかき出すのではなく、

データがどのように変動したか視覚的にわかる、折れ線グラフや棒グラフなどにする。

https://i.pinimg.com/564x/a3/b6/54/a3b6543e54032e36e68e7ecf5089abeb.jpg

 

4、ストーリーボード:ストーリー構成

ポイント

・データを見せる順序

・どのデータに焦点を当てるか

・スケッチを起こす(Webでいうとワイヤーフレームを描く段階)

 

スケッチに起こすことで、視覚的にどう訴えていけるか構成を練ることができる。

 

まとめ

インフォグラフィックを作成するまでに、各ステップを順番に踏んでいくべき。

1、質問を考える

2、リサーチをする

3、データを可視化する

4、ストーリーボード:ストーリー構成

そして、インフォグラフィックに限らず、デザインを作成する場合も、

このように念入りに調べ、フローを踏み、計画を練る必要がある。

正直忘れがちである 

でも、私もよくあるが

「わー○○作らなあかん!とりあえずなんか参考になるイメージ探せ!」

と闇雲にうごくのではなく、段階ごとに進めるべき

計画、フローを考えずに動くと、出来がいまいちだったり(アイデアの掘り下げが浅い)、無駄なやり直しが増えたり、自分が今何をするべきだったか混乱したりする(私はこれが一番怖い)。

 

 

 

はてなブログにコードを埋め込む方法

学習ブログを始めるのなら、

もちろんブログにコードを書く必要があるけど

はてなはどうしたら綺麗に書き出せるのか調べた。

詳細は↓

ソースコードを色付けして記述する(シンタックス・ハイライト) - はてなダイアリーのヘルプ


どうも「>||」コード「||<」でコードを書き出せるという。
 

<p>pタグだよ〜</p>

ただ、このはてな特有の記述をするためには、ブログの表示モードを
はてな記法」にしないといけないという。
(筆者も途中で気づいて変更したけど、「見たまま」からいきなり変更するとブログの内容が一度リセットされてしまう。)


言語の指定もできるとか、
最初の「>||」の2本線の間に言語を入れるとコードがわかりやすく表示される

<p>pタグだよ〜</p>

わかりやすくていいね、行数を表示するとかできないのかな?
また調べるということで、これでやってみよう。



 

海外留学系記事を読んでわかったこと

今回はEvernoteとの連携のテストのための投稿でもあるよ!
一発でタイトルも本文も貼り付けられるんだね!
ワォ便利ー!(なにキャラ)
 
海外留学系の記事、しかも主にWeb業界でよく見られた話題などを箇条書きでまとめる。
 
  • 専門学校自体くそなところは多い
  • 語学だけなら日本で十分勉強できる
  • 留学で身につけられることは、コネ・友人・アピール力・コミュニケーション力・プレゼン力。主に人との縁。
  • 留学後日本に帰っても就職先はあまりない。海外留学するつもりなら現地採用されることが理想的。
  • オンライン授業で学習すべし
  • 健康面は万全にしてから行くべし(言わずもがなだけど私は数年虫歯を放置している)
  • 海外で活動して備わるのは、今までのバックボーンも経験も役に立たない世界でいかに自分を立ててお金を稼げるか、人や社会の役に立てられるかという力
  • 頭金がなくても借金してでもまず海外に出るという道もある(私はこれは嫌なので通らない)
  • 今私が使っているMacさえあれば英会話(オンラインなど)と技術は習得できる
  • 技術面をバッチリにして専門へ行き成績一番にし周りの人に教えられるポジションを得てコネを作りコミュニケーション力をあげるという方法もある。(これを狙いたい)
  • 語学学校に行かず専門へ行くのにもアルバイトしつつであるが頭金210万は必要(これがいい)
  • ドラマや本で英語の勉強しよう→超好きなドラマを英語字幕で見直して、翻訳に頼らず原書コミック読みまくるぞー積んでるアレとかアレとかアレとか
  • 常日頃「誰が見てもわかりやすいコーディング」を心得るべし
 
今私が取れる道は
今の会社のまま月に理想5万貯めて約3年後海外へ
その時とっくに30歳は超えているけどそこは気にしない
英語と専門技術は今からでも学べる
少し勝手なやり方でもお金はなんとか貯めたい
というかお金の勉強もしたい
効率のいいためかたはないのか
今の会社のままでというのは、転職で派遣で給料を上げるという道も考えたけど
今の会社がコーディング・デザインどちらも私の技術力でやらせてもらえること、あと人間関係の良さそれらを失うリスクが怖くて転職の道がを行くのがなかなか怖い。
それでも一度相談の依頼はするべきか。
 

はじめに

小さいWeb製作会社に勤めて2年半ほど

だらだらと毎日を過ごしていたけど

さすがにこのままではまずいと思い

この学習ブログを立ち上げることになりました。

ゆくゆくはカスタマイズしていきたいなぁと思いつつアイデア無し

そして日々の学習をどうブログへ反映するべきか

そしてそんな時間確保できるのか

紆余曲折しながらも更新したいと思います