目は口ほどに物を言う?目+αでキャラクターの感情を表現!

ブログやSNSで、ちょいちょい登場しているきりん君。

口が大きな鼻(?)で隠れているので、表情にバリエーションをつけるのが地味に難しい…。
ブログにときどき登場する彼は、無表情なのがほとんどですが、
今回、目と多少の附属物で、どれだけ表情に変化が出るのか挑戦してみました。

こちらが、基準となる平常心のきりん君です。
0630-03

笑う

0630-04
目を細めて頬を赤らめました。うれしそうですね。

企む

0630-05
同じ笑顔でも、こちらは邪悪な笑みです。
何か悪いこと考えてます。

怒る

0630-10
ちょっとムッとした感じ。眉間のシワがポイントです。

怒る2

0630-11
より怒りが強いバージョン。
光のない大きな黒目は、不気味な迫力があります。

0630-12
白目バージョン。

泣く

0630-13
ゆらゆらした黒目にきらめきを入れて、うるうるに。

泣く2

0630-14
涙が止まらない!
同じ涙でも、描き方でいろいろな泣き顔ができそうです。

疲れる

0630-15
けだるい表情。あきれ顔にも見えます。

考える

0630-06
思案中…

眠い

0630-07
半開きの目で眠い顔。
マンガで見るような泡(?)をつけると、よりそれっぽく。

焦る

0630-08
左右で黒目の大きさを変えて、目を白黒している感じに。

驚く

0630-09
某少女マンガのように、白目でハッと。

燃える

0630-16
瞳に炎を宿らせ、眉毛もつけて熱い感じにしてみました。

 

描いてみて

目だけでも、ちょっとした違いでけっこう変化が出るものですね!
いつかLINEスタンプでも作るようなことがあれば、活用していけたらと思います。


梅雨のじめじめ気分を吹き飛ばす! 虹のようなカラフルデザインのWebサイトまとめ

もうすぐ6月も終わりですね。
新潟ではいまだすっきりしないお天気が続く今日この頃ですが、みなさんがお住まいの空模様はいかがでしょうか?

今回は、梅雨空のじめじめ気分が晴れるようなカラフルなWebデザインをまとめてみました。

01

AYAKA NEW ALBUM レインボーロード
http://room-ayaka.jp/rainbowroad/
レスポンシブデザイン。
ポイントで置いてあるモチーフの色が、じわじわと切り替わります。
宝石が虹色に輝くように見えて素敵。

 

04

 

JAZY GROUP
http://jazygroup.com/
ページ変移のアニメーションが気持ちいい!

 

14

ぷるぷるSPARKLINGゼリー
http://www.hakutsuru.co.jp/purupuru/
ぷるぷるふるえるアイコンや、しゅわしゅわ消える炭酸水のような背景がとてもかわいらしいです。
マウスオーバーの「ぷるんっ!」とした動きが何ともいえない心地よさ。

 

11

color magic
http://www.itokin.com/musee/colormagic/

白ベースの中に突然現れるカラーテープが、鮮やかでとても印象的。
ファッションショーを見ているかのような商品写真の紹介の仕方も面白いです。

 

02

モチイエ女子web
http://www.mochiiejoshi.com/mj/
ビビットな色使いとポップなパターンが、まさに女子向け!

 

13

FELISSIMO 500色の色えんぴつ
http://www.felissimo.co.jp/500/
「500色」がずらりと並ぶ様は壮観!
色えんぴつで描かれたようなボタンやタイトル背景など、色えんぴつのイメージで統一されたデザインになっています。

 

08

avion
http://avionavion.jp/
レスポンシブデザイン。
こども服のブランドサイトなのですが、やわらかめの色使いがイメージにぴったり。

 

 

15

CHITAZEN
http://www.chitazen.co.jp/
彩度の低いちょっと渋めのレインボーカラー。
スクロールに連動して描かれるラインの動きが楽しいです。
ヘッダーの町の風景が時間に合わせて変わるのも、心憎い演出。

 

いかがでしたでしょうか?
「カラフル」と一口にいっても、彩度や色の面積によって様々なバリエーションがあるんですね〜。


ディレクターとデザイナーのイメージ共有

business_2_mika

4月に入りまして、花粉さえ飛んでなけれは、
いい季節になりました。

今回は、デザイナーに作業をお願いするときに
気を付けていることをまとめました。

PAK88_tetuyaakenosyain20141123141151500

私は、普段webディレクションの仕事していて
お客様から聞いてきた内容を元に、構成案とデザイン案を制作します。
構成案は自分で作成すればよいのですが、ページのデザインはデザイナーにお願いします。

デザイナーへの説明がうまく伝わらないと、
「イメージと全然違う」
「何度も修正が入って予算をオーバーしてしまった」
などのトラブルが起こってしましまいます。
ドラマで良くある「○○君これお願い。」みたいに何の説明もなく
仕事が上がってくることは、ほぼありえません。

上記のトラブルが起きないよう
私がデザイナーにお願いするときの注意点をまとめてみました。

 

1.情報、目的、サイト構成の説明
D0011_udemakuri420140830142954500
デザイナーにお客様の情報や目的、サイト構成を説明するようにしています。
まずは、ディレクターとデザイナー同じ情報を共有することがスタートラインです。
ここをおろそかにすると、後々大きなズレが生じる場合があります。

 

2.掲載情報
AL001-1onakakaigi20140830500
掲載内容と情報の順位付けを行い指示します。
デザイナーが構成に時間をかけて、後ですりあわせを行うよりも、
はじめから指示をした方がスムーズに作業を行えます。

 

3.色の指定
PAK85_iroenpitunaname131310500
メインカラーを指定します。
お客様指定の場合もありますし、デザイナーと相談して決める場合もあります。
どちらにしろ明確に指示します。
サブカラーは状況に応じて指示しています。

 

4.テイストの近いサイト
Green15_jyougi20141123165428500
他のサイトを使ってイメージやデザインの方向性を伝えます。
最低3~4サイト用意します。
コピーサイトにならないように、
全体の雰囲気や部分的に参考にするなどサイトによってどこを参考にするのか説明します。
デザイナーに考える力をつけるにはこの方法はおすすめしませんが、
私は、感覚・雰囲気など、言葉で明確に表現しにくい部分を共有するために使用しています。

 

5.スケジュールの確認
PAK85_yoteihyouwotukerubiz500
今持っているスケジュールを確認して無理のない納期を設定します。
あまりにも短納期で仕事を詰めすぎると、それなりのデザインしか上がってきません。
全ての仕事でできるわけではありませんが、意識して行っています。

 

まとめ
以上の点を意識して行っていますが、
いきなり100点のデザインは上がってきません。
デザイナーがお客様と直接お話しできれば、デザイナーの能力の問題となりますが、
お客様 → ディレクター → デザイナーの場合は、
ディレクターがお客様の話をまとめて、デザイナーに指示していますので、
半分はディレクターの責任だと思います。
「思ったものをあげてこない」ではなく、「思ったものをあげてもらう」ために何をするかが大事だと思います。


見やすい&作りやすい Photoshopのレイヤー管理

いよいよ明日から4月!
始まりの季節は、なんだかいつもそわそわしてしまうsakaiです。

新年度ということで、環境の変化が多い時期ですが、
そんな中、新たにWebデザイン制作業務に携わることになった方もいらっしゃるのではないでしょうか。

「Photoshopは使ったことがあるけど、Webデザインには利用したことがない」
そんな方向けに、Web制作においての初歩的なPhotoshop操作のポイントをまとめてみました。

今回ご紹介するのは、作業しやすい、他の人が見てもわかりやすい構造にするためのレイヤー管理方法です。

※以下の記事は、PhotoshopCS6の環境をもとにしています。

・レイヤーの自動選択にチェックを入れる
・バウンディングボックスにチェックを入れる

01

こちらにチェックを入れると、直接カンバスからレイヤーが選択できるようになります。

拡大・縮小・回転も、バウンディングボックスで変形可能!

スクリーンショット 2015-03-31 13.49.40

・レイヤーコピー時に「〜のコピー」がつかないようにする

レイヤーコピーを繰り返すとレイヤー名のうしろに「〜のコピー」がずらり…
これだとちょっとわかりづらいですね。

02_001

レイヤーパネルのオプションを開き「コピーしたレイヤーとグループに「コピー」を追加」のチェックを外します。

02_03

これで、コピーを繰り返しても「〜のコピー」はつきません。
すっきりとしたレイヤーパネルになりました。

02_002

・レイヤーに名前をつける
・グループ化を活用する

たとえば、ボタンパーツは1つのグループに。ヘッダーは1つのグループに。
最初はざっくりとでもかまわないので、こまめにまとめながら制作を進めましょう。

スライスで書き出すときや、あとから変更を加えるとき…
整理されていないところから目的のレイヤーを見つけ出すのは至難の業。

たとえばコーダーさんなど、データ作成者以外の方にデザインデータを渡す場合は特に気をつけたいものです。

・「⌘+shift」でグループ全てを折り畳む

フォルダが増えてくると、開かれたグループを一つ一つ折り畳むのは手間になってきます。
「⌘+shift」でフォルダ脇の三角アイコンを押すと、1度に収納することができます。

03

・レイヤーのフィルタリングを活用する

「テキストレイヤーだけを編集したい」「背景画像だけを編集したい」
そんなときに便利な機能です。

04

左から「ピクセルレイヤー」「調整レイヤー」「テキストレイヤー」「シェイプレイヤー」「スマートオブジェクトレイヤー」のフィルタリングです。

これらを選択すると、対象の属性レイヤーのみを表示することができます。
ちなみに複数選択することもできます。

選択しているとき、一時的にグループ表示ではなくなりますので、
あらかじめグループを色分けしておいた方が、よりわかりやすくなるかもしれません。

05

いかがでしたでしょうか。
レイヤー整理の参考に、少しでもなれたら幸いです!