読者です 読者をやめる 読者になる 読者になる

N. Design

webデザイナーやってます。お茶請け程度にどうぞ→@nnndmemo (Twitter)

Service x Design #1 企業の中でしかできないデザインとは レポ

f:id:nnnde:20160313223031p:plain

こんにちは、お久しぶりです。 今更ながらのレポート。 1ヶ月以上前の話ですが、簡易にまとめたいと思います。 結構豪華な椅子に座って聞いてました(どうでも良い)

一部聞き取れなかったので表現間違ってたりしてたらご指摘お願いします

servicexdesign.connpass.com

続きを読む

UX JAM9 のまとめ

勉強会 UX JAM

f:id:nnnde:20160313223031p:plain5月25日にUX MILK主催のUX JAM9について参加したのでぽちぽちまとめようかと思います。

今回、このイベント2回目だったのですが、前回同様、立って話聞くのかなと思ってましたが、まさかの椅子あり、PC持ってくればよかったとちょっと後悔。

色々な勉強会行ってますが、今回のが一番濃くて面白かったです。違う意味で。

 

主催サイト:UX MILK

uxmilk.jp

uxmilk.connpass.com

 

自分のmemoも踏まえてLTの簡易にまとめてみました もし公開がダメな情報ありましたら削除致しますのでご連絡いただけばと思います。

 

続きを読む

イメージスケールという配色方法

デザイン イメージスケール

f:id:nnnde:20160512200545p:plain

こんにちは、今日はちょっとデザイナーぽい話をしたいと思います。

テーマは「イメージスケール」という内容です。

 

デザインを作る際にいつも一番悩むのが配色だと個人的に思ってます。

色彩学に沿ったり、キーワードから色を配色したり、web上の配色サービスなど使ったりしても時にしっくりこないことがあります。

困ったもんだと思い、自己流ですが試した方法があるので紹介したいと思います。 

 

 

そもそも「イメージスケール」を知ったきっかけは

先日に行ったUX JAM8で株式会社ディー・エヌ・エー 飯島さんのLTで

キーカラーの設定という中で「イメージスケール」というものを使ってました。

すごく面白い図&方法だなと思いました。正直、言葉や図なども知りませんでした。調べてみて「イメージスケール」という言葉を知ったぐらいなので

 方法についてもっと詳しく聞いてみたかったのですが、残念ながらお話できる機会がなかったので、あくまでLTを見て参考させていただいた部分+自己流な話になります。

 

 「イメージスケール」とは?

日本カラーデザイン研究所というところが考案したものです。

「WARM」 「COOL」「SOFT」「HARD」の4つの言葉で分けいくつかの「心理的なキーワード」をそれぞれに分けるという感じです。

 

上の図がイメージスケールで、心理的な感じで分かれてます

(画像引用:日本カラーデザイン研究所様)

もっと詳しくはこちらを参考になってくださいませ。

www.ncd-ri.co.jp

 

 

「イメージスケール」で配色してみた 

 仕事で弊社サービスを作るという内容のプロジェクトがあったので早速「イメージスケール」を使って配色しようと思いました。

配色する際にそのものに対しての、キーワードをあげるかと思います(女性向けサイト、かわいい など)それがまず必要になります。

以下キーワードとは配色対象(webページ、ロゴなど)のキーワード(女性向けサイト、かわいい など)を指します。 

 

f:id:nnnde:20160512194715p:plain

1と2 用意しているキーワードから近い色をpickupする

まず、1の図から配色対象のキーワードを設定しているかと思うので、近いイメージのものをpickupします。あまり多すぎると方向性がブレてしまう可能性もあるので5、6つぐらいかいいのかと思います。

(1のイメージスケール画像引用:日本カラーデザイン研究所様)

 

3 pickupした色を使って配色する

色の設定は3色ぐらいにしています。ベースカラー1色とサブカラー2色にしてます。

設定しているキーワードを3つあげ、2でpickupした色のイメージの中から近いものを配色します。(黒い部分は内容の具体的情報になるので伏せさせていただきます)

大きいな四角の部分がベースカラー、小さい四角の部分がサブカラーになります

 

f:id:nnnde:20160512194719p:plain

4 3をベースに違う色や違う組み合わせを用意する

3で出した配色をベースに色を微妙に変えてみたり、他の配色して数パターン用意します。

 

5 キーワードに近い色を用意しておく

念のため、用意していたキーワードに合うをあげておきます。

ここで気づいた点があったら4の部分に配色を追加してもいいかと思います。

この作業と4の作業逆にしてもいいかもしれません。

(方向性が間違ってないか確認の意味もあるかと。)

 

4と5の作業は不要だと思う方もいるかと思います。

個人的意見ですが初めの段階では案はたくさん出して選択肢を増やすという意味で用意していいと思ってます。

 

 イメージスケールを使ってみた結果

f:id:nnnde:20160512194725p:plain

f:id:nnnde:20160512194722p:plain

(イメージスケール画像引用:日本カラーデザイン研究所様)

 

 上のような感じで配色資料が用意できました。

 

よかったと思った点

  • だいたいのイメージから近いものから選ぶので決まっているキーワードからずれにくい。
  • イメージから用意するのでキーワードが決まっていると割とスムーズに配色できる
  • 色がある程度用意されているので配色しやすい

 

この方法が難しい場合

  • ベースカラーが決まっている場合、この方法は難しいかも(サブカラー程度)
  • 同じ色に偏る可能性がある

 

ベースカラー決まっているとちょっと難しいだ方法だなぁなとは思ってましたが特にベースカラー決まってなかったので使いました。

仮にベースカラー決まっていても、他案としてこの方法を使った配色を提案というのもありかなとは思います。(ベースカラー案とは別に)

 

今回、自己流ですがこの方法を使って楽だと思ったのは「ある程度色が用意されている」ので1から考えなくていいと思ったこと。何よりキーワードに沿って配色するので目的からずれにくいと思ったことです。

 

もちろん設定しているキーワードがずれていると配色も異なってしまい、「イメージと違う」が起こるかと思います。

ターゲット層や、配色対象に対してのキーワード の設定は大事になります。

 

まだ試行錯誤の段階なので、他に「イメージスケール」使ってこうした方がいいかもとかっていうのが出てきそうな気はします。(調べてもあまり出てこないので) 

もし、ご意見ありましたら教えていただけるとありがたいです。

 

読んでくれてありがとうございます。

 

UX JAM 8 に行ってきたのでまとめ

勉強会 UX JAM

f:id:nnnde:20160313223031p:plain
UX MILKが主催のイベント UX JAM8のイベントに行ってきました。

なんか記事が勉強会ばっかりですね。。

 

イベントの概要としては座って話を聞くというよりも、

周りの人と交流しながらLTを合間にあるので聞いてまた周りの人と話という気軽な感じです。交流がメインですね。

LTも5分ぐらいですので長時間話を聞かなくても良いというのもいいです。
あまり人と話するのは得意な方ではないですが、(人見知り激しいので)

主催様のお気遣いなどもあり、お話しやすい雰囲気だなと思いました。

 

自分のmemoも踏まえてLTの簡易にまとめてみました
もし公開がダメな情報ありましたら削除致しますのでご連絡いただけばと思います。

uxmilk.connpass.com

 

続きを読む

独学で頑張る 色彩検定1級合格プロジェクト vol.1

色彩検定

f:id:nnnde:20160416132710p:plain

 

N.です

突然の話題ですが、去年の話ですが、色彩検定1級を受けました。

色彩検定とは?こちら

以前2級までとったのでどうせならと思い、昔使っていた参考書なども引っ張り出したりして久々に勉強しました。

1次は合格しましたが、2次落ちました。

というわけで今年リベンジしたいと思います。

 

 正直webデザインの仕事の上では1級の知識は不要だと思います。

もはやただの好奇心というか趣味的な。

(ただデザイナー名乗るなら3級ぐらいの知識は知っていた方がいいとは思います)

 

1級2次は結構難しく、対策教室があるぐらいです。お金かかりますが

しかし、私は独学でも行けると思ってます。

 

そこで、テーマは 独学で頑張る色彩検定1級プロジェクトとしてひっそり試行錯誤を

書いていきたいと思います。

 

続きを読む

MTL勉強会「UX Sketch」vol.10 まとめ

UX Sketch 勉強会

f:id:nnnde:20160313223031p:plain

討鬼伝2早くプレイしたいN.です。

2週間ぐらい前に勉強会行ってきました。

MTL勉強会「UX Sketch」vol.10 に行ってきました。

memoできた範囲でまとめてみました。

もし公開がダメな情報ありましたら削除致しますのでご連絡いただけばと思います。 mtl.connpass.com

続きを読む

Thmblrに書いた話 MTL勉強会「UX Sketch」vol.7 まとめ

勉強会 UX Sketch

f:id:nnnde:20160313223031p:plain

Thmblrに書いた話をそのまま。

今更感満載ですが、勉強会行ってきました。

MTL勉強会「UX Sketch」vol.7 - connpass

にいってきました。載せていい範囲で書きます。

もし公開がダメな情報がございましたらお手数ですがご連絡お願いします。

続きを読む