理論でなんとかする配色法

こんにちは。二年目デザイナーのハナです。

 

みなさんは配色を行う時、どのように色を選びますか?

調和した配色を作ることは一見センスのいる難しいことのように思えます。

ですが実際は(あるにこしたことはないですが)センスは一切不要で、理論さえ知っていればなんとかなります。

 

配色を調和させるための理論や法則はたくさんあるのですが、今回はビビットな色をたくさん使う際にバランス良く色を選ぶことができる方法を紹介します。

 

用意するもの

 

・等間隔に色が配置された色相環

 

トライアド

トライアドは色相環上に正三角形を配置し、その頂点が指す色でつくる三色の配色方です。

 

正三角形がどんな角度でも、その頂点が指す三色の配色は調和します。

 

 

スプリットコンプリメンタリー

スプリットコンプリメンタリーは色相環上に鋭角二等辺三角形を配置し、その頂点が指す色でつくる三色の配色方です。

特定の一色と、その補色の両隣もしくは2つ隣の色を選ぶ、という手順でも作ることができます。

「スプリット」は分割、「コンプリメンタリー」は補色という意味です。

補色の片方を分割して二色にして作る配色法なのでこの名前がつけられています。

 

 

テトラード

テトラードは色相環上に正方形を配置し、その頂点が指す色でつくる四色の配色方です。

正方形がどんな角度でも、その頂点が指す四色の配色は調和します。

 

 

ペンタード

ペンタードは色相環上に正五角形を配置しその頂点が指す色でつくる五色、もしくはトライアドで選んだ三色に白と黒を加えて作る五色の配色方です。

正五角形で作るペンタード配色が少し派手すぎるかな?と思ったら白と黒を入れたペンタード配色にするとすっきりしまって見えます。

 

 

ヘクサード

ヘクサードは色相環上に正六角形を配置しその頂点が指す色でつくる六色、もしくはテトラードで選んだ四色に白と黒を加えて作る六色の配色方です。

ペンタードと同じく、白と黒を入れたヘクサード配色は、六色すべて有彩色の場合よりもスッキリして見えます。

ヘクサードに限らず、正多角形を用いた配色は、感覚に頼らず均等なバランスの色を選ぶことができるためとても便利です。

 

 

色彩学を勉強するメリットについて

 

色彩学は奥が深いですが、勉強することによって色々なメリットがあります。

・疲れて脳みそが回っていないときでもある程度適切な配色ができる!

・考えすぎてよくわからなくなってきたときでも配色に根拠があるので自信を持てる!

・なんでその色を選んだのか他人にちゃんと説明できる!

 

今回紹介した配色方法は、ジャッドという色彩学者が唱えた色彩調和論の「秩序の原理」というものに当たります。

ですが調和する配色はこの配色法だけではありません。たくさんあります。

ジャッドの色彩調和論には他にも「なじみの原理」「明瞭性の原理」「類似性の原理」が存在します。

また、もちろんですがジャッド以外にもたくさんの色彩学者がたくさんの色彩調和の法則を唱えています。

 

紹介してもしきれないので、別の機会に少しずつご紹介できればな、と思います。

私もまだまだ理解していない配色の方法がたくさんあるので、これからも勉強を続けていきたいと思います。

めざせ配色マスター!

 

 

 

QRコードでひみつのメッセージ

GW前で世の中浮かれてますね。(自分・・・
上から読んでも下から読んでもマエダです。
 

さて、このコードにはなんてかいてあるでしょうか!?(スマホのカメラでみてみてね☆
 
 

業務が捗る便利なツール


こちらの記事でQRコード[二次元バーコード]作成ツールを紹介してましたが、もっとシンプルなQRコード生成ツールを突貫工事いたしました。
 

https://qrypt.jp/
ひみつのメッセージをQRコードでツイートして袋とじ的に伝えるサービス。です。
 
 
 
 
 
 
 
 
 
 
そう。
みなさんお気付きですね。
QRコードをスマホで表示してもカメラから読み込めない!!!!!!
((((;゚Д゚))))ガクガクブルブル
 
 
ともだちに協力してもらったりしてQRコードに隠れたメッセージを楽しんでください。
いっしょにメッセージをみるときにコミュニケーションがひろがっちゃいますね!
 
くれぐれもムフフなURLとかを共有することに利用しないようにしましょう。
#振りじゃないんだからね!(・ε・)
 
以上、サービスPR記事でした。
#qrypt #splout

スプラウトへ入社してくれてありがとう2018

こんにちわ。
リエです。
 
スプラウトに新メンバーが増えたので、恒例のSHIZQ鶴コップの贈呈式を行いました。
SHIZQ鶴コップは先日お伺いしたSHIZQさんで購入しました。

神山しずくプロジェクト – SHIZQ再び


 
全体MTGの後に贈呈式を行ったのですが、内緒にしていたのでとてもびっくりしていました。
サプライズ成功ですΨ(`▽´)Ψ
 
写真左が新メンバーのコップです。(右は代表のおNEWコップ)

 
新メンバーのコップは、木目の特徴で絶対これだ!とピンっときたものをわたしが選びました/(‘∀’*♪
右は漆が重ね塗りされているコップなんですが、並べてみるとそれぞれ特徴があり素敵です。
 
普段使いにはもったいないかな〜と思いつつ、いつも飲んでいるお茶でもこのコップに注ぐと特別な飲み物に変身するから不思議です。
 
これでお酒が飲みたいね〜と新メンバーと話していたので、社内飲み会のときに使いたいと思います♡

業務が捗る便利なツール

こんにちわ。
リエです。
 
日々、お仕事をする中でよく使うツールがあります。
今回はそれを紹介したいと思います。
 
とくべつなものではなくわりとポピュラーなものが多いかと思いますが、おつきあいくださいませm(_ _)m

 

Google URL Shortener

https://goo.gl/
短縮URLを生成するツールです。
メールでURLをよく送付するのですが、URLって長いものが多いのでメールを見やすくするために短縮URLにして送付することが多いです。
その時使うのが、このツールです。
短縮したいURLを貼るだけで簡単に生成できるので、重宝しています。
※Google URL Shortenerは2019年3月30日にサービス終了します。
 

QRコード[二次元バーコード]作成

https://www.cman.jp/QRcode/
QRコードを簡単に作成できるツールです。
これも、QRコードにしたい文字を入力すると、簡単に作成することができます。
オプションでサイズやセル色、囲み文字などを指定して作成することができるので、無料のツールとしてはとても優秀だと思います(*´∀`*)
 

文字列ジェネレーター

https://lazesoftware.com/tool/strgen/
文字列生成ツールで、開発したシステムの入力テストの時に利用します。
弊社のプログラマさんに教えてもらいました。
 

Macのショートカットキー一覧

https://support.apple.com/ja-jp/HT201236
これはツールではないですが。。
よく使うショートカットキーは覚えれるのですが、あんまり使わないショートカットキーは忘れがちなのでこれをたまに見ます。
ショートカットキーを駆使すると業務スピードが上がります。
 

HEIC写真をJPGに変換するフリーソフト

https://www.apowersoft.jp/heic-to-jpg
わたしはiPhoneXを使っているのですが、iPhoneXで撮った写真ってJPGじゃなくHEICになるんですね。
撮った写真をブログで使ったり誰かと共有する時は、JPGに変換する必要があるので、このフリーソフトを使っています。
対象の写真をドラッグしてアップするだけで、JPGに変換してくれるので大変便利です。
 
他も都度使うツールはありますが、これらが日々よく使うツールです。
本当に便利でありがたいです(´;ω;`)
また便利なツールがありましたら、ご紹介したいと思います。

抽選プログラムを開発しました

こんにちは。開発担当のマットです。
 
Sploutでは、ライトニングトーク大会を定期的にやっております。
メンバー全員が順番に5分間のトークをして、とても楽しい時間です。
 
ライトニングトーク大会をするには、発表順を決める必要があります。
今までは順番を決めるのにあみだくじを使ったりしていましたが、折角システム開発会社なので、順番を決めてくれる抽選プログラムを作ってみようと思いました。
 
一番簡単な方法はブラウザでJavaScriptを実行させるだけです。
Google Chromeを開き、右クリックして、「検証」>「コンソール」を押して、以下のスクリプトを貼り付けてEnterキーを押すと一瞬で順番を決めることができます。

超簡単ですが、面白くはないです。

Unityで面白いものを作ろう!

最近、Unityを学習しています。Unityは3Dゲームエンジンです(wikipedia) 。
これを使えば、何か面白い抽選プログラムを作れるではないかと!
 
考えついたのは「競馬」。

まずはプロジェクト開始。

とりあえず「Kuji」と名付けました。

プロジェクトに地面(Terrain)を入れる。

新規なUnityプロジェクトだと、カメラと照明しかないので、馬が走る地面をシーンの中に挿入する必要があります。
挿入して草のテキスチャーで塗りました。

次は馬の作成。

形を作る前に馬を象徴するゲームオブジェクトを作成します。

次はそのゲームオブジェクトの中に、複数のキューブで馬の形をなんとなく作り上げます。

色付けしましょう!

Unityでオブジェクトを色塗るには、Materialを作成すべきです。
Materialは「素材」という意味で、「色」だけではなく、「光沢」に関する色々な設定ができます。
とりあえず、2つのMaterialを作成し、馬の該当箇所に設定をしました。
片方はツヤ無しの馬毛。
他方はちょっとツヤ有りの鞍。

馬を走らせましょう!

Unityのアニメーション・システムで馬を走らせる動きを作るのは簡単です。

競馬場がないと・・・

簡単に壁と決勝線を地面の上に作りました。
馬もコピペして、サイズを調整。

馬にラベルを付ける。

誰がどの馬かわかりませんので、馬の上に名前ラベルを追加しました。

馬に個性を付ける。

次はスクリプトを作成して、馬のゲームオブジェクトに付属させました。
このスクリプトで、馬に付属しているMaterialの色やラベルの表記を設定できます。
これによって、馬をカスタマイズできるようになりました。

馬を並べましょう!

上記と同様に、馬のコピペだけでできました。
それぞれの馬の名前と色を設定します。
*この画像は数字を使っていますが、実際の抽選の時は参加するメンバーの名前を入れました。

最後の最後に「レース」のスクリプトを作成!

最後にとても簡単なレースのスクリプトを作成しました。
「Spaceキー」を押すと馬達が走り出します。
UnityのUpdateファンクションで、毎フレーム、それぞれの馬をちょっとずつ前に進める。しかし、毎フレーム進める距離はある範囲以内のランダム値です。それで、それぞれの馬の進み具合に差が発生します。

なお、決勝線にたどり着くと、走り止んで、その馬のラベルに書いてある名前が一覧に表示される。これで発表順を決めることができます!

まとめ

まだ学習中ですが、Unityで簡単にできることに驚きました。
上記の抽選プログラムの総合開発時間は2時間だけでしたのに、アニメーションを対応した3Dプログラムを一から作ることができました。
とても、有力なツールです!

これからも、色々面白いプログラムを開発してみたいと思います!