moographic – ムーグラフィックのブログ

「いろはCarta 展」に出展します

外苑前のギャラリー「gallery DAZZLE」にて開催される「いろはCarta 展」に出展致します。総勢46名のイラストレーターが作成したカルタを展示します。

1月09日（火）～1月21日（日）までとなります。私の札は「つ」です。

ご都合がよろしければ、ぜひお越しくださいませ。

gallery DAZZLE　 http://gallery-dazzle.com/

「Takeumaと描く鮮やかな色と際立つ輪郭」@Apple Store銀座に参加しました。

随分と久しぶりの更新となってしまいましたが、非常に興味深いイベントに参加してきましたので報告です。

Apple Store銀座のToday At Appleのイベント「Takeumaと描く鮮やかな色と際立つ輪郭」が本日開催されました。

内容はイラストレーターとしてご活躍中のTakeumaさんの、自身の経歴、仕事に対する考え方やイラストレーションの描き方などに関する講演。Takeumaさんの非常にユニークな考え方に、大変な刺激を受けた90分でした。

コンセプチュアルイラストレーション？

僕もあまり耳に馴染みがない言葉だったのですが、Takeumaさんは「コンセプチュアルイラストレーション」を仕事として描いているとの事。これは皆が共通して持っている「概念」を、イラストレーター独自の解釈、捉え方でもって表現すると言うジャンル。現在、日本ではあまり馴染みがないが海外ではイラストレーション市場としては割とメジャーであるらしいです。

この「コンセプチュアルイラストレーション」の難しいところは、独自のユニークな捉え方も大事だが、そもそも鑑賞者に「ああそうだよね！わかる！」と共感してもらわなければ意味がないと言う点。

そして、鑑賞者の心に強い印象を与えるインパクトをイラストに持たせなければならない。そのためにTakeumaさんは、どのようなアイデア出しをするのか？

1.インパクトを与える為、イラストで「普通の状態ではない事象」を描く事を目的とする。
2.イラストのテーマ（例：自由）の逆のイメージを考える（例：束縛、制限、規制）。
3.2で考えた逆のイメージの、そのまた更に逆の状態を描く（例：束縛されていない状態）。

もう一つの考え方としては

1.イラストのテーマ（例：物理）から連想される言葉をいくつか考える（例：アインシュタイン、ニュートン、リンゴ、重力、宇宙）。
2.1.で連想した言葉同士の関係性を考える（例：リンゴは小さい、宇宙は大きい）。
3.2.の関係性を逆転させる（例：宇宙より大きいリンゴ）。

これらの考え方が、個人的には非常に為になりました。今後のアイデア出しで試してみよう・・・。

スケッチのコツは「人物の関節を最初に描く」？

TakeumaさんはいつもiPadを持ち歩いて、街中や電車の中などで風景や人物スケッチをしていらっしゃるそうです（スケッチブックを開いていると周りの人にバレるけど、iPadならバレないので便利との事）。

Takeumaさんが過去に描いた様々なスケッチや、色々なスケッチのコツなどを披露していただきましたが、中でも心に残った言葉は「人物の関節を最初に描け！」です。
講演の参加者の方が、「街中を歩いている人物を、一瞬でどうやって捉えるのか？」と言う質問をされました。
それに対するTakeumaさんの答えは、「まず最初に、人物の関節の位置を捉えて覚える事」でした。関節の位置さえ覚えてしまえば、あとはそれを描いてうまくつなげるだけです。と・・・達人の境地ですね・・・まるで自分が到達できるイメージが湧かない・・・。

その他、iPadアプリの「Procreate」の操作・実践など盛りだくさんの内容でした。

また面白そうなイラストレーションやウェブデザインなどに関するイベントに参加しましたら、こちらで報告したいと思います。

[css]SVGでアニメーションをつくってみた

僕のポートフォリオサイトのトップページにアクセスすると、ローディングアニメーションが再生されるようになっています（マイクロバスが走っている様子）。

これです。

これは当初、アニメーションGIFで作成して公開していましたが、閲覧環境によってはどうにも動きがガタついて見えてしまい、特にスマートフォンの場合それが顕著でした。せっかくレスポンシブ対応なのに・・・。

これではいかんと言うことで、早速GIFではなく、SVGファイルに作り直し、これをCSS3のアニメーションで表現させてみました。

イラストを分解してSVGに

まずマイクロバスのイラストを、車体部分とタイヤ2本に分解して、3つの独立したsvgファイルとして書き出します。

これらを、それぞれ別な動きをさせることで、あたかも走っているかのように見せていきたいと思います。

元々このイラストはAdobe IllustratorCCで作成しているので、これをそのまま「SVG形式」で書き出すことができます。HTMLファイルから、このsvgファイルを読み込んで、CSSで動きをつける、という流れになります。

※SVG（Scalable Vector Graphics）とは、1998年に誕生したベクターイメージフォーマットで、画像ファイル形式の一つです。ラスターイメージと違い、画像を拡大表示しても画質が劣化せず、ファイルサイズも小さく抑えられるなどのメリットがあります。

CSSで動きをつける

まずは、車体のsvgファイルに対して、以下の一連の動きをつけていきます。

前部を斜め左上を向くように、回転
そのまま少しだけ真上に、移動
後部を斜め右上に回転させ、平行になるように
前部を斜め右下を向くように、回転
そのまま少しだけ真下に、移動
後部を斜め右下に回転させ、平行になるように

これを連続でループさせます。

ではこの一連の動きを、CSS3でアニメーションさせるには、どうすれば良いのかというところですが、まずアニメーションを定義づけする必要があります。

<div id="loading">
	<div id="bus"><img src="img/bus.svg"></div>
</div>

</div>

#bus{
	animation-name:anime;
	animation-duration:0.5s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}

#bus{

animation-name:anime;

animation-duration:0.5s;

animation-timing-function:linear;

animation-iteration-count:infinite;

}

上記のように、車体部分を”#bus”というIDでタグを付与し、”#bus”のアニメーションを指定します。それぞれのプロパティと値の解説は以下の通り。

animation-name:anime;　　←アニメーションの名前をつける。この場合は”anime”とつけた。
animation-duration:0.5s;　　←一連の動き一回分に要する時間。この場合は0.5秒と設定。
animation-timing-function:linear;　　←アニメーションの進行の度合い。この場合は、一定のスピードで動く。
animation-iteration-count:infinite;　　←アニメーションのループ回数。この場合は無限。

これで車体部分のアニメーションの定義が完了しました。

次に、上記でアニメーション定義した”anime”に実際の動きをつけます。

@keyframes anime{
	0% {transform:rotate(0deg) ;}
	15% {transform:rotate(3deg) ;}
	30% {transform:translateY(5px) ;}
	45% {transform:rotate(0deg) ;}
	60% {transform:rotate(-3deg) ;}
	75% {transform:translateY(-5px);}
	100%{transform:rotate(0deg) ;}
}

@keyframes anime{

0% {transform:rotate(0deg) ;}

15% {transform:rotate(3deg) ;}

30% {transform:translateY(5px) ;}

45% {transform:rotate(0deg) ;}

60% {transform:rotate(-3deg) ;}

75% {transform:translateY(-5px);}

100%{transform:rotate(0deg) ;}

}

上記のコードの1行目を見てください。

何やら”@keyframes”などという単語が出てきましたが、これは定義したアニメーションの動きを指定するためのプロパティです。

キーフレームとはアニメーションにおいて、時間軸上の特定の位置（フレーム）の、要素（今回の場合はバスとタイヤですね）の状態や位置を決定する印です。
CSSでキーフレームを指定する場合は、パーセンテージで指定することができます。
すなわち、0%はアニメーションの初期値。100%はアニメーションの終わりをあらわします。

@keyframes　　アニメーションの名前　{ キーフレーム { 動きをつけるプロパティ　：　値 ;} }

上記の規則でCSSを指定していきます。細かい上記のコードの解説は以下の通り。

@keyframes anime　←”anime”にキーフレームを挿入
0% {transform:rotate(0deg) ;}　　←アニメーションの一番はじめ。初期値。
15% {transform:rotate(3deg) ;}　　←要素を3度回転させる。
30% {transform:translateY(5px) ;}　　←要素を5px真上に移動させる。
45% {transform:rotate(0deg) ;}　　←回転を元に戻し、平行に。
60% {transform:rotate(-3deg) ;}　　←要素を-3度回転させる。
75% {transform:translateY(-5px);}　　←要素を5px真下に移動させる。
100%{transform:rotate(0deg) ;}　　←アニメーションの一番最後。初期値に戻す。

これらの一連の動きを0.5秒で動かします。無限ループで再生したアニメーションが以下です。

こうなります。

あとは残りの二つのタイヤの動きだけとなります。
タイヤの動きは、単純に上下に動かすだけです。タイヤの動きを加えた具体的な完成コードは以下の通り。

<div id="loading">
	<div id="bus"><img src="img/bus.svg"></div>
	<div id="tire01"><img src="img/tire01.svg"></div>
	<div id="tire02"><img src="img/tire02.svg"></div>
</div>

</div>

#bus{
	animation-name:anime;
	animation-duration:0.5s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	width:200px;
	position:relative;
	z-index: 601;
}

@keyframes anime{
	0% {transform:rotate(0deg) ;}
	15% {transform:rotate(3deg) ;}
	30% {transform:translateY(5px) ;}
	45% {transform:rotate(0deg) ;}
	60% {transform:rotate(-3deg) ;}
	75% {transform:translateY(-5px);}
	100%{transform:rotate(0deg) ;}
}

#tire01{
	animation-name:tanime01;
	animation-duration:0.2s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;
}

@keyframes tanime01{
	0% {transform:translateY(0px) ;}
	100%{transform:translateY(2px) ;}
}

#tire02{
	animation-name:tanime02;
	animation-duration:0.2s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;
	animation-delay:0.1s;
}

@keyframes tanime02{
	0% {transform:translateY(0px) ;}
	100%{transform:translateY(2px) ;}
}

#bus{

animation-name:anime;

animation-duration:0.5s;

animation-timing-function:linear;

animation-iteration-count:infinite;

width:200px;

position:relative;

z-index: 601;

}

@keyframes anime{

0% {transform:rotate(0deg) ;}

15% {transform:rotate(3deg) ;}

30% {transform:translateY(5px) ;}

45% {transform:rotate(0deg) ;}

60% {transform:rotate(-3deg) ;}

75% {transform:translateY(-5px);}

100%{transform:rotate(0deg) ;}

}

#tire01{

animation-name:tanime01;

animation-duration:0.2s;

animation-timing-function:ease;

animation-iteration-count:infinite;

}

@keyframes tanime01{

0% {transform:translateY(0px) ;}

100%{transform:translateY(2px) ;}

}

#tire02{

animation-name:tanime02;

animation-duration:0.2s;

animation-timing-function:ease;

animation-iteration-count:infinite;

animation-delay:0.1s;

}

@keyframes tanime02{

0% {transform:translateY(0px) ;}

100%{transform:translateY(2px) ;}

}

上記のように、タイヤをそれぞれ、”tire01″ “tire02″とし、それぞれのアニメーションを”tanime01” “tanime02″としてアニメーション定義を行いました。

animation-name:tanime01;　　←アニメーションの名前をつける。この場合は”tanime01″とつけた。
animation-duration:0.2s;　　←一連の動き一回分に要する時間。この場合は0.2秒と設定。
animation-timing-function:ease;　　←アニメーションの進行の度合い。この場合は、アニメーションの一連の動きの、はじまりとおわりがややゆっくり動く
animation-iteration-count:infinite;　　←アニメーションのループ回数。この場合は無限。

コードの38行目をみてください。二つ目のタイヤのみ、CSSの動きに”animation-delay:0.1s;”と書いてありますが、これはアニメーションの動きを0.1秒遅らせることを意味しています。

何故わざわざ、二つ目のタイヤだけこのような指定をしているかというと、二つのタイヤ、前輪と後輪の動きにズレを出すことによってより、車が走っているような表現を出すためです。

さて、これで今回のアニメーションは完成となります。これを実際に動かすと・・・

以上で、SVGファイルをCSSでアニメーションさせる方法はおしまいです。お疲れ様でした。

ここまでお読みくださり、誠にありがとうございました。

モバイルWi-Fiルーター『FREETEL ARIA2』を購入しました。

つい先日12月2日に発売されたばかりの、FREETELの『FREETEL ARIA2』を購入しました。

これはFREETELのモバイルWi-Fiルーター『ARIA』の後継機（？）にあたるのでしょうか。しかし、『ARIA』の定価17,800円に対し、こちらの『ARIA2』は11,800円です。6,000円安い。

しかもバッテリーの持ちも良く、17時間連続通信が可能、というふれこみです（具体的なスペックは公式ページをご確認ください）。

外観レビュー

本体のサイズは、正直なところ思っていたよりも大きい印象を受けました。iPhone5と比較した感じはこちら。

厚さはこのくらい（本体はシリコンケースに収まっており、着脱可能。）。

同梱物はUSBケーブルとアダプタ。

マニュアルの「本体付属品」記載には、電池パックが含まれているようですが既に本体に収まっているようです。一応本体のカバーを外して確認してみます。

フタが固い！

ではまず、シリコンカバーを取り外し本体裏側のカバーを外します。

背面の隅に凹みの部分があり、そこに爪を引っ掛けて取り外すのですが・・・これが固い！

凹み部分が小さいので、1円玉か何かのコインで引っ掛ける事も出来ないようです。

10分ほど悪戦苦闘し、何とか外す事が出来ました。

ちゃんとバッテリーは収まっているようです。

バッテリーを外すと・・・

FREETELのSIMも既に挿入されていました。

電源を入れてみる

本体のサイドに「電源ボタン」と「WPSボタン」が付いています。

ネットワークに接続するには、まず「電源ボタン」を入れてから「WPSボタン」を2回カチカチッとクリックするとネットワーク名とパスワードを確認できます。

ディスプレイ下の正方形のモザイクは、QRコードです。これをスマホのアプリなどでスキャンすれば、それだけでネットに接続が出来るという機能です。

とりあえず、ざっくりとFREETELの『FREETEL ARIA2』のレビューでした。最後までお読みくださりありがとうございました。

[css]ハイパーリンクの下線をカスタマイズ

ウェブサイト上で、他のページや他のサイトに飛ぶための機能を「ハイパーリンク機能」と言いますが、通常ブラウザで閲覧する際はユーザーがそれとすぐわかるように、そのテキスト箇所のみ色が変わっていたり下線が引いてあったりします。

デザイナーやコーダーの皆さんであれば、単にアンカータグで囲むだけで勝手にブラウザがテキストに下線を引いてくれるのはご承知の通りかと思います。

しかしデフォルトのままだと何か寂しいというか、見た目を色々と工夫してみたくなるのは制作者としては当然の欲求でしょう。と言うことで、今回はCSSを使用してカスタマイズする方法を備忘録として書き記しておこうと思います。

基本の「text-decoration: underline;」

基本はやはり、下記のようにマウスオーバーで下線のオンオフを切り替える手法ですね。

a:link { text-decoration: underline;}

a:hover { text-decoration: none;}

:link 疑似クラスの[ text-decoration ]を[ none ]に設定するのは、ユーザビリティ上好ましくないです。ユーザーが見てすぐそれと判別できるよう、下線を引いておくのがベターでしょう。しかし、この方法ですと下線のみ色を変更することができません。

CSSで下線を引いてみる

であれば、[ border-bottom ]で下線を引きましょう。

a{ border-bottom: 1px solid orange }

この方法であれば、下線の色のみを変更することができますし、

[ solid ]・・・1本線

[ double ]・・・2本線

[ dotted ]・・・点線

[ dashed ]・・・破線

のように、線の種類を変更することもできます。

他にも[ groove ]、[ ridge ] などの指定もありますが、正直パッと見てよく分からないのであまり使いどころが無い気がします。

background: linear–gradient で文字の背景に下線を引く

テキストに、まるで蛍光マーカーで線を引いたような効果を出すため、線形グラデーションを表現するための[linear–gradient() ]を指定する方法が一時期流行っていましたが、この方法を使って下線を引くこともできます。

background: linear–gradient( black, black ) no-repeat;

background-size: 100% 1px;

background-position: 0 1.2em;

上記のように指定すると、黒の下線が指定箇所の横幅100%で1pxの太さの線が文字の上から1.2emの場所に引かれることになります。ちなみに、上記の場合[ padding-bottom ]で余分にスペースを取っておかないと、下線が見切れて表示されませんのでご注意を。

CSS3での新たなプロパティ

まだ勧告候補の段階ですが、text-decorationについて新たなプロパティが定義されているようです。現在ほとんどのブラウザで未対応ですが、[ text-decoration-style ]プロパティで[ wavy ]と指定することで波線を引くこともできるようです。

いずれどんどんと、新しい表現方法が使用できるようになるのでしょう。楽しみですね。

イラストレーションの”わかりやすさ”（2）

見る人に伝わりやすい、わかりやすいイラストレーションを描くにあたってというテーマで書いております。第二弾の記事となります。

前回は人物のポーズについて取り上げましたが、今回は「アングル」について書いてみたいと思います。

真正面はわかりやすいけど・・・

人物を描く際には、自分がカメラマンであると想定してみましょう。ポートレート撮影の場合は、ややカメラの視点を下げると被写体の足が長く見えるとか色々テクニックがあるようですが、イラストの場合は「人物の様子がわかりやすい、伝わりやすい」位置にカメラを置きます。

具体的には、「人物のポーズがわかりやすいアングルで」描く事がポイントです。

では、以下に例を挙げてみます。今回は「やる気に満ちた会社員女性」を描いてみたいと思います（全く関係ない話ですが、やはり最近は『OL』とは言わないんですかね？）。

前回の「悩んでいる」と比べて「やる気に満ちている」様子は、やや難しいかもしれません。言葉自体が曖昧ですし、やる気に満ちたポーズと言われても色々な表現がありそうです。

では一案目はこちら。

今回も真正面の構図ですが、全身を入れてみました。小さくガッツポーズをさせる事により、やる気、自信を表現しています。ポーズは悪くないように思えますが少々おとなしい印象も受けます。ではこのイラストのアングルを少々変えてみました。それがこちら。

真正面ではなく、少し斜めの角度で書いてみました。顔も心もち上を見上げる形にしています。どうでしょう。先ほどの案よりもやる気に満ちた印象を受けないでしょうか。

シルエットにすると一目瞭然！

人物のポーズやアングルを考える際、シルエットの状態にしても何をやっているのかが伝わるイラストが良いと言われています。

では試しに、今回のイラストをシルエットの状態にしてみましょう。

・・・若干ですが、右側のイラストの方が伝わりやすいのではないでしょうか（そうでもない？）。真正面はシンプルで描きやすいアングルではありますが、少々単調でつまらない印象を与えてしまう事もあります。ポーズを変えなくとも、アングルを変えるだけでポーズの意図が伝わりやすくなる事がありますので、是非色々と試してみてください。

一応前回のイラストもシルエットにしてみました。それがこちら。

こちらはより違いがわかりやすいと思います。左側はただの上半身にしか見えませんが、右側は明らかに両手で頭を抱えている事がわかりますね。

イラストは何が描いてあるかがわかるだけでは不十分で、伝えたいメッセージが伝わらなくては意味がありません。キャラクターがどんな感情で、何をしているのか何をしようとしているのかを伝える事が出来れば上出来です。

イラストレーションの”わかりやすさ”（1）

まだまだイラストレーターとしては、未熟者もいいところの僕ではありますが、こんな自分でもイラストを描くにあたって、いつも心がけている事があります。

僕がイラストを描くにあたって、まず心がけている事は

“わかりやすいイラストを描く事”

です。

他の人がイラストを見た時に「このキャラクターは、何をしているんだろう？」と思わせてしまわないように、イラストで「何を伝えたいのか」を明確にする事です。

わかりやすいイラストを描くには、物の特徴を正確に捉えつつもある程度デフォルメさせる事が大事ですが人物の場合は、ポーズやアングルが非常に大事になってきます。

以下に例を挙げましょう。

キャラクターのポーズ

「良いアイデアが浮かばなくて悩んでいる、20代くらいのサラリーマン」を描くとします。この場合、サラリーマンのスーツの特徴（ジャケットは合わせが右前であるとか、一番下のボタンは外すとか）を正確に捉える事はもちろん大事ですが、「悩んでいる」事を表現するために、人物に取らせるポーズが非常に大事です。

では、まず一案目を描いてみました。

・・・どうでしょうか。

彼は表情からして何やら愉快ではない様子で、悩んでいるように見えなくもないです。しかし、冷房の効き過ぎで寒がっているようにも見えますし、トイレを我慢しているのかとも思えます。

腕を組むというポーズは、「悩んでいる」ポーズとしてはやや曖昧に見えてしまうようですね。悩んでいるというよりも、何か思索にふけっているとか、表情を変えれば自信満々な様子にも見えてしまいます。もっとわかりやすく「悩んでいる」ように見えるポーズはないでしょうか。

そこで二案目を描いてみました。

「腕を組む」のではなく、「頭を両手で抱える」ポーズに修正しました。

一案目と比べて、だいぶ「悩んでいる」感が伝わるのではないでしょうか。これならば少なくとも、寒さやトイレを我慢しているようには見えませんね。

このように、人物のポーズは非常に重要です。色々なポーズを取らせるためには、試行錯誤が必要で僕も未だに悩む事が多いですね。人物の造形が完璧に頭に入っていれば、どんなポーズも思いのままですが、なかなかそこまでの境地には達していません。そのためにデッサン人形を買ってみたりしたのですが・・・その点についても後日ブログに描こうと思います。

ブログの引越し？

ほとんど更新していなかったtumblrのブログを、この度こちらに引越す？事としました。

tumblrの方も、イラストのボツ案や下書き落書きなど、イラストメインのブログとして続けていこうかと考えています。

今月中にはポートフォリオサイトの方も、新しくリニューアルする予定です(サーバは変えないのでURLはそのまま)。